I have a few SVG objects in a group. It is a curve with an "X" in the middle of it. I would like to make it look a little nicer and have a drop shadow behind it. I know I can't just CSS and will have to use a filter.
The problem I'm having is getting this drop shadow to be a circle since I believe the path was made as a square. I thought about overlaying an ellipse and just making the fill none, but I wanted to know if there is a better way.
Picture of what it looks like
Code
<g class="link" data-link_id="1">
<path stroke-width="5" fill="none" d="M1732,610.0000305175781 C1832,610.0000305175781 1760.0000610351562,710.0000305175781 1861.0000610351562,710.0000305175781" stroke="#000000"></path>
<rect stroke="none" mask="url(#fc_mask_0_1)" x="1860.0000610351562" y="707.5000305175781" width="21" height="5" fill="#000000"></rect>
<defs>
<filter id="f1" x="0" y="0">
<feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<path stroke-width="5" fill="red" class="delete_link" filter="url(#f1)" transform="translate(1796.209228515625,660.2947998046875)" width="5" height="5" d="m10.84806,-5.81639c-1.08944,-1.8664 -2.56719,-3.34415 -4.43364,-4.43353c-1.86679,-1.08933 -3.90465,-1.63388 -6.11514,-1.63388c-2.21027,0 -4.24874,0.54455 -6.11519,1.63388c-1.86657,1.08921 -3.34432,2.56697 -4.43375,4.43353c-1.08949,1.86668 -1.63404,3.90515 -1.63404,6.11525c0,2.21021 0.54472,4.24835 1.63388,6.11514c1.08938,1.8664 2.56713,3.34415 4.4337,4.43364c1.86668,1.08927 3.90498,1.63388 6.11519,1.63388s4.24874,-0.54461 6.1153,-1.63388c1.86645,-1.0891 3.34415,-2.56724 4.43348,-4.43364c1.08916,-1.86662 1.63365,-3.90504 1.63365,-6.11514c0.00006,-2.21032 -0.5445,-4.24885 -1.63343,-6.11525zm-4.80668,8.98619c0.20096,0.20074 0.30158,0.43921 0.30158,0.71418c0,0.28519 -0.10062,0.52861 -0.30158,0.72935l-1.42752,1.42797c-0.2008,0.20074 -0.44415,0.30114 -0.72979,0.30114c-0.27491,0 -0.51316,-0.1004 -0.71379,-0.30114l-2.87116,-2.87149l-2.87127,2.87149c-0.20091,0.20074 -0.43882,0.30114 -0.71379,0.30114c-0.28558,0 -0.52877,-0.1004 -0.72974,-0.30114l-1.42775,-1.42797c-0.20091,-0.20074 -0.30136,-0.44415 -0.30136,-0.72935c0,-0.27491 0.10051,-0.51338 0.30136,-0.71418l2.87127,-2.87099l-2.87127,-2.87127c-0.20091,-0.20069 -0.30136,-0.43882 -0.30136,-0.71379c0,-0.28558 0.10051,-0.52877 0.30136,-0.72974l1.42775,-1.42752c0.20096,-0.20091 0.44415,-0.30136 0.72974,-0.30136c0.27497,0 0.51288,0.10051 0.71379,0.30136l2.87127,2.87105l2.87116,-2.87105c0.20057,-0.20091 0.43882,-0.30136 0.71379,-0.30136c0.28564,0 0.52899,0.10051 0.72979,0.30136l1.42752,1.42752c0.20096,0.20096 0.30158,0.44415 0.30158,0.72974c0,0.27491 -0.10062,0.5131 -0.30158,0.71379l-2.87111,2.87127l2.87111,2.87099z"></path>
</g>
The problem is that your filter begins at 0,0: <filter id="f1" x="0" y="0">and your crossed circle at -11.88/-11.88, and your shadow gets clipped.
<svg viewBox="1730 605 160 110">
<g class="link" data-link_id="1">
<path stroke-width="5" fill="none" d="M1732,610.0000305175781 C1832,610.0000305175781 1760.0000610351562,710.0000305175781 1861.0000610351562,710.0000305175781" stroke="#000000"></path>
<rect stroke="none" mask="url(#fc_mask_0_1)" x="1860.0000610351562" y="707.5000305175781" width="21" height="5" fill="#000000"></rect>
<defs>
<filter id="f1" x="-10" y="-10" height="15" width="15">
<feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<path id="test" stroke-width="5" fill="red" class="delete_link" filter="url(#f1)" transform="translate(1796.209228515625,660.2947998046875)" width="5" height="5" d="m10.84806,-5.81639c-1.08944,-1.8664 -2.56719,-3.34415 -4.43364,-4.43353c-1.86679,-1.08933 -3.90465,-1.63388 -6.11514,-1.63388c-2.21027,0 -4.24874,0.54455 -6.11519,1.63388c-1.86657,1.08921 -3.34432,2.56697 -4.43375,4.43353c-1.08949,1.86668 -1.63404,3.90515 -1.63404,6.11525c0,2.21021 0.54472,4.24835 1.63388,6.11514c1.08938,1.8664 2.56713,3.34415 4.4337,4.43364c1.86668,1.08927 3.90498,1.63388 6.11519,1.63388s4.24874,-0.54461 6.1153,-1.63388c1.86645,-1.0891 3.34415,-2.56724 4.43348,-4.43364c1.08916,-1.86662 1.63365,-3.90504 1.63365,-6.11514c0.00006,-2.21032 -0.5445,-4.24885 -1.63343,-6.11525zm-4.80668,8.98619c0.20096,0.20074 0.30158,0.43921 0.30158,0.71418c0,0.28519 -0.10062,0.52861 -0.30158,0.72935l-1.42752,1.42797c-0.2008,0.20074 -0.44415,0.30114 -0.72979,0.30114c-0.27491,0 -0.51316,-0.1004 -0.71379,-0.30114l-2.87116,-2.87149l-2.87127,2.87149c-0.20091,0.20074 -0.43882,0.30114 -0.71379,0.30114c-0.28558,0 -0.52877,-0.1004 -0.72974,-0.30114l-1.42775,-1.42797c-0.20091,-0.20074 -0.30136,-0.44415 -0.30136,-0.72935c0,-0.27491 0.10051,-0.51338 0.30136,-0.71418l2.87127,-2.87099l-2.87127,-2.87127c-0.20091,-0.20069 -0.30136,-0.43882 -0.30136,-0.71379c0,-0.28558 0.10051,-0.52877 0.30136,-0.72974l1.42775,-1.42752c0.20096,-0.20091 0.44415,-0.30136 0.72974,-0.30136c0.27497,0 0.51288,0.10051 0.71379,0.30136l2.87127,2.87105l2.87116,-2.87105c0.20057,-0.20091 0.43882,-0.30136 0.71379,-0.30136c0.28564,0 0.52899,0.10051 0.72979,0.30136l1.42752,1.42752c0.20096,0.20096 0.30158,0.44415 0.30158,0.72974c0,0.27491 -0.10062,0.5131 -0.30158,0.71379l-2.87111,2.87127l2.87111,2.87099z"></path>
</g>
</svg>
Related
I'm currently working on nested pattern in svg where the first pattern is used to fill the second shape which is used to fill the third.
The following code snippet run perfectly on a website like w3schools, but once converted to a file and to use on a browser it only shows an empty box, with no error code.
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
<pattern id="a" viewBox="0 0 12 12" width="135%" height="150%">
<g stroke="black" stroke-width="1">
<circle cx="6" cy="6" r="4" fill="red"/>
<circle cx="6" cy="6" r="2" fill="yellow"/>
</g>
<animate attributeName="x" from="0" to="1.35" dur="5s" repeatCount="indefinite"/>
</pattern>
<pattern id="b" viewBox="0 0 50 50" width="100%" height="100%">
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)"/>
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)" transform="scale(-1,1) rotate(90 50 50) translate(0,100)"/>
</pattern>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(90 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(180 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(270 50 50)"/>
<rect width="100" height="100" fill="transparent" stroke="black" stroke-width="3"/>
</svg>
Here is the following output:
I tried to use diverse way to use the pattern "a" like using <defs> or <use xlinks:href>, the code still run but it doesn't give the expected output or any errors. I tried using diverse browser (Chrome, Opera, Edge, Firefox), but they all give the same empty box. When I copy and paste the code while inspecting the element, to the w3school website, it all works fine.
Hello
I am developing a react app and I want to set a SVG for my header background.
But when I export it from adobe XD it's size will change.
This is the SVG code :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1970.909" height="211.264" viewBox="0 0 1970.909 211.264">
<defs>
<filter id="Path_7" x="0" y="0" width="1970.909" height="211.264" filterUnits="userSpaceOnUse">
<feOffset dy="6" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="8.5" result="blur"/>
<feFlood flood-color="#396eb0" flood-opacity="0.278"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_7)">
<path id="Path_7-2" data-name="Path 7" d="M0,0,1919.909.341V159.89s-164.931-36.264-428.15-36.264-349.451,32.555-624.725,36.264-259.615-21.429-476.374-21.429S0,159.89,0,159.89Z" transform="translate(25.5 19.5)" fill="#f05454"/>
</g>
</svg>
This is a link to image
Edit: I can resize my SVG in adobe illustrator and every thing is fine , but I want to export and use directly from adobe XD
Edit 2: If I remove width a and height from svg it will not fit the screen again it's like it has margin.
I feel that this SVG could be optimized a bit. The path itself is fairly simple. So, in this example I scaled down the path. Now the numbers in the path are easier to overview. Then the viewBox can be simple as well. And now the filter is also more controllable.
PS: in your code you have two elements with the same id. That should be avoided.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 5">
<defs>
<filter id="Path_7" filterUnits="userSpaceOnUse">
<feOffset dy=".5" input="SourceAlpha"/>
<feGaussianBlur stdDeviation=".2" result="blur"/>
<feFlood flood-color="#396eb0" flood-opacity=".6"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<path filter="url(#Path_7)" data-name="Path 7" d="M 0 0 L 36 0 V 3 s -3 -0.5 -7 -0.5 s -7 0.5 -11 0.5 s -7 -0.5 -11 -0.5 S 0 3 0 3 Z" fill="#f05454"/>
</svg>
If you remove the width and height attributes from both the svg element and the filter element, then it will scale normally:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1970.909 211.264">
<defs>
<filter id="Path_7" x="0" y="0" filterUnits="userSpaceOnUse">
<feOffset dy="6" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="8.5" result="blur"/>
<feFlood flood-color="#396eb0" flood-opacity="0.278"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_7)">
<path id="Path_7-2" data-name="Path 7" d="M0,0,1919.909.341V159.89s-164.931-36.264-428.15-36.264-349.451,32.555-624.725,36.264-259.615-21.429-476.374-21.429S0,159.89,0,159.89Z" transform="translate(25.5 19.5)" fill="#f05454"/>
</g>
</svg>
This is almost definitely an issue with the SVG code itself. I have 2 SVGs from Figma and I load them into ReactJS as ReactComponents, regular stuff. Issue is that for some reason React sees them as the same SVG despite their SVG code being different. I suspect this to be an issue within the SVG code of these 2 SVGs because the same issue does not occur with other SVGs.
This is one SVG (I shorten the xlink:href in the end as it is too long):
<svg width="1215" height="550" viewBox="0 0 1215 550" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group 9">
<rect id="Thousand-02 1" y="16" width="696.273" height="534" fill="url(#pattern0)"/>
<path id="element2" d="M1194.87 470.154C1192.44 465.157 1194.81 459.222 1200.08 456.911C1205.35 454.599 1211.6 456.848 1214.04 461.846C1216.48 466.843 1214.11 472.778 1208.84 475.089C1203.57 477.401 1197.31 475.152 1194.87 470.154ZM1197.77 468.905C1199.48 472.403 1203.83 473.965 1207.59 472.341C1211.27 470.716 1212.92 466.593 1211.21 463.033C1209.5 459.472 1205.15 457.973 1201.39 459.597C1197.71 461.221 1196.06 465.407 1197.77 468.905Z" fill="url(#paint0_linear)"/>
<path id="element" d="M738.216 20.5325L738.137 14.0237C738.171 13.7748 738.382 13.5477 738.657 13.4976L745.55 13.4265C745.813 13.4593 746.024 13.2323 746.07 12.9004L746.038 9.2672C746.072 9.0183 745.832 8.81957 745.48 8.77585L738.588 8.84686C738.324 8.81407 738.083 8.61534 738.03 8.35551L737.951 1.84671C737.985 1.5978 737.745 1.39908 737.393 1.35535L733.546 1.38317C733.282 1.35038 733.072 1.57742 733.026 1.90929L733.105 8.41809C733.071 8.66699 732.86 8.89404 732.585 8.94421L725.692 9.01524C725.429 8.98245 725.218 9.20949 725.172 9.54136L725.204 13.1746C725.17 13.4235 725.41 13.6222 725.762 13.6659L732.654 13.5949C732.918 13.6277 733.159 13.8264 733.212 14.0863L733.291 20.5951C733.257 20.844 733.497 21.0427 733.849 21.0864L737.696 21.0586C737.971 21.0084 738.182 20.7814 738.216 20.5325Z" fill="#FDD08D"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.0282801) scale(0.00151745 0.00197858)"/>
</pattern>
<linearGradient id="paint0_linear" x1="1200.22" y1="456.866" x2="1208.02" y2="475.462" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<image id="image1" data-name="Thousand-02.png" width="659" height="534" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApMAAAIWCAYAAAALawaWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAz4ESURBVHgB7L0JoF5VdS++9nfnm5vkZiRzLpAAYUyYFdEg4KwEaat9ao19RUFtwf+Tvvbpe4TWZ/vap6CtA9oK2tr2WZXBeSJBQWYIIPOQG8g83uQmueN31n9Pa++199nnu98NSbiB80u
And this is the other SVG:
<svg width="1415" height="654" viewBox="0 0 1415 654" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group 8">
<rect id="thousand-01 1" x="728" width="687" height="654" fill="url(#pattern0)"/>
<path id="element3" d="M606.673 131.912L605.75 125.469C605.75 125.218 605.918 124.967 606.169 124.883L612.628 123.962C612.88 123.962 613.048 123.711 613.048 123.377L612.545 119.778C612.545 119.527 612.293 119.36 611.957 119.36L605.498 120.28C605.247 120.28 604.995 120.113 604.911 119.862L603.989 113.418C603.989 113.167 603.737 113 603.401 113L599.794 113.502C599.543 113.502 599.375 113.753 599.375 114.088L600.298 120.531C600.298 120.782 600.13 121.033 599.878 121.117L593.419 122.038C593.168 122.038 593 122.289 593 122.623L593.503 126.222C593.503 126.473 593.755 126.64 594.09 126.64L600.549 125.72C600.801 125.72 601.053 125.887 601.137 126.138L602.059 132.582C602.059 132.833 602.311 133 602.646 133L606.253 132.498C606.505 132.414 606.673 132.163 606.673 131.912Z" fill="#FDD08D"/>
<path id="element" d="M652.909 630.154C650.602 625.157 652.846 619.222 657.834 616.911C662.821 614.599 668.743 616.848 671.05 621.846C673.356 626.843 671.112 632.778 666.125 635.089C661.138 637.401 655.215 635.152 652.909 630.154ZM655.652 628.905C657.272 632.403 661.387 633.965 664.94 632.341C668.431 630.716 669.99 626.593 668.369 623.033C666.748 619.472 662.634 617.973 659.08 619.597C655.589 621.221 654.031 625.407 655.652 628.905Z" fill="url(#paint0_linear)"/>
<path id="element2" d="M1.18132 345.401C-1.81721 338.904 1.10028 331.189 7.58359 328.184C14.0669 325.179 21.7658 328.103 24.7644 334.599C27.7629 341.096 24.8454 348.811 18.3621 351.816C11.8788 354.821 4.17986 351.897 1.18132 345.401ZM4.74714 343.776C6.85422 348.324 12.203 350.354 16.8223 348.243C21.3606 346.131 23.3867 340.772 21.2796 336.142C19.1725 331.513 13.8238 329.564 9.20442 331.676C4.6661 333.787 2.64006 339.228 4.74714 343.776Z" fill="url(#paint1_linear)"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.0014556)"/>
</pattern>
<linearGradient id="paint0_linear" x1="657.971" y1="616.866" x2="666.07" y2="635.144" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="7.7622" y1="328.126" x2="18.2915" y2="351.887" gradientUnits="userSpaceOnUse">
<stop stop-color="#BFF0DD"/>
<stop offset="1" stop-color="#57D2A3"/>
</linearGradient>
<image id="image0" data-name="thousand-01.png" width="687" height="654" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAq8AAAKOCAYAAACIkfAOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUABANcSURBVHgB7P0JnFxHft8J/iIzK+sGqnADBMEim1ffQHdLsqYtEZTGktsaqdmWPZLtsUjtyvJovOtm27OzO+ORAVpH2
I'm having some problems when I imported my svg image as a background in css, it seems like one of the mountains in my background have this small transparent lines. But for some reason it only appears in Chrome but not FireFox.
Thanks.
here's the fiddleJS
.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="328.656" viewBox="0 0 1440 328.656" style="shape-rendering: geometricPrecision">
<defs>
<style>
.cls-1 {
filter: url(#filter);
}
.cls-2 {
filter: url(#filter-2);
}
.cls-3 {
fill: #47c9af;
fill-rule: evenodd;
}
</style>
<filter id="filter" filterUnits="userSpaceOnUse">
<feOffset result="offset" dx="81.915" dy="57.358" in="SourceAlpha"/>
<feGaussianBlur result="blur"/>
<feFlood result="flood" flood-color="#34495e"/>
<feComposite result="composite" operator="in" in2="blur"/>
<feBlend result="blend" in="SourceGraphic"/>
</filter>
<filter id="filter-2" filterUnits="userSpaceOnUse">
<feOffset result="offset" dx="42.596" dy="29.826" in="SourceAlpha"/>
<feGaussianBlur result="blur"/>
<feFlood result="flood" flood-color="#16a085"/>
<feComposite result="composite" operator="in" in2="blur"/>
<feBlend result="blend" in="SourceGraphic"/>
</filter>
</defs>
<g id="mountain.svg" class="cls-1">
<g id="_" data-name=">" class="cls-2">
<path id="Polygon_1" data-name="Polygon 1" class="cls-3" d="M-1.8,845.344L135.187,1083h-273.97Z" transform="translate(0 -812.344)"/>
<path id="Polygon_1_copy" data-name="Polygon 1 copy" class="cls-3" d="M272.186,903.344L409.171,1141H135.2Z" transform="translate(0 -812.344)"/>
<path id="Polygon_1_copy_2" data-name="Polygon 1 copy 2" class="cls-3" d="M546.171,845.344L683.156,1083H409.186Z" transform="translate(0 -812.344)"/>
<path id="Polygon_1_copy_3" data-name="Polygon 1 copy 3" class="cls-3" d="M820.155,903.344L957.14,1141H683.17Z" transform="translate(0 -812.344)"/>
<path id="Polygon_1_copy_4" data-name="Polygon 1 copy 4" class="cls-3" d="M1094.14,845.344L1231.12,1083H957.155Z" transform="translate(0 -812.344)"/>
<path id="Polygon_1_copy_5" data-name="Polygon 1 copy 5" class="cls-3" d="M1308.12,812.344L1445.11,1050H1171.14Z" transform="translate(0 -812.344)"/>
</g>
</g>
</svg>
This is a drawing bug in webkit/Chrome that seems to be triggered by the repeated use of feOffset to layer content more than 3 layers deep. If you resize the iframe in the jsfiddle, you'll see that the thin lines stay fixed relative to the parent window, not the content - so it seems to be a low level bug. Based on my experiments, any shape that is 4 or more layers deep gets the drawing artifact.
Easiest way to fix is to define your shape once in defs and utilize multiple use elements to place and color them.
I've filed bug#660745 with Chrome.
(That said - your filters have badly specified primitives (no stdDeviation for the (unused) GaussianBlur, no filter dimensions, no mode for the feBlend) that you should fix. These are better specified versions of your filters.)
<filter id="filter" >
<feOffset result="offset" dx="81.915" dy="57.358" in="SourceAlpha"/>
<feFlood result="flood" flood-color="#34495e"/>
<feComposite result="composite" operator="in" in2="offset"/>
<feBlend mode="normal" result="blend" in="SourceGraphic"/>
</filter>
<filter id="filter-2">
<feOffset result="offset" dx="42.596" dy="29.826" in="SourceAlpha"/>
<feFlood result="flood" flood-color="#16a085"/>
<feComposite result="composite" operator="in" in2="offset"/>
<feBlend mode="normal" result="blend" in="SourceGraphic"/>
</filter>
The feTurbulence filter is used to create clouds. By animating frequency value, generated clouds are zoomed in or out. I want them to slide from right to left.
I've made so far:
<svg height="0" width="0" style=";position:absolute;margin-left: -100%;">
<defs>
<filter id="imagenconturbulencias" x="0" y="0" width="100%" height="100%">
<feTurbulence result="cloud" baseFrequency=".2" seed="22" stitchTiles="nostitch" type="fractalNoise" numOctaves="3">
<animate
attributeName="baseFrequency"
calcMode="spline"
dur="5s"
values=".2;.1;"
repeatCount="indefinite"
/>
</feTurbulence>
<feComposite operator="in" in="cloud" in2="SourceGraphic"/>
</filter>
</defs>
<g stroke="none" stroke-width="4" id="rlog" fill="#eee"><path d="M34.2,13.9v19.5h-7.3V13.9H34.2z M30.5,5.2c1,0,1.8,0.3,2.6,1s1.1,1.5,1.1,2.5c0,1-0.3,1.8-1,2.5s-1.6,1-2.6,1c-1.1,0-1.9-0.3-2.6-1s-1-1.5-1-2.5c0-1,0.4-1.8,1.1-2.5S29.5,5.2,30.5,5.2z"/></g>
</svg>
<div id="a">
<svg viewBox="0 0 230 280">
<use filter="url(#imagenconturbulencias)" xlink:href="#rlog"></use>
</svg>
</div>
If you look closely, after 5 seconds animation repeats itself, as should! but it does not look so pretty.
I know this filter is used to create realistic, cloud-like structures. How do we go about moving these clouds continuously ?
feTurbulence filter takes in parameters like randomSeed numberOfOctaves and baseFrequency.
In given example I've animated value of base frequency. Since there is no more attributes to animate.
How to make this animation to appear continuous? Do we use perlin noise generator combined with matrix and displacement maps on this turbulence generated thing and animate all together somehow? (just brainstorming..)
Any help, Ideas, approaches, snippets, sincerely appreciated.
this could be black&white for simplicity, but cloud animation still is not continious. Bonus snippet
Do not animate the base frequency. For a smooth effect use a 360 hueRotate and a colorMatrix (since hueRotate cycles back to the original value).
<svg x="0px" y="0px" width="800px" height="500px" viewbox="0 0 800 500">
<script type="text/ecmascript" xlink:href="http://www.codedread.com/lib/smil.user.js"/>
<defs>
<filter id="heavycloud" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
<feTurbulence type="fractalNoise" result="cloudbase" baseFrequency=".0025" numOctaves="5" seed="24"/>
<feColorMatrix in="cloudbase" type="hueRotate" values="0" result="cloud">
<animate attributeName="values" from="0" to="360" dur="20s" repeatCount="indefinite"/>
</feColorMatrix>
<feColorMatrix in="cloud" result="wispy" type="matrix"
values="4 0 0 0 -1
4 0 0 0 -1
4 0 0 0 -1
1 0 0 0 0
"/>
<feFlood flood-color="#113388" result="blue"/>
<feBlend mode="screen" in2="blue" in="wispy"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<text x="30" y="380" filter="url(#heavycloud)" font-size="400" font-family="arial" stroke-color="blue" font-weight="bold" kerning="-75" font-stretch="condensed">SVG!</text>
</svg>