I never before handle with any SVG code, but I need now to animate some SVG lines width from zero 100%:
<svg viewBox="0 0 93 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="intro_graphics">
<g id="bg_curves">
<path d="M0.002,192l0,-192" style="fill:none;stroke:url(#_Linear1);stroke-width:0.48px;"/>
<path d="M31.165,192l0,-192" style="fill:none;stroke:url(#_Linear2);stroke-width:0.48px;"/>
<path d="M62.493,192l0,-192" style="fill:none;stroke:url(#_Linear3);stroke-width:0.48px;"/>
<path d="M92.206,192l0,-192" style="fill:none;stroke:url(#_Linear4);stroke-width:0.48px;"/>
</g>
<g id="ilustration_curves">
<path d="M47.715,89.243c5.388,4.727 8.791,11.662 8.791,19.385c0,14.229 -11.552,25.782 -25.782,25.782c-13.465,0 -24.534,-10.346 -25.683,-23.516c-0.065,-0.747 -0.074,-1.503 -0.098,-2.266c-0.065,-2.082 3.285,-3 3.567,0c0.073,0.776 0.04,1.55 0.118,2.309c1.157,11.177 10.615,19.906 22.096,19.906c12.261,0 22.215,-9.954 22.215,-22.215c0,-5.447 -1.965,-10.439 -5.224,-14.305l0,-5.08Z" style="fill:url(#_Linear5);"/>
<clipPath id="_clip6">
<path d="M43.213,93.869c4.098,3.52 6.695,8.738 6.695,14.559c0,10.588 -8.596,19.184 -19.184,19.184c-7.84,0 -14.588,-4.713 -17.563,-11.459c-0.174,-0.394 -0.404,-0.865 -0.55,-1.232c-0.581,-1.454 1.78,-3.398 3.122,-0.978c0.178,0.32 0.973,1.849 1.174,2.21c2.711,4.835 7.885,8.104 13.817,8.104c8.737,0 15.83,-7.093 15.83,-15.829c0,-3.665 -1.248,-7.04 -3.341,-9.724l0,-4.835Z"/>
</clipPath>
<g clip-path="url(#_clip6)">
<use xlink:href="#_Image7" x="12.725" y="94.585" width="37.388px" height="33.743px" transform="matrix(0.983896,0,0,0.992433,-1.09139e-13,0)"/>
</g>
<clipPath id="_clip8">
<path d="M15.61,133.301c4.37,2.766 9.556,4.369 15.114,4.369c15.577,0 28.223,-12.587 28.223,-28.091c0,-11.633 -7.12,-21.624 -17.255,-25.888l0,-3.986c12.163,4.472 20.85,16.167 20.85,29.874c0,17.561 -14.257,31.818 -31.818,31.818c-8.138,0 -15.567,-3.062 -21.196,-8.096c0,0 -0.531,-0.52 -0.967,-1.016c-1.683,-1.912 0.543,-4.303 3.181,-1.802c1.109,1.051 3.868,2.818 3.868,2.818Z"/>
</clipPath>
<g clip-path="url(#_clip8)">
<use xlink:href="#_Image9" x="8.04" y="81.103" width="54.566px" height="60.697px" transform="matrix(0.992101,0,0,0.995029,-1.09139e-13,0)"/>
</g>
</g>
<g id="plus_symbol">
<path d="M35.917,110.551c0,-0.454 -0.368,-0.823 -0.823,-0.823l-7.76,0c-0.454,0 -0.823,0.369 -0.823,0.823c0,0.454 0.369,0.823 0.823,0.823l7.76,0c0.455,0 0.823,-0.369 0.823,-0.823Z" style="fill:#bf5af0;"/>
<path d="M31.214,105.848c-0.454,0 -0.823,0.369 -0.823,0.823l0,7.76c0,0.454 0.369,0.823 0.823,0.823c0.455,0 0.823,-0.369 0.823,-0.823l0,-7.76c0,-0.454 -0.368,-0.823 -0.823,-0.823Z" style="fill:#bf5af0;"/>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,0.00180094,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,31.1652,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,62.4932,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,92.2062,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-7.79155,25.3988,-25.3988,-7.79155,40.0035,91.6304)">
<stop offset="0" style="stop-color:#bf5af0;stop-opacity:0"/>
<stop offset="1" style="stop-color:#bf5af0;stop-opacity:1"/>
</linearGradient>
<image id="_Image7" width="38px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABKElEQVRYhe3VUQqDMAwG4F/nJmxX8Qw7jcfyWF6m0Ooe1rgSrFZt0z4sEIhM5CN1v1U3qDcAbds4M7/2/jb27YTI1QB4bWCCcN2gljkWsgHw3MEEbw6AsUja5HwFRhuLhqOZbfIQkh9ldBxd0ybHvtWhMH6UyXD4bVEDMFtI31EmxVF3g3L/2cYHy4Jjm6T30ezFhSiO5m5QOiQusuBC40IcdyQuRHHicRF6b9a42Lq3mLjgc5FxQbB/XBx5TtFxAXy/mQ2AuRQcwagqhsyG4zCOvNuepHFbMLdq24RMjguFceTDzoSMjjsDW0M+nIdHwV2FuXWzjRi4mLA1ZHsWlwrmli8jdz9JUrWWkZfjIgWSMtINctGj3Cse5OJHGVJLRtaZId4qFvYBLcFgs65CS6MAAAAASUVORK5CYII="/>
<image id="_Image9" width="55px" height="61px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA9CAYAAAAJQPEgAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB6klEQVRoge2YUZKDIBBEO6u7XoZjeSyO5WX8EPcnWEQRBgPMYDlVVOWnY7f9QlAoPXdKzy/ccHoAfwCM0rMBYKZxWJg9ZZsewC8AY5fSc2c/T+NgOM19O4dw+Ay6fZ7GYWVzeXE2LJ21IBC0pTZ9zXU4htsCt9RmEEuEAxul5wWC2yRjebI6HNsUE5SKJTm0JGypWEZ/i77FvQn5sExBkxSYq82z5pJbomprtlkUy5DW7rQo2GYVLGPaUufa6liGVu5zLRuWMX2OTagEltlbvroJpWBZBc2QNrVN2xyr6StayrnWNifGdKo2dK4NbSjNBd5j2yyWMa3Ss2key5D2VljutS1jGdVLxDLbtWtiWf2G5cCSs+XLWIo1TdXGngpEmqZq3aeCZkxTtW5zzZimah8spZmmau+I5aZvCctkvQQsi127JJacN+wyluymqdr9q70mTFO1++aaME3VUt44izNN1T5YSjNN1T5YSjNN1UvG8utrc2BZ7Yb1AF7vLzkzIs40Vdvjc37eC5JNU7X7cL6gqzTTVG0onJ0zbMUHpoRzx21TVEs+bWo4OymbkGgsY+NuQk1jGRvbpost2yEgdzg7LrZsh4BS4dzxbUJVDgE1wtmhbEJZW64Zzp3YX0qWwFzh7LhtrsiM5T8/PF/5U2UUDQAAAABJRU5ErkJggg=="/>
</defs>
</svg>
This is pretty ugly code.
Here is Codepen example: https://codepen.io/trueweb/pen/OJLpLNB
I did something similar with CSS keyframes:
https://codepen.io/trueweb/pen/xxKZrBX
It looks like I cannot animate my rounded chart with keyframes
If you want to animate a stroke, you have to actually have a stroke, otherwise you're animating something that's not rendered.
svg {
width: 300px;
}
svg .line {
stroke: red;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash 13s linear;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<svg viewBox="0 0 93 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="intro_graphics">
<g id="bg_curves">
<path d="M0.002,192l0,-192" style="fill:none;stroke:url(#_Linear1);stroke-width:0.48px;"/>
<path d="M31.165,192l0,-192" style="fill:none;stroke:url(#_Linear2);stroke-width:0.48px;"/>
<path d="M62.493,192l0,-192" style="fill:none;stroke:url(#_Linear3);stroke-width:0.48px;"/>
<path d="M92.206,192l0,-192" style="fill:none;stroke:url(#_Linear4);stroke-width:0.48px;"/>
</g>
<g id="ilustration_curves">
<path class="line" d="M47.715,89.243c5.388,4.727 8.791,11.662 8.791,19.385c0,14.229 -11.552,25.782 -25.782,25.782c-13.465,0 -24.534,-10.346 -25.683,-23.516c-0.065,-0.747 -0.074,-1.503 -0.098,-2.266c-0.065,-2.082 3.285,-3 3.567,0c0.073,0.776 0.04,1.55 0.118,2.309c1.157,11.177 10.615,19.906 22.096,19.906c12.261,0 22.215,-9.954 22.215,-22.215c0,-5.447 -1.965,-10.439 -5.224,-14.305l0,-5.08Z" style="fill:url(#_Linear5);" stroke="black"/>
<clipPath id="_clip6">
<path class="line" d="M43.213,93.869c4.098,3.52 6.695,8.738 6.695,14.559c0,10.588 -8.596,19.184 -19.184,19.184c-7.84,0 -14.588,-4.713 -17.563,-11.459c-0.174,-0.394 -0.404,-0.865 -0.55,-1.232c-0.581,-1.454 1.78,-3.398 3.122,-0.978c0.178,0.32 0.973,1.849 1.174,2.21c2.711,4.835 7.885,8.104 13.817,8.104c8.737,0 15.83,-7.093 15.83,-15.829c0,-3.665 -1.248,-7.04 -3.341,-9.724l0,-4.835Z" stroke="black"/>
</clipPath>
<g clip-path="url(#_clip6)">
<use xlink:href="#_Image7" x="12.725" y="94.585" width="37.388px" height="33.743px" transform="matrix(0.983896,0,0,0.992433,-1.09139e-13,0)"/>
</g>
<clipPath id="_clip8">
<path class="line" d="M15.61,133.301c4.37,2.766 9.556,4.369 15.114,4.369c15.577,0 28.223,-12.587 28.223,-28.091c0,-11.633 -7.12,-21.624 -17.255,-25.888l0,-3.986c12.163,4.472 20.85,16.167 20.85,29.874c0,17.561 -14.257,31.818 -31.818,31.818c-8.138,0 -15.567,-3.062 -21.196,-8.096c0,0 -0.531,-0.52 -0.967,-1.016c-1.683,-1.912 0.543,-4.303 3.181,-1.802c1.109,1.051 3.868,2.818 3.868,2.818Z"/>
</clipPath>
<g clip-path="url(#_clip8)">
<use xlink:href="#_Image9" x="8.04" y="81.103" width="54.566px" height="60.697px" transform="matrix(0.992101,0,0,0.995029,-1.09139e-13,0)"/>
</g>
</g>
<g id="plus_symbol">
<path d="M35.917,110.551c0,-0.454 -0.368,-0.823 -0.823,-0.823l-7.76,0c-0.454,0 -0.823,0.369 -0.823,0.823c0,0.454 0.369,0.823 0.823,0.823l7.76,0c0.455,0 0.823,-0.369 0.823,-0.823Z" style="fill:#bf5af0;"/>
<path d="M31.214,105.848c-0.454,0 -0.823,0.369 -0.823,0.823l0,7.76c0,0.454 0.369,0.823 0.823,0.823c0.455,0 0.823,-0.369 0.823,-0.823l0,-7.76c0,-0.454 -0.368,-0.823 -0.823,-0.823Z" style="fill:#bf5af0;"/>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,0.00180094,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,31.1652,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,62.4932,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,92.2062,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-7.79155,25.3988,-25.3988,-7.79155,40.0035,91.6304)">
<stop offset="0" style="stop-color:#bf5af0;stop-opacity:0"/>
<stop offset="1" style="stop-color:#bf5af0;stop-opacity:1"/>
</linearGradient>
<image id="_Image7" width="38px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABKElEQVRYhe3VUQqDMAwG4F/nJmxX8Qw7jcfyWF6m0Ooe1rgSrFZt0z4sEIhM5CN1v1U3qDcAbds4M7/2/jb27YTI1QB4bWCCcN2gljkWsgHw3MEEbw6AsUja5HwFRhuLhqOZbfIQkh9ldBxd0ybHvtWhMH6UyXD4bVEDMFtI31EmxVF3g3L/2cYHy4Jjm6T30ezFhSiO5m5QOiQusuBC40IcdyQuRHHicRF6b9a42Lq3mLjgc5FxQbB/XBx5TtFxAXy/mQ2AuRQcwagqhsyG4zCOvNuepHFbMLdq24RMjguFceTDzoSMjjsDW0M+nIdHwV2FuXWzjRi4mLA1ZHsWlwrmli8jdz9JUrWWkZfjIgWSMtINctGj3Cse5OJHGVJLRtaZId4qFvYBLcFgs65CS6MAAAAASUVORK5CYII="/>
<image id="_Image9" width="55px" height="61px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA9CAYAAAAJQPEgAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB6klEQVRoge2YUZKDIBBEO6u7XoZjeSyO5WX8EPcnWEQRBgPMYDlVVOWnY7f9QlAoPXdKzy/ccHoAfwCM0rMBYKZxWJg9ZZsewC8AY5fSc2c/T+NgOM19O4dw+Ay6fZ7GYWVzeXE2LJ21IBC0pTZ9zXU4htsCt9RmEEuEAxul5wWC2yRjebI6HNsUE5SKJTm0JGypWEZ/i77FvQn5sExBkxSYq82z5pJbomprtlkUy5DW7rQo2GYVLGPaUufa6liGVu5zLRuWMX2OTagEltlbvroJpWBZBc2QNrVN2xyr6StayrnWNifGdKo2dK4NbSjNBd5j2yyWMa3Ss2key5D2VljutS1jGdVLxDLbtWtiWf2G5cCSs+XLWIo1TdXGngpEmqZq3aeCZkxTtW5zzZimah8spZmmau+I5aZvCctkvQQsi127JJacN+wyluymqdr9q70mTFO1++aaME3VUt44izNN1T5YSjNN1T5YSjNN1UvG8utrc2BZ7Yb1AF7vLzkzIs40Vdvjc37eC5JNU7X7cL6gqzTTVG0onJ0zbMUHpoRzx21TVEs+bWo4OymbkGgsY+NuQk1jGRvbpost2yEgdzg7LrZsh4BS4dzxbUJVDgE1wtmhbEJZW64Zzp3YX0qWwFzh7LhtrsiM5T8/PF/5U2UUDQAAAABJRU5ErkJggg=="/>
</defs>
</svg>
Related
could you please help me out, how to create SVG animation, which will behave like this? https://framer.cloud/aSUDY/
I did my best, but it always misbehaves :-(
Here is my code, where I used 6 animations to cycle through (3 to animate from 0.5 to 1 opacity and three to animate vice versa)
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<defs>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s;anim33.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="anim1.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="anim2.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim11"
attributeType="xml"
attributeName="fill-opacity"
begin="anim3.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim22"
attributeType="xml"
attributeName="fill-opacity"
begin="anim11.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim33"
attributeType="xml"
attributeName="fill-opacity"
begin="anim22.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
</defs>
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<use xlink:href="#CON33" ></use>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<use xlink:href="#CON22" ></use>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<use xlink:href="#CON11" ></use>
</g>
</svg>
I've changed the animations to use values, they don't really need to be linked.
I've removed the duplication and the elements that really were'nt doing anything other than add complexity.
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;0.5;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;1;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;1;1;1"
dur="2s"
repeatCount="indefinite"
/>
</ellipse>
</g>
</svg>
This question already has an answer here:
line segmentation in D3.js
(1 answer)
Closed 6 years ago.
I am creating several horizontal and vertical lines and I want to paint a segment of the line say from point a to point b in some other color. I can to the same creting multiple lines but can it be done using some svg or d3 library where you can keep the same line and just paint a segment part of that line in different css?
You can use a gradient for the stroke
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients -->
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="0%" />
<stop class="stop2" offset="50%" />
<stop class="stop3" offset="100%" />
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="black" stop-opacity="0" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
<style type="text/css">
<![CDATA[ #rect1 {
fill: url(#Gradient1);
}
.stop1 {
stop-color: red;
}
.stop2 {
stop-color: black;
stop-opacity: 0;
}
.stop3 {
stop-color: blue;
}
]]>
</style>
</defs>
<line x1="20" y1="100" x2="100" y2="20" stroke="url(#Gradient2)" />
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)" />
</svg>
I using Ruby, Sinatra and RMagick
I wont take browser icon (.svg file), add to icon text - version of browser - and return new .svg as respond to user
I wont open .svg as string, add some lines with my text and save this as new .svg file using RMagick.
but method to_blob and from_blob doesn't work correct
# myapp.rb
require 'sinatra'
require 'rmagick'
get '/test/:browser' do
img = Magick::Image::read("icons/default/#{params[:browser]}.svg")[0]
str = img.to_blob
"<textarea name='image' cols='100' rows='100'>#{str}</textarea>"
end
documentation from https://rmagick.github.io/image3.html#to_blob
img.to_blob [ { optional arguments } ]-> string
Description: Creates a Binary Large OBject, a direct-to-memory version
of the image.
chrome.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="15.5 15.5 224.5 224.5">
<defs>
<radialGradient cy="0" cx="0.5" id="r">
<stop stop-color="#f06b59"/>
<stop offset="1" stop-color="#df2227"/>
</radialGradient>
<radialGradient r="0.76" cy="0.3" cx="0.65" id="g">
<stop offset="0.65" stop-color="#4cb749"/>
<stop offset="1" stop-color="#388b41"/>
</radialGradient>
<radialGradient r="0.8" cy="0.25" cx="0.36" id="y">
<stop offset="0.6" stop-color="#FCD209"/>
<stop offset="0.7" stop-color="#f7c616"/>
<stop offset="1" stop-color="#bc821e"/>
</radialGradient>
<radialGradient r="1" cy="0" cx="0.5" spreadMethod="pad" id="cf">
<stop offset="0.1" stop-color="#7FB3DF"/>
<stop offset="0.9" stop-color="#0F5B94"/>
</radialGradient>
<radialGradient id="cb" r="1" cy="0" cx="0.5">
<stop offset="0" stop-color="#F6F0EE"/>
<stop offset="1" stop-color="#ddd"/>
</radialGradient>
</defs>
<path d="m198,148a70,70 0 0 0 -140,0l20,0a50,50 0 0 1 100,0" fill-opacity="0.1"/>
<circle r="45" cx="127.5" cy="127.6" fill="url(#cf)" stroke="url(#cb)" stroke-width="9" />
<path d="m228,78a112,112 0 0 0 -193,-13l45,78a50,50 0 0 1 47,-65" fill="url(#r)"/>
<path d="m35,65a112,112 0 0 0 84,174l47,-80a50,50 0 0 1 -86,-16" fill="url(#g)"/>
<path d="m119,239a112,112 0 0 0 109,-161l-101,0a50,50 0 0 1 39,81" fill="url(#y)"/>
<path d="m35,65l45,78a50,50 0 0 1 2,-34l-45,-47" opacity="0.075"/>
<path d="m119,239l47,-80a50,50 0 0 1 -29,17l-20,63" opacity="0.05"/>
<path d="m228,78l-101,0a50,50 0 0 1 39,19l64,-16" opacity="0.05"/>
</svg>
But to_blob return this:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="225" height="225">
<circle cx="0" cy="0" r="1" fill="white"/>
<circle cx="1" cy="0" r="1" fill="white"/>
<circle cx="2" cy="0" r="1" fill="white"/>
==============================
about 50 000 such lines here
if this save to file, size of file will be about 3 MB
==============================
<circle cx="220" cy="224" r="1" fill="white"/>
<circle cx="221" cy="224" r="1" fill="white"/>
<circle cx="222" cy="224" r="1" fill="white"/>
<circle cx="223" cy="224" r="1" fill="white"/>
<circle cx="224" cy="224" r="1" fill="white"/>
</svg>
What I doing wrong?
Or, if you have another idea how to do this task - please, share.
get '/test/:browser' do
image = File.open('icons/default/chrome.svg')
blob = image.read
"<textarea name='image' cols='100' rows='100'>#{blob}</textarea>"
end
This is what i need.
First open file, then use read method.
In this case all work correct and .to_blob not needed
I've created the fiddle
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-229.002" y1="335.0444" x2="-47.9087" y2="335.0444" gradientTransform="matrix(1 0 0 -1 278.5 475.0889)">
<stop offset="0" style="stop-color:#4D75B1" />
<stop offset="0.1138" style="stop-color:#4C7BB0" />
<stop offset="0.2617" style="stop-color:#4A8BAD" />
<stop offset="0.4278" style="stop-color:#46A6A7" />
<stop offset="0.5117" style="stop-color:#44B6A4" />
<stop offset="0.9093" style="stop-color:#828282" />
<animate attributeName="offset" dur="20s" values="0;1;0" repeatCount="indefinite" />
<stop offset="1" style="stop-color:#77D5C0" />
</linearGradient>
<polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
<defs>
<linearGradient id="largeGradient" x2="100%">
<stop offset="0%" stop-color="#4c7eaf"></stop>
<stop offset="25%" stop-color="#4a8eac"></stop>
<stop offset="50%" stop-color="#46a5a7"></stop>
<stop offset="75%" stop-color="#53bfac"></stop>
<stop offset="100%" stop-color="#828282"></stop>
<animate attributeName="x2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
the animation is moving vertically but i want it be moved horizontally.
I am not able to do this . someone please help me out
My confusion is the gradient is like vertical. how can i set the stop tag with the offset for the different colors and animation.
and also in animate tag. if i use freeze instead of repeatcount attribute that will take full single color but i want it to filled with the gradient i.e how it animates.
Better if the animation come like the waves from the bottom to top.(liquid filling effect)
JSfiddle
Added the svg code for the final image i needed after the animation
<?xml version="1.0" encoding="utf-8"?>
js fiddle updated
the animation movement to be from bottom to top and gradient color should be from left to right .and also i need that to be animated like the water waves
You mean like this? I've just used y2 instead of x2
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
<defs>
<linearGradient id="largeGradient" x2="0" y2="100%">
<stop offset="0%" stop-color="#4c7eaf"></stop>
<stop offset="25%" stop-color="#4a8eac"></stop>
<stop offset="50%" stop-color="#46a5a7"></stop>
<stop offset="75%" stop-color="#53bfac"></stop>
<stop offset="100%" stop-color="#828282"></stop>
<animate attributeName="y2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
</svg>
` <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-229.002" y1="335.0444" x2="-47.9087" y2="335.0444" gradientTransform="matrix(1 0 0 -1 278.5 475.0889)">
<stop offset="0" style="stop-color:#4D75B1" />
<stop offset="0.1138" style="stop-color:#4C7BB0" />
<stop offset="0.2617" style="stop-color:#4A8BAD" />
<stop offset="0.4278" style="stop-color:#46A6A7" />
<stop offset="0.5117" style="stop-color:#44B6A4" />
<stop offset="0.9093" style="stop-color:#6DCFBA" />
<animate attributeName="offset" dur="20s" values="0;1;0"
repeatCount="indefinite" />
<stop offset="1" style="stop-color:#77D5C0" />
</linearGradient>
<polygon display"none" fill="url(#SVGID_1_)" points="49.498,91.095 79.75,91.095 91.515,142.356 103.699,91.095 132.27,91.095 141.934,136.894 158.742,91.095 199.076,91.095 230.591,188.994 155.238,188.994 162.38,167.986 195.294,167.986 177.931,110.704
150.898,188.994 129.191,188.994 115.607,135.212 101.322,188.992 73.592,188.992 " />
<polygon class="wdgreyAnim" fill="#828282" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
</svg>`
I have code like this through svg one polygon is grey and another one is colored.
I need the effect like the colored gradient color should be animated so that it should feel like the water filling (waves) on the grey color logo.
for the colored polygon i given attribute display none.
Jsfiddle