I have made animation as i wanted. But now i am in problem that how to fill them with black color as it animates to draw the words.
I hope you understood what i am saying.
Right now it is showing something like this
http://progsofts.com/animate.html
But i want when it animate, it should fill the Letters of Text with Black color.
Here are my codes if someone can help me please.
<style>
#animator { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
margin: 40vh auto 0 auto;
}
#svg-canvas { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
}
.title {
stroke-dasharray: 500;
stroke-dashoffset: 500;
background:black;
animation: draw 3s linear forwards;
-webkit-animation: draw 3s linear forwards;
-moz-animation: draw 3s linear forwards;
-o-animation: draw 3s linear forwards;
font-weight: bold;
font-size:50px;
font-family: Amatic SC;
-inkscape-font-specification: Amatic SC Bold"
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
<div id="animator">
<svg id="svg-canvas">
<g
style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000;fill-opacity:0.5;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.5"
id="text4151">
<path class="title" fill-opacity="0" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"
d="m 54.411272,49.131176 q 0,2.167969 -0.820312,3.828125 -0.820313,1.660156 -2.207032,2.734375 -1.640625,1.289062 -3.613281,1.835937 -1.953125,0.546875 -4.980469,0.546875 l -10.3125,0 0,-29.082031 8.613282,0 q 3.183593,0 4.765625,0.234375 1.582031,0.234375 3.027343,0.976563 1.601563,0.839843 2.324219,2.167968 0.722656,1.308594 0.722656,3.144532 0,2.070312 -1.054687,3.535156 -1.054688,1.445312 -2.8125,2.324219 l 0,0.15625 q 2.949219,0.605468 4.648437,2.597656 1.699219,1.972656 1.699219,5 z M 47.907366,36.025707 q 0,-1.054687 -0.351563,-1.777344 -0.351562,-0.722656 -1.132812,-1.171875 -0.917969,-0.527343 -2.226563,-0.644531 -1.308593,-0.136719 -3.242187,-0.136719 l -4.609375,0 0,8.398438 5,0 q 1.816406,0 2.890625,-0.175781 1.074219,-0.195313 1.992187,-0.78125 0.917969,-0.585938 1.289063,-1.503907 0.390625,-0.9375 0.390625,-2.207031 z m 2.480469,13.261719 q 0,-1.757813 -0.527344,-2.792969 -0.527344,-1.035156 -1.914063,-1.757812 -0.9375,-0.488282 -2.285156,-0.625 -1.328125,-0.15625 -3.242187,-0.15625 l -6.074219,0 0,10.820312 5.117187,0 q 2.539063,0 4.160157,-0.253906 1.621093,-0.273438 2.65625,-0.976563 1.09375,-0.761718 1.601562,-1.738281 0.507813,-0.976562 0.507813,-2.519531 z"
style=""
id="path4156" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 76.55971,58.076488 -3.652344,0 0,-2.324218 q -0.488281,0.332031 -1.328125,0.9375 -0.820313,0.585937 -1.601563,0.9375 -0.917968,0.449218 -2.109375,0.742187 -1.191406,0.3125 -2.792968,0.3125 -2.949219,0 -5,-1.953125 -2.050782,-1.953125 -2.050782,-4.980469 0,-2.480468 1.054688,-4.003906 1.074219,-1.542969 3.046875,-2.421875 1.992187,-0.878906 4.785156,-1.191406 2.792969,-0.3125 5.996094,-0.46875 l 0,-0.566406 q 0,-1.25 -0.449219,-2.070313 -0.429687,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.285156,-0.15625 -1.445313,0 -3.222656,0.390625 -1.777344,0.371094 -3.671875,1.09375 l -0.195313,0 0,-3.730469 q 1.074219,-0.292969 3.105469,-0.644531 2.03125,-0.351563 4.003906,-0.351563 2.304688,0 4.003906,0.390625 1.71875,0.371094 2.96875,1.289063 1.230469,0.898437 1.875,2.324219 0.644532,1.425781 0.644532,3.535156 l 0,14.804687 z m -3.652344,-5.371093 0,-6.074219 q -1.679688,0.09766 -3.964844,0.292969 -2.265625,0.195312 -3.59375,0.566406 -1.582031,0.449219 -2.558594,1.40625 -0.976562,0.9375 -0.976562,2.597656 0,1.875 1.132812,2.832031 1.132813,0.9375 3.457032,0.9375 1.933593,0 3.535156,-0.742187 1.601562,-0.761719 2.96875,-1.816406 z"
style=""
id="path4158" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 102.8683,47.00227 q 0,2.734375 -0.78125,4.921875 -0.76172,2.1875 -2.07031,3.671875 -1.386718,1.542968 -3.046874,2.324218 -1.660156,0.761719 -3.652344,0.761719 -1.855469,0 -3.242187,-0.449219 -1.386719,-0.429687 -2.734375,-1.171875 l -0.234375,1.015625 -3.4375,0 0,-30.390625 3.671875,0 0,10.859375 q 1.542968,-1.269531 3.28125,-2.070312 1.738281,-0.820313 3.90625,-0.820313 3.867187,0 6.09375,2.96875 2.24609,2.96875 2.24609,8.378907 z m -3.789059,0.09766 q 0,-3.90625 -1.289063,-5.917969 -1.289062,-2.03125 -4.160156,-2.03125 -1.601562,0 -3.242187,0.703125 -1.640625,0.683594 -3.046875,1.777344 l 0,12.5 q 1.5625,0.703125 2.675781,0.976562 1.132812,0.273438 2.558594,0.273438 3.046875,0 4.765625,-1.992188 1.738281,-2.011718 1.738281,-6.289062 z"
style=""
id="path4160" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 126.85268,47.549145 -16.07422,0 q 0,2.011718 0.60547,3.515625 0.60547,1.484375 1.66015,2.441406 1.01563,0.9375 2.40235,1.40625 1.40625,0.46875 3.08594,0.46875 2.22656,0 4.47265,-0.878906 2.26563,-0.898438 3.22266,-1.757813 l 0.19531,0 0,4.003906 q -1.85547,0.78125 -3.78906,1.308594 -1.9336,0.527344 -4.0625,0.527344 -5.42969,0 -8.47656,-2.929688 -3.04688,-2.949218 -3.04688,-8.359375 0,-5.351562 2.91016,-8.496093 2.92968,-3.144532 7.69531,-3.144532 4.41406,0 6.79687,2.578125 2.40235,2.578125 2.40235,7.324219 l 0,1.992188 z m -3.57422,-2.8125 q -0.0195,-2.890625 -1.46484,-4.472657 -1.42579,-1.582031 -4.35547,-1.582031 -2.94922,0 -4.70703,1.738281 -1.73829,1.738282 -1.97266,4.316407 l 12.5,0 z"
style=""
id="path4162" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 146.03237,40.263988 -0.19532,0 q -0.82031,-0.195312 -1.60156,-0.273437 -0.76172,-0.09766 -1.81641,-0.09766 -1.69921,0 -3.28125,0.761718 -1.58203,0.742188 -3.04687,1.933594 l 0,15.488281 -3.67188,0 0,-21.816406 3.67188,0 0,3.222656 q 2.1875,-1.757812 3.84766,-2.480468 1.67968,-0.742188 3.41796,-0.742188 0.95704,0 1.38672,0.05859 0.42969,0.03906 1.28907,0.175781 l 0,3.769531 z"
style=""
id="path4164" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 185.13393,58.076488 -22.69531,0 0,-3.59375 17.83203,-22.050781 -17.16797,0 0,-3.4375 21.60156,0 0,3.496094 -18.00781,22.148437 18.4375,0 0,3.4375 z"
style=""
id="path4166" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 207.02846,58.076488 -3.65234,0 0,-2.324218 q -0.48829,0.332031 -1.32813,0.9375 -0.82031,0.585937 -1.60156,0.9375 -0.91797,0.449218 -2.10938,0.742187 -1.1914,0.3125 -2.79297,0.3125 -2.94921,0 -5,-1.953125 -2.05078,-1.953125 -2.05078,-4.980469 0,-2.480468 1.05469,-4.003906 1.07422,-1.542969 3.04688,-2.421875 1.99218,-0.878906 4.78515,-1.191406 2.79297,-0.3125 5.9961,-0.46875 l 0,-0.566406 q 0,-1.25 -0.44922,-2.070313 -0.42969,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.28516,-0.15625 -1.44531,0 -3.22266,0.390625 -1.77734,0.371094 -3.67187,1.09375 l -0.19531,0 0,-3.730469 q 1.07422,-0.292969 3.10547,-0.644531 2.03125,-0.351563 4.0039,-0.351563 2.30469,0 4.00391,0.390625 1.71875,0.371094 2.96875,1.289063 1.23047,0.898437 1.875,2.324219 0.64453,1.425781 0.64453,3.535156 l 0,14.804687 z m -3.65234,-5.371093 0,-6.074219 q -1.67969,0.09766 -3.96485,0.292969 -2.26562,0.195312 -3.59375,0.566406 -1.58203,0.449219 -2.55859,1.40625 -0.97656,0.9375 -0.97656,2.597656 0,1.875 1.13281,2.832031 1.13281,0.9375 3.45703,0.9375 1.93359,0 3.53516,-0.742187 1.60156,-0.761719 2.96875,-1.816406 z"
style=""
id="path4168" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 245.97377,58.076488 -3.67187,0 0,-12.421875 q 0,-1.40625 -0.13672,-2.714843 -0.11719,-1.308594 -0.52735,-2.089844 -0.44921,-0.839844 -1.28906,-1.269531 -0.83984,-0.429688 -2.42187,-0.429688 -1.54297,0 -3.08594,0.78125 -1.54297,0.761719 -3.08594,1.953125 0.0586,0.449219 0.0977,1.054688 0.0391,0.585937 0.0391,1.171875 l 0,13.964843 -3.67187,0 0,-12.421875 q 0,-1.445312 -0.13672,-2.734375 -0.11719,-1.308593 -0.52735,-2.089843 -0.44922,-0.839844 -1.28906,-1.25 -0.83984,-0.429688 -2.42187,-0.429688 -1.50391,0 -3.02735,0.742188 -1.5039,0.742187 -3.00781,1.894531 l 0,16.289062 -3.67188,0 0,-21.816406 3.67188,0 0,2.421875 q 1.71875,-1.425781 3.41797,-2.226562 1.71875,-0.800782 3.65234,-0.800782 2.22656,0 3.76953,0.9375 1.5625,0.9375 2.32422,2.597657 2.22656,-1.875 4.0625,-2.695313 1.83594,-0.839844 3.92578,-0.839844 3.59375,0 5.29297,2.1875 1.71875,2.167969 1.71875,6.074219 l 0,14.160156 z"
style=""
id="path4170" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 269.99721,58.076488 -3.65234,0 0,-2.324218 q -0.48829,0.332031 -1.32813,0.9375 -0.82031,0.585937 -1.60156,0.9375 -0.91797,0.449218 -2.10938,0.742187 -1.1914,0.3125 -2.79297,0.3125 -2.94921,0 -5,-1.953125 -2.05078,-1.953125 -2.05078,-4.980469 0,-2.480468 1.05469,-4.003906 1.07422,-1.542969 3.04688,-2.421875 1.99218,-0.878906 4.78515,-1.191406 2.79297,-0.3125 5.9961,-0.46875 l 0,-0.566406 q 0,-1.25 -0.44922,-2.070313 -0.42969,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.28516,-0.15625 -1.44531,0 -3.22266,0.390625 -1.77734,0.371094 -3.67187,1.09375 l -0.19531,0 0,-3.730469 q 1.07422,-0.292969 3.10547,-0.644531 2.03125,-0.351563 4.0039,-0.351563 2.30469,0 4.00391,0.390625 1.71875,0.371094 2.96875,1.289063 1.23047,0.898437 1.875,2.324219 0.64453,1.425781 0.64453,3.535156 l 0,14.804687 z m -3.65234,-5.371093 0,-6.074219 q -1.67969,0.09766 -3.96485,0.292969 -2.26562,0.195312 -3.59375,0.566406 -1.58203,0.449219 -2.55859,1.40625 -0.97656,0.9375 -0.97656,2.597656 0,1.875 1.13281,2.832031 1.13281,0.9375 3.45703,0.9375 1.93359,0 3.53516,-0.742187 1.60156,-0.761719 2.96875,-1.816406 z"
style=""
id="path4172" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 295.34877,58.076488 -3.67187,0 0,-12.421875 q 0,-1.503906 -0.17578,-2.8125 -0.17579,-1.328125 -0.64454,-2.070312 -0.48828,-0.820313 -1.40625,-1.210938 -0.91796,-0.410156 -2.38281,-0.410156 -1.5039,0 -3.14453,0.742188 -1.64062,0.742187 -3.14453,1.894531 l 0,16.289062 -3.67188,0 0,-21.816406 3.67188,0 0,2.421875 q 1.71875,-1.425781 3.55469,-2.226562 1.83593,-0.800782 3.76953,-0.800782 3.53515,0 5.39062,2.128907 1.85547,2.128906 1.85547,6.132812 l 0,14.160156 z"
style=""
id="path4174" />
</g>
</g>
</svg>
</div>
Hope to get help soon.
Thank you
You just need to animate the fill opacity. Add this to the keyframe style:
fill-opacity:1.0;
#animator { position:relative; width:320px; height:90px; margin:40vh auto 0 auto; }
#svg-canvas { position:relative; width:320px; height:90px; }
.title path { stroke-dasharray:500; stroke-dashoffset:500; animation:draw 3s linear forwards; -webkit-animation:draw 3s linear forwards; -moz-animation:draw 3s linear forwards; -o-animation:draw 3s linear forwards; }
#keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
#-webkit-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
#-moz-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
#-o-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
<div id="animator">
<svg id="svg-canvas" width="320" height="90" viewBox="0 0 320 90">
<g fill="#000" stroke="#000" fill-opacity="0" stroke-width="1.5" stroke-opacity="0.5" class="title">
<path d="m 54.41,49.13 q 0,2.17 -0.82,3.83 -0.82,1.66 -2.21,2.73 -1.64,1.29 -3.61,1.84 -1.95,0.55 -4.98,0.55 l -10.31,0 0,-29.08 8.61,0 q 3.18,0 4.77,0.23 1.58,0.23 3.03,0.98 1.60,0.84 2.32,2.17 0.72,1.31 0.72,3.14 0,2.07 -1.05,3.54 -1.05,1.45 -2.81,2.32 l 0,0.16 q 2.95,0.61 4.65,2.60 1.70,1.97 1.70,5 z M 47.91,36.03 q 0,-1.05 -0.35,-1.78 -0.35,-0.72 -1.13,-1.17 -0.92,-0.53 -2.23,-0.64 -1.31,-0.14 -3.24,-0.14 l -4.61,0 0,8.40 5,0 q 1.82,0 2.89,-0.18 1.07,-0.20 1.99,-0.78 0.92,-0.59 1.29,-1.50 0.39,-0.94 0.39,-2.21 z m 2.48,13.26 q 0,-1.76 -0.53,-2.79 -0.53,-1.04 -1.91,-1.76 -0.94,-0.49 -2.29,-0.62 -1.33,-0.16 -3.24,-0.16 l -6.07,0 0,10.82 5.12,0 q 2.54,0 4.16,-0.25 1.62,-0.27 2.66,-0.98 1.09,-0.76 1.60,-1.74 0.51,-0.98 0.51,-2.52 z" />
<path d="m 76.56,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 102.87,47.00 q 0,2.73 -0.78,4.92 -0.76,2.19 -2.07,3.67 -1.39,1.54 -3.05,2.32 -1.66,0.76 -3.65,0.76 -1.86,0 -3.24,-0.45 -1.39,-0.43 -2.73,-1.17 l -0.23,1.02 -3.44,0 0,-30.39 3.67,0 0,10.86 q 1.54,-1.27 3.28,-2.07 1.74,-0.82 3.91,-0.82 3.87,0 6.09,2.97 2.25,2.97 2.25,8.38 z m -3.79,0.10 q 0,-3.91 -1.29,-5.92 -1.29,-2.03 -4.16,-2.03 -1.60,0 -3.24,0.70 -1.64,0.68 -3.05,1.78 l 0,12.50 q 1.56,0.70 2.68,0.98 1.13,0.27 2.56,0.27 3.05,0 4.77,-1.99 1.74,-2.01 1.74,-6.29 z" />
<path d="m 126.85,47.55 -16.07,0 q 0,2.01 0.61,3.52 0.61,1.48 1.66,2.44 1.02,0.94 2.40,1.41 1.41,0.47 3.09,0.47 2.23,0 4.47,-0.88 2.27,-0.90 3.22,-1.76 l 0.20,0 0,4.00 q -1.86,0.78 -3.79,1.31 -1.93,0.53 -4.06,0.53 -5.43,0 -8.48,-2.93 -3.05,-2.95 -3.05,-8.36 0,-5.35 2.91,-8.50 2.93,-3.14 7.70,-3.14 4.41,0 6.80,2.58 2.40,2.58 2.40,7.32 l 0,1.99 z m -3.57,-2.81 q -0.02,-2.89 -1.46,-4.47 -1.43,-1.58 -4.36,-1.58 -2.95,0 -4.71,1.74 -1.74,1.74 -1.97,4.32 l 12.50,0 z" />
<path d="m 146.03,40.26 -0.20,0 q -0.82,-0.20 -1.60,-0.27 -0.76,-0.10 -1.82,-0.10 -1.70,0 -3.28,0.76 -1.58,0.74 -3.05,1.93 l 0,15.49 -3.67,0 0,-21.82 3.67,0 0,3.22 q 2.19,-1.76 3.85,-2.48 1.68,-0.74 3.42,-0.74 0.96,0 1.39,0.06 0.43,0.04 1.29,0.18 l 0,3.77 z" />
<path d="m 185.13,58.08 -22.70,0 0,-3.59 17.83,-22.05 -17.17,0 0,-3.44 21.60,0 0,3.50 -18.01,22.15 18.44,0 0,3.44 z" />
<path d="m 207.03,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 245.97,58.08 -3.67,0 0,-12.42 q 0,-1.41 -0.14,-2.71 -0.12,-1.31 -0.53,-2.09 -0.45,-0.84 -1.29,-1.27 -0.84,-0.43 -2.42,-0.43 -1.54,0 -3.09,0.78 -1.54,0.76 -3.09,1.95 0.06,0.45 0.10,1.05 0.04,0.59 0.04,1.17 l 0,13.96 -3.67,0 0,-12.42 q 0,-1.45 -0.14,-2.73 -0.12,-1.31 -0.53,-2.09 -0.45,-0.84 -1.29,-1.25 -0.84,-0.43 -2.42,-0.43 -1.50,0 -3.03,0.74 -1.50,0.74 -3.01,1.89 l 0,16.29 -3.67,0 0,-21.82 3.67,0 0,2.42 q 1.72,-1.43 3.42,-2.23 1.72,-0.80 3.65,-0.80 2.23,0 3.77,0.94 1.56,0.94 2.32,2.60 2.23,-1.88 4.06,-2.70 1.84,-0.84 3.93,-0.84 3.59,0 5.29,2.19 1.72,2.17 1.72,6.07 l 0,14.16 z" />
<path d="m 270.00,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 295.35,58.08 -3.67,0 0,-12.42 q 0,-1.50 -0.18,-2.81 -0.18,-1.33 -0.64,-2.07 -0.49,-0.82 -1.41,-1.21 -0.92,-0.41 -2.38,-0.41 -1.50,0 -3.14,0.74 -1.64,0.74 -3.14,1.89 l 0,16.29 -3.67,0 0,-21.82 3.67,0 0,2.42 q 1.72,-1.43 3.55,-2.23 1.84,-0.80 3.77,-0.80 3.54,0 5.39,2.13 1.86,2.13 1.86,6.13 l 0,14.16 z" />
</g>
</svg>
</div>
Related
I'm trying to animate a triangle so that its rotation accelerates (and later comes to a stop after a full rotation) and I am trying to use the animateTransform SVG tag, with the calcmode attribute set to "spline".. I can easily get the triangle to rotate with a continuous motion, but it's not the smooth acceleration I'm looking for.
Here is the code I'm using - when viewing this in Firefox it shows no animation at all :
<svg xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
*{
fill:none;
stroke:black;
}
]]>
</style>
<g class="triangle">
<path d="M 349.9999999999999 163.3974596215561 L 200 250.00000000000006 " />
<path d="M 200 250.00000000000006 L 350 336.60254037844385 " />
<path d="M 350 336.60254037844385 L 349.9999999999999 163.3974596215561 " />
<animateTransform
attributeName="transform"
type="rotate"
from="0 300 250" to="360 300 250"
begin="0s" dur="10s"
repeatCount="indefinite"
calcmode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>
What am I doing wrong? Should I use CSS animations instead? Any kind of non-continuous rotation would be a win.
I tried various value combinations for the keyTimes / keySplines attributes, but the only result I got was a continuous rotation - for example, with
keyTimes="0; 1"
keySplines="0.5 0 0.5 1"
The SVG specification says:
For animations specified with a ‘values’ list, the ‘keyTimes’ attribute if specified must have exactly as many values as there are in the ‘values’ attribute. For from/to/by animations, the ‘keyTimes’ attribute if specified must have two values.
So we either need to reduce the number of keyTimes values or move to using values and then have a matching number of values.
I've set some example values below and the shape now rotates at various speeds.
html, body {
width: 100%;
height: 100%;
}
svg {
width: 100%;
height: 200%;
transform: translate(-100px, -130px);
}
<svg xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
path {
fill:none;
stroke:black;
stroke-width:10px;
}
]]>
</style>
<g class="triangle">
<path d="M 349.9999999999999 163.3974596215561 L 200 250.00000000000006 " />
<path d="M 200 250.00000000000006 L 350 336.60254037844385 " />
<path d="M 350 336.60254037844385 L 349.9999999999999 163.3974596215561 " />
<animateTransform
attributeName="transform"
type="rotate"
values="0 300 250;100 300 250;130 300 250;200 300 250;360 300 250"
begin="0s" dur="10s"
repeatCount="indefinite"
calcmode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>
I have to make svg animation with dashed line.
I want to draw a line along with the flow.
Or draw line first and if drawing is finish, start flow.
But I can only implement separately.
How can I animate it together?
Help please..
This is my code.
https://codepen.io/hyhong/pen/KKBpvKQ
.item1 .dashed {
stroke-dasharray: 10 7;
}
.item1 .path {
animation: draw 1.5s alternate linear forwards;
}
#keyframes draw {
from {
stroke-dashoffset: 364;
}
to {
stroke-dashoffset: 0;
}
}
.item2 .path {
stroke-dasharray: 10;
stroke-dashoffset: 100;
animation: flow 3s linear infinite;
}
#keyframes flow {
100% {
stroke-dashoffset: 0;
}
}
<!-- draw svg -->
<svg class="item1" width="700" height="700">
<defs>
<path
id="dashed" class="dashed"
d="M 280 270 L 470 410 L 410 460 L 450 490"
stroke-miterlimit="10"
fill="none"
stroke="white"
stroke-width="5"
></path>
<mask id="mask">
<use xlink:href="#dashed"/>
</mask>
</defs>
<path
class="path"
d="M 280 270 L 470 410 L 410 460 L 450 490"
mask="url(#mask)"
stroke-miterlimit="10"
fill="none"
stroke="#3835B9"
stroke-width="5"
stroke-dasharray="364"
stroke-dashoffet="364"
></path>
</svg>
<!-- flow svg -->
<svg class="item2" width="700" height="700">
<path
class="path"
d="M 280 270 L 470 410 L 410 460 L 450 490"
stroke-miterlimit="10"
fill="none"
stroke="#3835B9"
stroke-width="5"
></path>
</svg>
I don't get your question 100%. but SVG SMIL Animation can be used in a situation where you need to time the starting (and ending) of different animations using <animate>. So, here are three examples where I animate stroke-dashoffset.
In the first the animations are independent, the green just starts 2 seconds after the red. In the second example the green starts when the red ends. You can see that the begin attribute refer to the the id of the red. The same goes for the third example.
<p>Green begin 2s after red:</p>
<svg viewBox="0 0 250 10">
<path d="M 20 5 h 100" stroke="red" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;-100" dur="4s" fill="freeze"
repeatCount="1" />
</path>
<path d="M 120 5 h 100" stroke="green" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;0" dur="2s" fill="freeze"
repeatCount="1" begin="2s" />
</path>
</svg>
<p>Green begin when red ends:</p>
<svg viewBox="0 0 250 10">
<path d="M 20 5 h 100" stroke="red" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate id="a1" attributeName="stroke-dashoffset"
values="100;-100" dur="4s" fill="freeze"
repeatCount="1" />
</path>
<path d="M 120 5 h 100" stroke="green" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;0" dur="2s" fill="freeze"
repeatCount="1" begin="a1.end" />
</path>
</svg>
<p>Green begin 1s after red begin:</p>
<svg viewBox="0 0 250 10">
<path d="M 20 5 h 100" stroke="red" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate id="a2" attributeName="stroke-dashoffset"
values="100;-100" dur="4s" fill="freeze"
repeatCount="1" />
</path>
<path d="M 120 5 h 100" stroke="green" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;0" dur="2s" fill="freeze"
repeatCount="1" begin="a2.begin+1s" />
</path>
</svg>
You can use the values from the css in the SVG "animate" property. The CSS animation is looping the "stroke-dashoffset" values from 100 to 0. On the other hand it overrides the stroke-dasharray="10 7" to stroke-dasharray="10" without reason. So you can use the original "10 7" (10 pixel dash, 7 pixel gap) design, if you like to.
<svg width="250" height="250">
<path
d="M 30 10 L 220 150 L 160 200 L 200 230"
stroke-miterlimit="10"
fill="none"
stroke="#3835B9"
stroke-width="5"
stroke-dasharray="10"
stroke-dashoffset="1">
<animate
attributeName="stroke-dashoffset"
values="100;0"
dur="3s"
calcMode="linear"
repeatCount="indefinite" />
</path>
</svg>
I'm trying to animate the following GIF in SVG.
Code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
<path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z">
<animate
attributeName="d"
from="start_path"
to="end_path"
dur="0.66s"
fill="freeze"
repeatCount="indefinite"
/>
</path>
</svg>
The solution I have is using clip-path but just wanna try using path coordinates if possible.
Perhaps the simplest solution is to use a circle as a mask. Then animate the dash array of the circle.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100" height="100">
<defs>
<mask id="wipe">
<circle cx="18" cy="18" r="16"
fill="none" stroke="white" stroke-width="5" stroke-dasharray="100.6" stroke-dashoffset="100.6"
transform="rotate(-35,18,18)">
<animate attributeName="stroke-dashoffset"
from="100.6"
to="0"
dur="0.66s"
repeatCount="indefinite"/>
</circle>
</mask>
</defs>
<path d="M18.53.359h.225A16.684 16.684 0 0130.56 5.12a16.902 16.902 0 014.813 12.007A18.372 18.372 0 0130.18 29.66l-.671.672a18.215 18.215 0 01-11.99 5.163l-.436.012h-.13A16.757 16.757 0 015.12 30.662a16.845 16.845 0 01-4.74-12.08A18.35 18.35 0 015.513 6.114l.307-.311A18.203 18.203 0 0118.095.371l.435-.012zM16.413 2.6c-3.508 0-6.778 1.443-9.558 4.253-3.306 3.299-4.719 7.273-4.102 11.522.495 3.425 2.323 6.938 5.012 9.63l.31.303c4.452 4.235 13.288 7.796 20.265 1.086l.248-.244.236-.248.354-.344a12.592 12.592 0 003.686-11.167 17.578 17.578 0 00-4.95-9.618c-2.689-2.699-6.17-4.532-9.597-5.032-.63-.093-1.267-.14-1.904-.141z" mask="url(#wipe)"/>
</svg>
You'll probably want to tweak the animation to add a short pause at the end. And to fade the colours as per your GIF version.
Here is path d solution with 2 arcs, whithout stroke, only fill:
let r = 90,
rx = 70/90,
ry = 85/90,
circ = Math.PI*2;
requestAnimationFrame(draw)
function draw(t) {
t = (t/1000)%1;
let a = t*circ,
la = a % circ > Math.PI?1:0,
x = r * Math.cos(a),
y = r * Math.sin(a);
path.setAttribute("d", [
"M", r, 0,
"A", r, r, 0, la, 1, x, y,
"L", rx*x, ry*y,
"A", r*rx, r*ry, 0, la, 0, r*rx, 0,
"Z"
].join(" "));
path.setAttribute("opacity", 1-t);
requestAnimationFrame(draw);
}
<svg width=90vw height=90vh viewBox="-100,-100,200,200" >
<path id="path" transform=rotate(-45) ></path>
</svg>
In the following, the text (CLICK ME) is supposed to reappear .5 seconds after the morphMe animation ends. (See the last line of code other than closing tags)
It works fine, making the text appear the first time the animation ends. But it does not ever work after that. I can't figure why it works only once;
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" viewBox="0 0 300 300">
<defs>
<text id="startText" >CLICK ANYWHERE</text>
</defs>
<rect id="startMe" x="0" y="0" width="300" height="300" fill= "red"> </rect>
<g transform="translate(50, 50)">
<path d="M 100,0 200,200 0,200 50,100 z;" fill="green" stroke="black" stroke-linecap="round" stroke-width="32" stroke-linejoin="round" stroke-dasharray="68">
<animate id="morphMe"
restart="always"
begin="startMe.click;startText.click;click;"
attributeName="d"
dur="2s"
calcmode="spline"
repeatCount="2"
values=
"M 100,0 200,200 0,200 50,100 z ;
M 200,0 200,200 0,200 00,0 z ;
M 200,200 0,200 0,0 200,0 z ;
M 200,0 200,200 0,200 00,0 z ;
M 100,0 200,200 0,200 50,100 z:"
keyTimes="0; .25; .5; .75; 1"
keySplines="1 0 1 1; 1 0 1 1; 1 0 1 1; 1 0 1 1;"
fill="freeze"
/>
</path>
</g>
<g>
<use xlink:href="#startText" x="150" y="160" style="font-size: 18pt; fill: white; stroke: none; font-family: Rockwell; text-anchor: middle;"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="morphMe.begin"/>
<set attributeName="visibility" attributeType="CSS" to="visible" begin="morphMe.end+.5s"/>
</g>
</svg
You've got repeatCount="2" so change that to repeatCount="indefinite" and that should ensure your animation doesn't stop.
See the docs here; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/repeatCount
There seem to be two problems.
A semicolon has been mistyped as a colon in the animation
Fractional time offsets in SMIL must begin with a leading 0 (although Chrome does not enforce this)
I'd also probably just make the text and shape pointer-events: none since you don't want to manage clicks on them and just process clicks on the rect. I've also made that change below.
After that everything seems to work (at least on Firefox where I'm testing it).
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" viewBox="0 0 300 300">
<defs>
<text id="startText" pointer-events="none">CLICK ANYWHERE</text>
</defs>
<rect id="startMe" x="0" y="0" width="300" height="300" fill= "red"> </rect>
<g transform="translate(50, 50)" pointer-events="none">
<path d="M 100,0 200,200 0,200 50,100 z;" fill="green" stroke="black" stroke-linecap="round" stroke-width="32" stroke-linejoin="round" stroke-dasharray="68">
<animate id="morphMe"
restart="always"
begin="startMe.click"
attributeName="d"
dur="2s"
calcmode="spline"
repeatCount="2"
values=
"M 100,0 200,200 0,200 50,100 z ;
M 200,0 200,200 0,200 00,0 z ;
M 200,200 0,200 0,0 200,0 z ;
M 200,0 200,200 0,200 00,0 z ;
M 100,0 200,200 0,200 50,100 z;"
keyTimes="0; .25; .5; .75; 1"
keySplines="1 0 1 1; 1 0 1 1; 1 0 1 1; 1 0 1 1;"
fill="freeze"
/>
</path>
</g>
<g>
<use xlink:href="#startText" x="150" y="160" style="font-size: 18pt; fill: white; stroke: none; font-family: Rockwell; text-anchor: middle;"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="morphMe.begin"/>
<set attributeName="visibility" attributeType="CSS" to="visible" begin="morphMe.end+0.5s"/>
</g>
</svg
In this fiddle there are 2 animated paths, curve0:
<path id="curve0" stroke="black" fill="inherit" stroke-width="3"
fill-opacity=".5"
d="M 0,100
C 50,100 50,50, 100,50 C 150,50 150,100 200,100
C 300,100 200,50, 300,50 C 400,50 300,100 400,100">
<animate attributeName="d" dur="5s"
values="M 0,100
C 50,100 50,50, 100,50 C 150,50 150,150 200,150
C 250,150 250,50, 300,50 C 350,50 350,100 400,100;
M 0,100
C 50,100 50,150, 100,150 C 150,150 150, 50 200, 50
C 250, 50 250,150, 300,150 C 350,150 350,100 400,100;
M 0,100
C 50,100 50,50, 100,50 C 150,50 150,150 200,150
C 250,150 250,50, 300,50 C 350,50 350,100 400,100"
repeatCount="indefinite"/>
</path>
and curve1,
<path id="curve1" stroke="black" fill="yellowgreen" stroke-width="3" fill-opacity=".5" >
<animate attributeName="d" dur="3s"
values="M 100,0 0,100 70,50 130,150 200,100 z;
M 100,0 0,100 70,150 130, 50 200,100 z;
M 100,0 0,100 70,50 130,150 200,100 z"
repeatCount="indefinite"/>
</path>
as you can see the ellipse moves along well with curve0, but if you change curve0 on line #36 and #46 to curve1, the ellipse stops moving.
Why curve1 doesn't work and where in the specification states animateMotion works with one kind of animated path and not the other?
It works, but you need to change the <mpath> element to point to curve1 too, not just the <use> element (which draws the curve).
<animateMotion dur="5s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#curve1"/>
</animateMotion>
See fiddle.