Svg path fill with animation
The common "dasharray" line drawing technique would work for you, in combination with using the arrow shape as a mask.
This technique is described in this SO question
However, since the head of your arrow shape overlaps the tail, to get a "perfect" result, you may have to divide the sweep into two parts. You would draw the tail part with a tail mask, and then the second half of the shape (including the arrow head) with a separate mask.
Here's a rough imperfect version showing the technique.
<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'> <defs> <path id="arrow" stroke="#F0F0F0" fill="none" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1"/> <clipPath id="arrow-clip" clipPathUnits="userSpaceOnUse"> <use xlink:href="#arrow"/> </clipPath> </defs>
<g clip-path="url(#arrow-clip)"> <circle cx="244" cy="200" r="158" transform="rotate(-164,244,200)" fill="none" stroke="#4DAF4C" stroke-width="175" stroke-dasharray="993 993"> <animate attributeName="stroke-dashoffset" from="993" to="0" begin="1s" dur="1s" fill="freeze" repeatCount="1"/> </circle> </g> <use xlink:href="#arrow"/></svg>Svg fill animation for the given path
You can do this by just animating the <stop>s in a <linear gradient>.
<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<defs> <linearGradient id="left-to-right"> <stop offset="0" stop-color="#4DAF4C"> <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" /> </stop> <stop offset="0" stop-color="#fff"> <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" /> </stop> </linearGradient> </defs>
<path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" /></svg>svg path fill animation
The general idea is this: you draw the path you clip it as you need and next you animate the stroke-dashoffset of the clipped path. You make sure that the animation for the next path begins after the previous one ends: begin="a.end + .5s".
However in this case you will need to rewrite the paths. For example in the case of the lace I would use 2 paths and 2 different clip-paths or even 3. Otherwise you get an unaesthetic bleeding effect where the path overlaps.
<svg viewBox="0 0 500 500"><defs> <clipPath id="theZ"> <path d="M401.374,215.788v6.586l-69.015,59.278c-13.06,3.619-26.567,8.105-40.525,13.457l-9.869,3.797 c-16.477-4.727-33.502-9.49-50.737-13.989L403.196,77.872l2.202-2.752v-5.694h-292.1v8.522l0,0v89.515h4.232v-6.605l96.69-82.91 h83.517L141.219,266.41l-7.592,9.035c48.687,5.486,101.511,19.969,149.57,33.691l9.871-3.796 c42.062-16.286,80.727-24.315,112.481-25.985v-63.567H401.374z"/> </clipPath> <clipPath id="theLace"> <path d="M483.714,308.909c-26.231-20.329-98.91-22.17-186.394,11.654l-9.852,3.796 c-102.081-29.135-225.4-61.631-285.608-4.611c-1.316,1.222-2.013,2.971-1.898,4.764l0,0c0.201,2.424,2.328,4.227,4.751,4.025 c0.799-0.065,1.565-0.348,2.215-0.817c46.466-33.729,109.616-31.812,251.271,8.503l-3.321,1.424 c-15.298,6.625-39.86,18.165-65.826,29.971c-38.607-18.107-91.47-33.103-125.522-12.621c-49.75,29.895-36.178,97.183,73.02,58.195 c16.077-5.694,92.704-40.184,157.544-66.434c5.561,1.689,11.236,3.397,17.082,5.182c31.338,9.604,72.698,16.95,109.236,20.12C507.744,379.709,513.591,332.066,483.714,308.909z M64.726,368.131c29.383-22.664,75.753-10.611,111.666,5.352 c-13.173,5.923-26.365,11.712-38.531,16.779C41.265,430.464,36.88,389.579,64.726,368.131z M348.512,341.557 c-7.801-2.068-15.906-4.309-24.258-6.662c17.729-6.795,33.331-12.338,44.871-15.603c56.241-15.963,111.04-6.149,115.785,11.749 c6.017,22.607-39.993,35.988-136.455,10.516H348.512z"/> </clipPath></defs>
<path fill="none" stroke="#C2A01E" clip-path="url(#theLace)" stroke-width="25" stroke-dasharray="1206" stroke-dashoffset="1206" d="M-0.038,324.512c0,0,49.523-27.071,69.538-27.012 c23.35,0.069,74.84,1.785,121.646,11.637C242.583,319.965,288.5,338.5,288.5,338.5s134.99,34.916,169,27s36.999-16.612,35-33.425 s-44.115-67.954-226,12.425s-172,69-172,69s-52.867,8.077-52-16s7.277-37.219,43.205-46.984c38.84-10.557,110.17,30.986,110.17,30.986" > <animate id="a" attributeName="stroke-dashoffset" attributeType="XML" from="1206" to="0" dur="1s" fill="freeze" repeatCount="1"/> </path> <path fill="none" stroke="#C2A01E" d="M259.424,309.137V64.778" clip-path="url(#theZ)" stroke-width="300" stroke-dasharray="244.36" stroke-dashoffset="244.36"> <animate attributeName="stroke-dashoffset" attributeType="XML" begin="a.end + .5s" from="244.36" to="0" dur="1s" fill="freeze" repeatCount="1" /> </path></svg>Animating SVG fill linearly along length of path
You could do this (easier to describe than to do, there's a lot of fiddly work involved):
- Draw a smooth path on top of the shape that follows what you would consider the "path" and select such a stroke-width that the path covers the shape everywhere.
- I would leave the final dot completely out of this, as it is so much thicker than the rest.
- Divide the path in such a way that it has no overlapping parts. Order the parts in drawing order, make sure every partial path is drawn in the right direction.
- Now divide the shape in the same way, making sure each part is exactly beneath the path on top.
- Associate each of the shapes with one of the paths on top, defining the path as a mask for the shape. The path must have
stroke:white. Preserve order. - Now you can animate the paths that define the masks with a
stroke-dashoffsetanimation. - I would simply hide the final dot until the pseudo-line animation finishes and then reveal it at once.
Edit: I've definitely got too much time on my hands today, here's the working result:
.clef { fill: black; stroke: black; stroke-width: 0.1;}mask path { fill: none; stroke: white; stroke-width: 6;}#mask1 path { stroke-dasharray: 100.8186 100.8186; stroke-dashoffset: 100.8186; animation: draw1 1s linear forwards;}@keyframes draw1 { from { stroke-dashoffset: 100.8186; } to { stroke-dashoffset: 0; }}#mask2 path { stroke-dasharray: 83.6713 83.6713; stroke-dashoffset: 83.6713; animation: draw2 1s 1s linear forwards;}@keyframes draw2 { from { stroke-dashoffset: 83.6713; } to { stroke-dashoffset: 0; }}.dot { opacity: 0; animation: reveal 0s 2.5s forwards;}@keyframes reveal { from { opacity: 0; } to { opacity: 1; }}<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75"> <defs> <mask id="mask1" maskUnits="userSpaceOnUse"> <path d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112" /> </mask> <mask id="mask2" maskUnits="userSpaceOnUse"> <path d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" /> </mask> </defs> <path class="clef" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z" /> <path class="clef" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48" /> <path class="clef dot" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z" /></svg>Animate fill of path element in SVG using css
You can't use !important in keyframes (well you can but it has no effect). Presumably Chrome 43 had this bug but it's fixed by Chrome 45.
You can make it work by removing the !important from the keyframe and the original fill style and also removing the fill style from the path so you don't need the !important to force the override in the first place.
#text { stroke: black !important; stroke-width: 2; fill: transparent; stroke-dasharray: 700; stroke-dashoffset: 700; animation: dash 3s linear infinite;}@keyframes dash { to { stroke-dashoffset: 0; /* works, know why */ fill: black; }}<svg height="400" width="400"> <g id="layer1" transform="translate(0,-652.36218)"> <path style="fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:3.68879914;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" id="circle" d="m 326.27927,177.76643 a 145.20943,134.3503 0 1 1 -290.418857,0 145.20943,134.3503 0 1 1 290.418857,0 z" transform="matrix(1.3037878,0,0,1.409169,-36.076648,601.85923)" /> <path id="text" d="m 91.125,804.625 c -3.165093,10e-5 -6.211005,0.55222 -9.15625,1.6875 -9.715002,4.41994 -14.562506,13.24981 -14.5625,26.46875 l 0,59 c 1.186891,4.25766 3.619913,6.375 7.3125,6.375 l 1.4375,0 c 0.527495,0 1.047682,-0.0658 1.53125,-0.1875 4.00027,-1.17592 5.999978,-3.63518 6,-7.40625 l 0,-46.21875 c -2.2e-5,-1.7841 1.745946,-2.8411 5.21875,-3.125 2.505646,6e-5 5.173866,0.40782 8.03125,1.21875 1.626453,-0.24325 2.437462,-0.94902 2.4375,-2.125 l 0,-0.3125 c -3.8e-5,-0.56764 -0.09274,-0.8437 -0.3125,-0.84375 -3.8e-5,-1.01367 -3.188446,-1.76335 -9.5625,-2.25 -1.318804,6e-5 -2.451882,0.10981 -3.375,0.3125 -4.747617,1.17598 -7.125017,3.70109 -7.125,7.59375 l 0,45.9375 c -1.7e-5,1.98691 -1.188718,3.0785 -3.5625,3.28125 -2.241934,-0.28384 -3.34376,-1.27499 -3.34375,-2.9375 l 0,-58.5 c -1e-5,-3.32496 0.488926,-6.77536 1.5,-10.34375 2.945253,-9.00182 9.123952,-13.49991 18.53125,-13.5 2.813357,9e-5 6.416543,0.57416 10.8125,1.75 l 0.9375,0 c 1.01101,-0.48651 1.49996,-1.06058 1.5,-1.75 l 0,-0.65625 c -4e-5,-1.74353 -3.80134,-2.90097 -11.40625,-3.46875 l -2.84375,0 z m 102.21875,0 c -1.01107,0.52723 -1.53126,1.16716 -1.53125,1.9375 l 0,29.25 c -1e-5,14.15168 -0.0556,33.1791 -0.1875,57.0625 0.13192,0.20275 0.18749,0.43492 0.1875,0.71875 1.40668,3.52778 3.82116,5.3125 7.25,5.3125 l 2.3125,-0.375 c 3.4288,-1.29757 5.15623,-3.24861 5.15625,-5.84375 -0.52752,-13.74613 -0.78127,-21.60683 -0.78125,-23.59375 l 0,-4.5625 c -2e-5,-10.42107 1.7147,-17.57598 5.1875,-21.46875 4.61569,-4.46034 10.34253,-6.68745 17.15625,-6.6875 l 2.09375,0 c 4.87943,5e-5 9.56006,1.52137 14,4.5625 6.98945,6.00132 10.46868,13.564 10.46875,22.6875 l 0,0.90625 c -7e-5,0.24334 0.0868,0.47549 0.21875,0.71875 -0.13192,0.20278 -0.21882,0.44423 -0.21875,0.6875 l 0,1.03125 c -7e-5,7.54216 -2.75515,14.52146 -8.25,20.96875 -5.53891,5.1903 -11.43263,7.78125 -17.71875,7.78125 l -0.78125,0 c -0.26379,0 -0.53024,0.0439 -0.75,0.125 -0.21984,-0.0811 -0.47358,-0.125 -0.78125,-0.125 l -0.71875,0 c -3.12114,0 -6.36517,-0.70578 -9.75,-2.125 -2.63758,-1.54086 -4.12981,-2.31249 -4.4375,-2.3125 l -0.53125,0 c -1.01109,10e-6 -1.69813,0.67118 -2.09375,1.96875 -2e-5,0.72989 0.2908,1.36982 0.90625,1.9375 5.01132,3.28448 10.23653,4.90625 15.6875,4.90625 l 3.25,0 c 5.67069,0 11.65128,-2.02955 17.9375,-6.125 8.52803,-7.74487 12.78118,-16.6752 12.78125,-26.8125 l 0,-3.1875 c -7e-5,-4.41982 -0.95357,-9.15006 -2.84375,-14.21875 -5.84664,-11.88083 -14.74918,-17.81243 -26.75,-17.8125 l -1.53125,0 c -6.19829,7e-5 -11.74556,1.55597 -16.625,4.71875 -7.12142,3.73057 -10.65626,13.03408 -10.65625,27.875 l 0,4.1875 c -1e-5,2.02748 0.25372,9.91012 0.78125,23.65625 -2e-5,1.21647 -0.82956,1.9003 -2.5,2.0625 -1.67046,0 -2.67958,-0.91599 -3.03125,-2.78125 -1e-5,-0.12163 0.037,-0.31921 0.125,-0.5625 0.13192,-30.33071 0.18749,-53.84691 0.1875,-70.59375 l 0,-13.375 c -0.17585,-1.66242 -0.8629,-2.4999 -2.09375,-2.5 l -1.125,0 z M 302.875,832.34375 c -7.34121,6e-5 -13.9347,2.53447 -19.78125,7.5625 -6.98953,6.69065 -10.50001,14.80545 -10.5,24.375 l 0,3.03125 c -10e-6,8.39369 3.24402,15.70225 9.75,21.90625 7.16533,5.79852 14.81772,8.6875 22.90625,8.6875 l 3.09375,0 c 1.67041,0 3.14992,-0.0785 4.46875,-0.28125 10.90183,-2.02746 16.37494,-4.1102 16.375,-6.21875 l 0,-0.1875 c -6e-5,-1.01372 -0.73691,-1.6756 -2.1875,-2 l -0.1875,0 c -7.25332,3.12228 -13.97075,4.6875 -20.125,4.6875 -2.68155,0 -6.06808,-0.51752 -10.15625,-1.53125 -13.05591,-4.62259 -19.59376,-13.57487 -19.59375,-26.875 -10e-6,-3.60884 0.73684,-7.74307 2.1875,-12.40625 5.14322,-11.02931 13.1235,-16.53119 23.9375,-16.53125 l 0.53125,0 c 0.26372,6e-5 0.49891,-0.0658 0.71875,-0.1875 0.21976,0.12167 0.45496,0.18756 0.71875,0.1875 l 0.9375,0 c 2.50563,6e-5 5.21094,0.48633 8.15625,1.5 9.27535,4.01441 13.93745,11.7088 13.9375,23.0625 l 0,2 c -5e-5,0.89212 -0.53879,1.34379 -1.59375,1.34375 l -36.65625,0 c -1.09901,4e-5 -1.69335,-0.56139 -1.78125,-1.65625 -2e-5,-1.13533 0.64996,-1.68746 1.96875,-1.6875 l 29.34375,0 c 1.4506,-0.28381 2.18744,-0.91109 2.1875,-1.84375 l 0,-0.46875 c -0.30777,-1.25698 -0.95774,-1.87496 -1.96875,-1.875 l -29.75,0 c -3.60468,4e-5 -5.72834,1.94178 -6.34375,5.875 -2e-5,3.40617 2.17927,5.35719 6.53125,5.84375 l 36.46875,0 c 4.08815,-0.68931 6.12494,-2.35498 6.125,-5.03125 l 0,-2.3125 c -6e-5,-6.36617 -1.38688,-11.8554 -4.15625,-16.4375 -5.36307,-8.35306 -12.89734,-12.53119 -22.65625,-12.53125 l -2.90625,0 z m -182.46875,0.3125 c -1.23087,0.24336 -1.84376,0.76088 -1.84375,1.53125 -1e-5,8.23152 0.0556,21.85751 0.1875,40.875 -1e-5,1.74363 0.44602,4.11508 1.28125,7.15625 4.0882,10.13728 11.51121,15.21875 22.28125,15.21875 l 2.375,0 c 3.56065,0 7.1453,-1.02575 10.75,-3.09375 7.1653,-5.47412 10.74995,-13.30021 10.75,-23.4375 l 0,-29.84375 c -5e-5,-2.87893 1.22572,-4.34369 3.6875,-4.34375 l 0,0.1875 c 2.37374,6e-5 3.56243,1.13555 3.5625,3.40625 0.21973,29.11429 0.31244,45.76096 0.3125,49.9375 l 0,1.53125 c -6e-5,2.9601 0.75533,4.4375 2.25,4.4375 l 0.40625,0 c 0.65933,0 1.32783,-0.38581 2.03125,-1.15625 -7e-5,-7.25828 -0.14256,-25.38236 -0.40625,-54.375 -0.65946,-5.35243 -3.11102,-8.03118 -7.375,-8.03125 l -1.71875,0 -1.84375,0.1875 c -3.69263,1.29764 -5.5313,4.18661 -5.53125,8.6875 l 0,29.75 c -5e-5,2.67627 -0.55732,5.97301 -1.65625,9.90625 -3.29699,7.98818 -8.24991,12 -14.84375,12 l -1.3125,0 -0.3125,0.15625 c -3e-5,-0.12167 -0.0869,-0.15625 -0.21875,-0.15625 l -1.125,0 c -4.22011,0 -8.09559,-1.20135 -11.65625,-3.59375 -4.70366,-4.2171 -7.06251,-9.0571 -7.0625,-14.53125 -0.1319,-17.19279 -0.18753,-28.78924 -0.1875,-34.75 -3e-5,-0.93258 -0.0869,-3.07187 -0.21875,-6.4375 -0.70336,-0.72982 -1.17375,-1.13755 -1.4375,-1.21875 l -1.125,0 z" /> </g></svg>Fill color SVG path with animation
This answer provides four different options to animate the fill color of a SVG path using jQuery.animate(), CSS @keyframes and SVG SMIL-Animation:
#1 jQuery.animate() and SVG <radialGradient>
$(function(){ $("button").on("click",function(){ $(this).animate( { textIndent: 1, // or whatever }, { duration: 3000, step: function ( now, fx ) { // arguments: // now: numeric value of the property being animated at each step // fx: reference to the jQuery.fx prototype object // fx.start: first value of the animated property // fx.end: last value of the animated property var from = 0, to = 700, r = from + to * ( now - fx.start ) / ( fx.end - fx.start ); // animate r from 0 to 700 $("#gradient").attr( "r", r + "px" ); }, complete: function () { $("#path").attr("fill", "#000"); // callback } } ); });});<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><head><body>
<button>Start Animation</button> <svg height="150" width="300"> <defs> <radialGradient id="gradient" r="0px" gradientUnits="userSpaceOnUse"> <stop offset="20%" style="stop-color: #000; stop-opacity: 1" /> <stop offset="100%" style="stop-color: #000; stop-opacity: 0" /> </radialGradient> </defs> <path id="path" d="M 0 0 Q 300 300 300 0 z" fill="url(#gradient)" /> </svg></body>Animate SVG fill shape by following the form
The main idea is using a very thick line with a changing stroke-dashoffset. I clip the line with your path.
In order to understand it better you may remove the clip-path attribute.
I'm using an input type range to change the value of the stroke-dashoffset
itr.addEventListener("input",()=>{pth.setAttribute("stroke-dashoffset",itr.value)})<p><input type="range" min="0" max="235" value="235" id="itr"/></p>
<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">
<clipPath id="clip">
<path d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z"/>
</clipPath>
<path id="pth" fill="none" stroke-dasharray="235" stroke-dashoffset="235" stroke="rgb(250,0,0)" stroke-width="72" d="M115,60C15,175 235,175 155,65" clip-path="url(#clip)" />
</svg>Animate svg path fill using css
EDIT
Okay it looks like something like this should work.
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
<style type="text/css" >
<![CDATA[
@keyframes fill {
0% {
fill: black;
}
50% {
fill: white;
}
100% {
fill: black;
}
}
#fill {
fill: black;
animation-name: fill;
animation-duration: 3s;
animation-iteration-count: infinite;
}
]]>
</style>
<rect id="fill" x="21" y="26" width="60" height="60"/>
</svg>
Here is the example: http://jsbin.com/ayiheb/2/edit
How to do draw animation effect fill SVG?
Because your SVG file is not in the same shape as my logo. can you
please tell me how can I modify the path to achieve the exact same
shape. I don't have much knowledge about the illustrator by the way.
Unfortunately I do not use the illustrator. Path painted in Inkscape
Open the file from the previous answer to edit the path form inInkscape
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1"> <path class="draw-logo" fill="none" stroke="black" stroke-width="25" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" /> </svg>Related Topics
Convert HTML Character Entity Encoding in R
Balanced Text Wrapping in HTML
What's The Point of HTML Forms 'Name' Attribute
Overlapping CSS Flexbox Items in Safari
After Pseudo Element Not Appearing in Code
Change Navbar Breakpoint in Bootstrap 3.3.2
HTML 5 Input Type="Number" Element for Floating Point Numbers on Chrome
Link External CSS File Only for Specific Div
How to Convert Nunit Output into an HTML Report
CSS Flex Box Last Space Removed
How to Make My Navi-Bar The Same Across My HTML
What HTML/CSS Attributes Are Mail Safe
How to Construct a Table Header Than Spans Multiple Rows in HTML