I'm trying to animate an svg as if it's being written out, like this example on Codepen.
I'm trying to understand how to do this by comparing svg elements but so far I'm not seeing much difference. I replaced the svg in the codepen with my own but it wouldn't work. Why is this? And how could I make my own SVG's (such as the one below) animate in the same fashion as on the Codepen? (Besides replacing the path id!)
<svg xmlns="http://www.w3.org/2000/svg" width="417.773" height="224.047" viewBox="0 0 417.773 224.047">
<path id="Path_35" data-name="Path 35" d="M-3.875-234.323c-1.516,0-8.928,23.415-22.236,70.078-2.021.842-29.143,6.907-81.533,18.193-.505,0-.842-.674-1.348-2.021.842-1.179,6.57-22.742,16.846-64.687,0-.842-.505-1.179-1.348-1.348h-1.348c-1.179,0-7.581,22.91-18.867,68.73q-8.844,3.285-95.01,23.584c-35.881,7.917-53.906,12.3-53.906,13.477v2.021a4.017,4.017,0,0,1,2.021.674q56.1-14.15,143.525-33.691c0,.505.168.674.674.674h.674q0,1.516-23.584,92.988a4.017,4.017,0,0,1,.674,2.021h2.7l25.605-96.357c10.276-3.538,37.566-9.6,81.533-18.193h.674q-17.435,69.236-33.691,141.5c.674,1.853,1.348,2.7,2.021,2.7h.674l1.348-.674c11.624-53.738,23.415-101.916,35.039-144.873,38.408-8.591,66.035-12.8,82.881-12.8h5.391l3.369,3.369h.674c.674,0,1.348-.842,2.021-2.7,0-3.2-3.2-4.717-9.434-4.717h-.674c-15.5,0-42.451,3.875-80.859,11.455,0-.505-.505-.674-1.348-.674,2.7-11.624,9.265-33.86,19.541-66.709,0-1.348-.505-2.021-1.348-2.021Zm14.993,93.662c-8.254,0-13.982,6.738-17.519,20.215,0,6.57,4.548,10.276,13.477,11.455,9.434,0,19.036-7.917,28.975-23.584,0-1.348-.505-2.021-1.348-2.021H33.354c-8.76,13.477-16.677,20.215-23.584,20.215H2.358a7.891,7.891,0,0,1-4.043-4.043v-2.021a26.887,26.887,0,0,1,1.348-6.064c11.624-3.706,17.519-6.57,17.519-8.76v-2.021a5.721,5.721,0,0,0-5.391-3.369Zm-8.591,9.939c1.516-3.2,3.369-4.885,5.559-5.222l3.369-.168-4.717,2.864ZM98.716-238.029c-1.516,0-3.875,6.738-7.412,20.215q-4.3,20.973-34.365,78.838c-8.254,14.319-13.645,21.562-16.172,21.562H38.745c-1.853-.505-2.7-2.527-2.7-6.064v-10.107c14.487-43.63,24.089-76.311,28.975-97.7-.337-3.2-1.011-4.717-2.021-4.717H60.981l-4.043,4.043c-17.014,44.978-25.605,79.006-25.605,101.748v4.043c0,7.581,2.527,12.129,7.412,13.477,7.581,0,20.215-18.025,37.734-53.906h.674c-3.538,17.183-5.391,29.817-5.391,37.734v4.043c0,6.233,1.516,10.276,4.717,12.129h2.7c4.548,0,11.624-7.244,21.562-21.562-.505,0-.674-.505-.674-1.348H98.042C88.1-123.479,81.533-117.414,78.5-117.414c-1.348-.337-2.021-2.19-2.021-5.391v-4.717c0-12.971,3.2-31.838,9.434-56.6,10.276-31,15.5-48.347,15.5-51.885,0-1.348-.505-2.021-1.348-2.021Zm-41.1,17.519v.674c-2.19,11.118-6.738,26.448-13.477,45.82h-.674v-.674c0-5.054,4.548-20.383,13.477-45.82ZM106.3-139.482c-6.57,0-11.118,6.738-13.477,20.215,0,6.233,2.864,9.939,8.76,11.455,4.548,0,8.928-4.043,13.477-12.129,14.319-5.391,22.4-9.939,24.258-13.477v-.674c0-.842-.505-1.179-1.348-1.348h-1.348c-8.591,5.9-14.656,8.76-18.193,8.76h-.674C116.909-135.271,113.035-139.482,106.3-139.482Zm-1.348,5.391c3.875-1.516,6.57.168,8.086,5.391v2.021q-6.822,0-8.086-6.064Zm-4.717,5.391c4.885,3.706,8.423,5.9,10.781,6.738-2.021,5.9-4.885,8.76-8.76,8.76h-2.021c-1.348-.674-2.19-2.358-2.7-5.222C97.2-121.12,98.042-124.49,100.232-128.7Zm51.211,7.244c-4.043,0-7.075,2.19-8.928,6.738l3.032,2.864c5.728-1.685,8.928-3.538,9.6-5.728-.168-2.527-.842-3.875-1.685-3.875Z" transform="translate(262.624 238.029)" fill="#949ba5"/>
</svg>
And how could I make my own SVG's (such as the one below) animate in
the same fashion as on the Codepen? (Besides replacing the path id!)
For this you need to change your SVG
Your shapes is drawn with double paths:
You need to redraw the shape using single paths and make the line thicker (stroke-width ="6")
This is how it looks in the end:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8">
<g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="horizont" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3"/>
<path id="vert1" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" />
<path id="vert2" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6" />
<path id="sign" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" />
<path id="dot" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" />
</g>
</svg>
Animating one element with stroke-dashoffset
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515">
<g fill="none" stroke="white" stroke-width="6" stroke-linecap="round">
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign"
attributeName="stroke-dashoffset"
begin="0s;anSign.end+1s"
dur="3s"
values="750;0"
repeatCount="1"
fill="freeze" />
</path>
</svg>
Animating all the elements of the shape:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515">
<g fill="none" stroke="white" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3">
<animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/>
</path>
<!-- Length = 173px -->
<path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" >
<animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" />
</path>
<!-- Length = 232px -->
<path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6">
<animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" />
</path>
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" />
</path>
<path id="Dot" stroke-width="4" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" >
<animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" />
</path>
</g>
</svg>
Color scheme option as in the question:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8">
<g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3">
<animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/>
</path>
<!-- Length = 173px -->
<path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" >
<animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" />
</path>
<!-- Length = 232px -->
<path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6">
<animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" />
</path>
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" />
</path>
<path id="Dot" stroke-width="6" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" >
<animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" />
</path>
</g>
</svg>
I found a topic that implements an animation of the rotation and movement of the circular saw
html {
background-color: #337ab7;
}
.cutline {
stroke: #222;
stroke-width: .1%;
stroke-width: .5%;
stroke-dasharray: 1% 2%;
stroke-linecap: round;
fill: none;
}
.sawblade {
fill: #eee;
width: 200px;
height: auto;
margin: 30px;
}
<svg viewBox="0 0 3387 1270">
<path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " />
<g class="sawblade" >
<path id="sawblade" d="M779.9,413.8s15.26,-47.61,-89.24,-73.22c-1.24,-0.3,-2.45,-0.58,-3.65,-0.84c20.57,-19,50.83,-37.45,85.5,-28.49c0,0,2.29,-50,-105.27,-47.38c-1.2,0,-2.36,0.08,-3.51,0.13c14.95,-23.6,39.28,-49.18,74.95,-49.6c0,0,-10.8,-48.82,-114,-18.32l-1.63,0.49c8.62,-26.2,25.66,-55.9,59.27,-65.14c0,0,-22.88,-44.46,-114.87,11.33c-1.1,0.66,-2.15,1.32,-3.18,2c1.12,-28,9.45,-62.41,40.3,-80.6c0,0,-33.69,-36.94,-107.93,40.94c-0.82,0.87,-1.62,1.72,-2.39,2.57c-6.15,-27.25,-7,-62.55,18,-88.07c0,0,-42.16,-26.89,-93.55,67.63c-0.27,0.51,-0.53,1,-0.8,1.5c-12.43,-24.62,-21.38,-57.66,-4.15,-88c0,0,-47.61,-15.25,-73.22,89.24c-0.3,1.24,-0.58,2.46,-0.84,3.65c-19,-20.57,-37.45,-50.82,-28.49,-85.49c0,0,-50,-2.3,-47.38,105.26c0,1.2,0.08,2.37,0.13,3.52c-23.62,-14.93,-49.18,-39.29,-49.56,-75c0,0,-48.82,10.79,-18.32,114c0.16,0.55,0.32,1.09,0.49,1.62c-26.2,-8.61,-55.9,-25.66,-65.14,-59.27c0,0,-44.46,22.88,11.33,114.88q1,1.64,2,3.18c-28,-1.12,-62.42,-9.46,-80.6,-40.31c0,0,-36.94,33.7,40.94,107.93c0.86,0.83,1.72,1.62,2.57,2.4c-27.25,6.15,-62.55,7,-88.07,-18c0,0,-26.89,42.15,67.63,93.54l1.5,0.8c-24.62,12.44,-57.66,21.38,-88,4.15c0,0,-15.26,47.62,89.24,73.22c1.24,0.31,2.46,0.58,3.65,0.85c-20.57,19,-50.82,37.44,-85.49,28.49c0,0,-2.3,49.94,105.26,47.37c1.2,0,2.37,-0.07,3.52,-0.13c-14.93,23.63,-39.29,49.19,-75,49.57c0,0,10.79,48.82,114,18.32l1.62,-0.5c-8.61,26.21,-25.66,55.9,-59.27,65.14c0,0,22.88,44.46,114.88,-11.32c1.09,-0.67,2.15,-1.33,3.18,-2c-1.12,28,-9.46,62.42,-40.31,80.6c0,0,33.7,36.94,107.93,-40.93c0.83,-0.87,1.62,-1.73,2.4,-2.58c6.15,27.26,7,62.56,-18,88.07c0,0,42.15,26.89,93.54,-67.63c0.28,-0.51,0.54,-1,0.8,-1.5c12.44,24.62,21.38,57.67,4.15,88c0,0,47.62,15.26,73.22,-89.24c0.31,-1.24,0.58,-2.45,0.85,-3.65c19,20.57,37.44,50.83,28.49,85.5c0,0,49.94,2.29,47.37,-105.27c0,-1.2,-0.07,-2.36,-0.13,-3.51c23.63,14.92,49.18,39.28,49.57,75c0,0,48.82,-10.8,18.32,-114c-0.16,-0.55,-0.33,-1.09,-0.5,-1.63c26.21,8.62,55.9,25.66,65.14,59.27c0,0,44.46,-22.88,-11.32,-114.87c-0.67,-1.1,-1.33,-2.15,-2,-3.18c28,1.12,62.42,9.46,80.6,40.31c0,0,36.94,-33.7,-40.93,-107.94c-0.87,-0.82,-1.73,-1.62,-2.58,-2.39c27.26,-6.15,62.56,-7,88.07,18c0,0,26.89,-42.16,-67.63,-93.55l-1.5,-0.8c24.69,-12.4,57.74,-21.35,88.04,-4.12zm-442.7,-23.46a53.14,53.14,0,1,1,53.14,53.14a53.15,53.15,0,0,1,-53.14,-53.14z" >
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="360 390.35 390.35; 0 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#cutline" />
</animateMotion>
</path>
</g>
</svg>
In this matter, the problem of simultaneous double animation was solved: rotation and movement of a circular saw.
There was an idea to apply this solution on a realistic example, for example cutting a board
But it turned out to be not so simple.
Either the board obscured the saw, or the saw was in the foreground, blocking the board.
It is necessary that the saw cut into the board, the cut line was visible, and after passing the saw, two halves of the board would be obtained.
I tried all sorts of solutions using clip-path, mask, etc., to hide unnecessary parts of the image.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1">
<defs>
<mask id="msk1" >
<rect width="100%" height="100%" fill="white" />
<circle cx="390" cy="390" r="390" fill="red" />
</mask>
</defs>
<g id="sawblade" transform="translate(1000,126)">
<path d="m779.9 413.8c0 0 15.3-47.6-89.2-73.2-1.2-0.3-2.4-0.6-3.6-0.8 20.6-19 50.8-37.4 85.5-28.5 0 0 2.3-50-105.3-47.4-1.2 0-2.4 0.1-3.5 0.1 15-23.6 39.3-49.2 75-49.6 0 0-10.8-48.8-114-18.3l-1.6 0.5c8.6-26.2 25.7-55.9 59.3-65.1 0 0-22.9-44.5-114.9 11.3-1.1 0.7-2.1 1.3-3.2 2 1.1-28 9.5-62.4 40.3-80.6 0 0-33.7-36.9-107.9 40.9-0.8 0.9-1.6 1.7-2.4 2.6-6.1-27.2-7-62.5 18-88.1 0 0-42.2-26.9-93.5 67.6-0.3 0.5-0.5 1-0.8 1.5-12.4-24.6-21.4-57.7-4.1-88 0 0-47.6-15.2-73.2 89.2-0.3 1.2-0.6 2.5-0.8 3.7-19-20.6-37.4-50.8-28.5-85.5 0 0-50-2.3-47.4 105.3 0 1.2 0.1 2.4 0.1 3.5-23.6-14.9-49.2-39.3-49.6-75 0 0-48.8 10.8-18.3 114 0.2 0.6 0.3 1.1 0.5 1.6-26.2-8.6-55.9-25.7-65.1-59.3 0 0-44.5 22.9 11.3 114.9q1 1.6 2 3.2c-28-1.1-62.4-9.5-80.6-40.3 0 0-36.9 33.7 40.9 107.9 0.9 0.8 1.7 1.6 2.6 2.4-27.2 6.2-62.5 7-88.1-18 0 0-26.9 42.2 67.6 93.5l1.5 0.8c-24.6 12.4-57.7 21.4-88 4.2 0 0-15.3 47.6 89.2 73.2 1.2 0.3 2.5 0.6 3.7 0.9-20.6 19-50.8 37.4-85.5 28.5 0 0-2.3 49.9 105.3 47.4 1.2 0 2.4-0.1 3.5-0.1-14.9 23.6-39.3 49.2-75 49.6 0 0 10.8 48.8 114 18.3l1.6-0.5c-8.6 26.2-25.7 55.9-59.3 65.1 0 0 22.9 44.5 114.9-11.3 1.1-0.7 2.2-1.3 3.2-2-1.1 28-9.5 62.4-40.3 80.6 0 0 33.7 36.9 107.9-40.9 0.8-0.9 1.6-1.7 2.4-2.6 6.2 27.3 7 62.6-18 88.1 0 0 42.2 26.9 93.5-67.6 0.3-0.5 0.5-1 0.8-1.5 12.4 24.6 21.4 57.7 4.2 88 0 0 47.6 15.3 73.2-89.2 0.3-1.2 0.6-2.4 0.9-3.6 19 20.6 37.4 50.8 28.5 85.5 0 0 49.9 2.3 47.4-105.3 0-1.2-0.1-2.4-0.1-3.5 23.6 14.9 49.2 39.3 49.6 75 0 0 48.8-10.8 18.3-114-0.2-0.5-0.3-1.1-0.5-1.6 26.2 8.6 55.9 25.7 65.1 59.3 0 0 44.5-22.9-11.3-114.9-0.7-1.1-1.3-2.1-2-3.2 28 1.1 62.4 9.5 80.6 40.3 0 0 36.9-33.7-40.9-107.9-0.9-0.8-1.7-1.6-2.6-2.4 27.3-6.1 62.6-7 88.1 18 0 0 26.9-42.2-67.6-93.5l-1.5-0.8c24.7-12.4 57.7-21.3 88-4.1zM337.2 390.3a53.1 53.1 0 1 1 53.1 53.1 53.2 53.2 0 0 1-53.1-53.1z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
</path>
</g>
<g mask="url(#msk1)">
<path d="M514.5 288.7H3267.7L3035.1 698.6H281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"/>
<path d="m3267.7 288.7 3.3 67.7-236 404.4H281.6v-62.1h2753.5z" style="fill:#e4c000;stroke-width:2;stroke:#000"/>
<path d="m3035.1 698.6 0 62.1" style="fill:none;stroke:#000"/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"></animateTransform>
</g>
</svg>
How to get a solution so that when cutting the board, the saw is in the body of the board
It is necessary to encode two halves of the board and place one in front of the saw, and place the second half of the board behind the saw. Thus, it turns out that the saw crashes into the board.
When moving the saw, a cut line stretches behind it, which is realized by an animation of increasing the line
<line x1="820" y1="580" x2="820" y2="580" stroke="black" stroke-width="16" >
<!-- Cut line animation -->
<animate id="cut_line" attributeName="x2" begin="svg1.click" dur="10s" values="828;3550" />
Thanks to #enxaneta for the idea of using different types of animation animateTransform and animateMotion
since two animations of animateTransform applied to the same object do not work
<!-- Saw rotation animation -->
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
values="0 390.35 390.35; 360 390.35 390.35"
dur="2.5s"
begin="svg1.click"
repeatCount="indefinite"
additive="sum" />
<!-- Saw Movement Animation -->
<animateMotion
dur="15s"
begin="svg1.click"
repeatCount="1"
fill="freeze">
<mpath xlink:href="#cut" />
</animateMotion>
Please consider comments in the code
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1">
<!-- Half of the board in the background located behind the saw -->
<g id="g906" transform="translate(400,126)">
<path id="path846"
d="M 514.46257,288.68093 H 3267.7437 l -111.1614,192.53728 -2748.7345,0 z"
style="fill:#e4c000;stroke:black;stroke-width:4" />
<path id="path900"
d="M 403.30112,481.21821 H 3156.5823 l 111.1614,-192.53728 3.3199,85.72051 -106.2504,184.03106 -2756.9654,0.25024 z"
style="fill:#e4c000;stroke:#000000;stroke-width:4;" />
<!-- Board fall animation after cutting -->
<animateTransform id="an_fell2"
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 350"
begin="an_fell.begin + 0.8s "
dur="1s"
repeatCount="1"
fill="freeze"
additive="sum" />
</g>
<g transform="translate(50,126)"
id="g4">
<path
id="sawblade"
d="m 779.9,413.8 c 0,0 15.26,-47.61 -89.24,-73.22 -1.24,-0.3 -2.45,-0.58 -3.65,-0.84 20.57,-19 50.83,-37.45 85.5,-28.49 0,0 2.29,-50 -105.27,-47.38 -1.2,0 -2.36,0.08 -3.51,0.13 14.95,-23.6 39.28,-49.18 74.95,-49.6 0,0 -10.8,-48.82 -114,-18.32 l -1.63,0.49 c 8.62,-26.2 25.66,-55.9 59.27,-65.14 0,0 -22.88,-44.46 -114.87,11.33 -1.1,0.66 -2.15,1.32 -3.18,2 1.12,-28 9.45,-62.41 40.3,-80.6 0,0 -33.69,-36.94 -107.93,40.94 -0.82,0.87 -1.62,1.72 -2.39,2.57 -6.15,-27.25 -7,-62.55 18,-88.07 0,0 -42.16,-26.89 -93.55,67.63 -0.27,0.51 -0.53,1 -0.8,1.5 -12.43,-24.62 -21.38,-57.66 -4.15,-88 0,0 -47.61,-15.25 -73.22,89.24 -0.3,1.24 -0.58,2.46 -0.84,3.65 -19,-20.57 -37.45,-50.82 -28.49,-85.49 0,0 -50,-2.3 -47.38,105.26 0,1.2 0.08,2.37 0.13,3.52 -23.62,-14.93 -49.18,-39.29 -49.56,-75 0,0 -48.82,10.79 -18.32,114 0.16,0.55 0.32,1.09 0.49,1.62 -26.2,-8.61 -55.9,-25.66 -65.14,-59.27 0,0 -44.46,22.88 11.33,114.88 q 1,1.64 2,3.18 c -28,-1.12 -62.42,-9.46 -80.6,-40.31 0,0 -36.94,33.7 40.94,107.93 0.86,0.83 1.72,1.62 2.57,2.4 -27.25,6.15 -62.55,7 -88.07,-18 0,0 -26.89,42.15 67.63,93.54 l 1.5,0.8 c -24.62,12.44 -57.66,21.38 -88,4.15 0,0 -15.26,47.62 89.24,73.22 1.24,0.31 2.46,0.58 3.65,0.85 -20.57,19 -50.82,37.44 -85.49,28.49 0,0 -2.3,49.94 105.26,47.37 1.2,0 2.37,-0.07 3.52,-0.13 -14.93,23.63 -39.29,49.19 -75,49.57 0,0 10.79,48.82 114,18.32 l 1.62,-0.5 c -8.61,26.21 -25.66,55.9 -59.27,65.14 0,0 22.88,44.46 114.88,-11.32 1.09,-0.67 2.15,-1.33 3.18,-2 -1.12,28 -9.46,62.42 -40.31,80.6 0,0 33.7,36.94 107.93,-40.93 0.83,-0.87 1.62,-1.73 2.4,-2.58 6.15,27.26 7,62.56 -18,88.07 0,0 42.15,26.89 93.54,-67.63 0.28,-0.51 0.54,-1 0.8,-1.5 12.44,24.62 21.38,57.67 4.15,88 0,0 47.62,15.26 73.22,-89.24 0.31,-1.24 0.58,-2.45 0.85,-3.65 19,20.57 37.44,50.83 28.49,85.5 0,0 49.94,2.29 47.37,-105.27 0,-1.2 -0.07,-2.36 -0.13,-3.51 23.63,14.92 49.18,39.28 49.57,75 0,0 48.82,-10.8 18.32,-114 -0.16,-0.55 -0.33,-1.09 -0.5,-1.63 26.21,8.62 55.9,25.66 65.14,59.27 0,0 44.46,-22.88 -11.32,-114.87 -0.67,-1.1 -1.33,-2.15 -2,-3.18 28,1.12 62.42,9.46 80.6,40.31 0,0 36.94,-33.7 -40.93,-107.94 -0.87,-0.82 -1.73,-1.62 -2.58,-2.39 27.26,-6.15 62.56,-7 88.07,18 0,0 26.89,-42.16 -67.63,-93.55 l -1.5,-0.8 c 24.69,-12.4 57.74,-21.35 88.04,-4.12 z M 337.2,390.34 a 53.14,53.14 0 1 1 53.14,53.14 53.15,53.15 0 0 1 -53.14,-53.14 z">
<!-- Saw rotation animation -->
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
values="0 390.35 390.35; 360 390.35 390.35"
dur="2.5s"
begin="svg1.click"
repeatCount="indefinite"
additive="sum" />
<!-- Saw Movement Animation -->
<animateMotion
dur="15s"
begin="svg1.click"
repeatCount="1"
fill="freeze">
<mpath xlink:href="#cut" />
</animateMotion>
</path>
</g>
<!-- Half of the board in the foreground located before the saw -->
<g id="g907" transform="translate(303,300)">
<path id="path846"
d="M 514.46257,288.68093 H 3267.7437 l -111.1614,192.53728 -2748.7345,0 z"
style="fill:#e4c000;stroke:black;stroke-width:4;" />
<path id="path900"
d="M 403.30112,481.21821 H 3156.5823 l 111.1614,-192.53728 3.3199,85.72051 -106.2504,184.03106 -2756.9654,0.25024 z"
style="fill:#e4c000;stroke:#000000;stroke-width:4;" />
<!-- Board fall animation after cutting -->
<animateTransform id="an_fell"
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 120 400"
begin="cut_line.end"
dur="1s"
repeatCount="1"
fill="freeze"
additive="sum" />
</g>
<!-- Mask line cuting -->
<path id="path914" transform="translate(410,108)"
style="fill:none;stroke:#E4C000;stroke-width:12px;"
d="M 403.30112,481.21821 H 3156.5823" >
<animate id="opacity_line2" attributeName="stroke-opacity" begin="an_fell.begin" dur="0.1s" values="1;0" fill="freeze" />
</path>
<path id="cut" fill="red" d="M10 126 L3500 126"/>
<line x1="820" y1="580" x2="820" y2="580" stroke="black" stroke-width="12" >
<!-- Board cut animation -->
<animate id="cut_line" attributeName="x2" begin="svg1.click" dur="15s" values="828;3550" />
<!-- Masking of the line animation of the cutting -->
<animate id="opacity_line" attributeName="stroke-opacity" begin="an_fell.begin" dur="0.1s" values="1;0" fill="freeze" />
</line>
</svg>
Quick example
You need to have 3 layers. As SVG gives no support for depth apart from element order (or maybe a filter can create a z buffer) you need the elements in the correct order.
I don't have a SVG authoring tool on hand so used some code to slice the plank. The plank is duplicated, one behind and one in front of the saw. As a used code you will find some additional element ids in the example I forgot to remove. They are not needed.
To hide the cut to the left of the blade you need to cover the cut. I did this using a clip-path for the left and right sides. To avoid holes between clip paths you need to overlap them by at least a pixel.
Example
The right cut plank is a little thicker than it should be (my bad) but then this is how to solve the problem, not the complete end product.
I also removed the mask, you will have to add that as well (one for the top and one for the bottom.
As stackOverflow does not count SVG as an image i can not insert the example without putting it in a snippet.
<svg id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1">
<defs>
<clipPath id="clipLeft">
<rect x="-100" y="0" width="1102" height="100%"/>
</clipPath>
<clipPath id="clipRight">
<rect x="1000" y="0" width="2100" height="100%"/>
</clipPath>
</defs>
<!-- RIGHT SIDE of ANIMATION -->
<g clip-path="url(#clipRight)">
<!-- BACK of ANIMATION -->
<g transform="translate(1700 0)">
<path id="boardTop" d="M 514.5 288.1 H 3267.7 L 3151.4 493.4 H 398.2Z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path>
<path id="boardTopEdge" d="M 3267.7 288.1 L 3267.7 355.8 L 3151.4 561.1 L 3151.4 493.4z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path>
<path id="boardTopEdge3" d="M 3151.4 493.4 L 3151.4 561.1 L 398.2 561.1 L 398.2 493.4z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path>
<path id="boardTopEdge1" d="M 3267.7 288.1 L 3267.7 355.8 L 3151.4 561.1 L 3151.4 493.4z" style="fill:none;stroke:#000"></path>
<path id="boardTopEdge2" d="M 3151.4 493.4 L 3151.4 561.1 L 398.2 561.1 L 398.2 493.4z" style="fill:none;stroke:#000"></path>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze">
</animateTransform>
</g>
<g id="sawblade" transform="translate(1000,126)">
<path d="m779.9 413.8c0 0 15.3-47.6-89.2-73.2-1.2-0.3-2.4-0.6-3.6-0.8 20.6-19 50.8-37.4 85.5-28.5 0 0 2.3-50-105.3-47.4-1.2 0-2.4 0.1-3.5 0.1 15-23.6 39.3-49.2 75-49.6 0 0-10.8-48.8-114-18.3l-1.6 0.5c8.6-26.2 25.7-55.9 59.3-65.1 0 0-22.9-44.5-114.9 11.3-1.1 0.7-2.1 1.3-3.2 2 1.1-28 9.5-62.4 40.3-80.6 0 0-33.7-36.9-107.9 40.9-0.8 0.9-1.6 1.7-2.4 2.6-6.1-27.2-7-62.5 18-88.1 0 0-42.2-26.9-93.5 67.6-0.3 0.5-0.5 1-0.8 1.5-12.4-24.6-21.4-57.7-4.1-88 0 0-47.6-15.2-73.2 89.2-0.3 1.2-0.6 2.5-0.8 3.7-19-20.6-37.4-50.8-28.5-85.5 0 0-50-2.3-47.4 105.3 0 1.2 0.1 2.4 0.1 3.5-23.6-14.9-49.2-39.3-49.6-75 0 0-48.8 10.8-18.3 114 0.2 0.6 0.3 1.1 0.5 1.6-26.2-8.6-55.9-25.7-65.1-59.3 0 0-44.5 22.9 11.3 114.9q1 1.6 2 3.2c-28-1.1-62.4-9.5-80.6-40.3 0 0-36.9 33.7 40.9 107.9 0.9 0.8 1.7 1.6 2.6 2.4-27.2 6.2-62.5 7-88.1-18 0 0-26.9 42.2 67.6 93.5l1.5 0.8c-24.6 12.4-57.7 21.4-88 4.2 0 0-15.3 47.6 89.2 73.2 1.2 0.3 2.5 0.6 3.7 0.9-20.6 19-50.8 37.4-85.5 28.5 0 0-2.3 49.9 105.3 47.4 1.2 0 2.4-0.1 3.5-0.1-14.9 23.6-39.3 49.2-75 49.6 0 0 10.8 48.8 114 18.3l1.6-0.5c-8.6 26.2-25.7 55.9-59.3 65.1 0 0 22.9 44.5 114.9-11.3 1.1-0.7 2.2-1.3 3.2-2-1.1 28-9.5 62.4-40.3 80.6 0 0 33.7 36.9 107.9-40.9 0.8-0.9 1.6-1.7 2.4-2.6 6.2 27.3 7 62.6-18 88.1 0 0 42.2 26.9 93.5-67.6 0.3-0.5 0.5-1 0.8-1.5 12.4 24.6 21.4 57.7 4.2 88 0 0 47.6 15.3 73.2-89.2 0.3-1.2 0.6-2.4 0.9-3.6 19 20.6 37.4 50.8 28.5 85.5 0 0 49.9 2.3 47.4-105.3 0-1.2-0.1-2.4-0.1-3.5 23.6 14.9 49.2 39.3 49.6 75 0 0 48.8-10.8 18.3-114-0.2-0.5-0.3-1.1-0.5-1.6 26.2 8.6 55.9 25.7 65.1 59.3 0 0 44.5-22.9-11.3-114.9-0.7-1.1-1.3-2.1-2-3.2 28 1.1 62.4 9.5 80.6 40.3 0 0 36.9-33.7-40.9-107.9-0.9-0.8-1.7-1.6-2.6-2.4 27.3-6.1 62.6-7 88.1 18 0 0 26.9-42.2-67.6-93.5l-1.5-0.8c24.7-12.4 57.7-21.3 88-4.1zM337.2 390.3a53.1 53.1 0 1 1 53.1 53.1 53.2 53.2 0 0 1-53.1-53.1z" transform="rotate(303.501 390.35 390.35)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="2.5s" repeatCount="indefinite"></animateTransform>
</path>
</g>
<!-- FRONT of ANIMATION -->
<g transform="translate(1700 0)">
<path id="boardBotEdge" d="M 3128.1 534.4 L 3128.1 602.1 L 3035.1 766.3 L 3035.1 698.6z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path>
<path id="boardBot" d="M 374.9 534.4 H 3128.1 L 3035.1 698.6 H 281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path>
<path id="boardBotEdge3" d="M 3035.1 698.6 L 3035.1 766.3 L 281.6 766.3 L 281.6 698.6z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path>
<path id="boardBotEdge1" d="M 3128.1 534.4 L 3128.1 602.1 L 3035.1 766.3 L 3035.1 698.6z" style="fill:none;stroke:#000"></path>
<path id="boardBotEdge2" d="M 3035.1 698.6 L 3035.1 766.3 L 281.6 766.3 L 281.6 698.6z" style="fill:none;stroke:#000"></path>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze">
</animateTransform>
</g>
<g>
<rect width="0" height="200" y="450" x="800" style="fill:#e4c000;">
<animate attributeName="width" values="1750;0" dur="3s" repeatCount="1"></animate>
<animate attributeName="x" values="-850;800" dur="3s" repeatCount="1"></animate>
</rect>
</g>
</g>
<!-- LEFT SIDE of ANIMATION -->
<g clip-path="url(#clipLeft)">
<g>
<path d="M514.5 288.7H3267.7L3035.1 698.6H281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"/>
<path d="m3267.7 288.7 3.3 67.7-236 404.4H281.6v-62.1h2753.5z" style="fill:#e4c000;stroke-width:2;stroke:#000"/>
<path d="m3035.1 698.6 0 62.1" style="fill:none;stroke:#000"/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"></animateTransform>
</g>
</g>
</svg>
I've been having some issue getting the path of my SVG to animate using stroke-dasharray in conjunction with stroke-dashoffset. The path length was calculated with Js. Below I have included a JsFiddle showing exactly what I am trying to accomplish.
I have searched and searched, and a lot of the examples I came across did not work for me. At this point I am concluding that I am missing something, but I am at my wits end trying to figure out what that is.
<div>
<svg x="0px" y="0px" width="312px" height="312px" viewBox="0 0 512 512">
<g>
<path class="pathOne" d="M320,128c52.562,0,95.375,42.438,96,94.813c-0.25,1.938-0.438,3.875-0.5,5.875l-0.812,23.5l22.25,7.75 C462.688,268.906,480,293.062,480,320c0,35.312-28.688,64-64,64H96c-35.281,0-64-28.688-64-64c0-34.938,28.188-63.438,63-64 c1.5,0.219,3.063,0.406,4.625,0.5l24.313,1.594l8-22.969C140.938,209.313,165.063,192,192,192c3.125,0,6.563,0.375,11.188,1.188 l22.406,4.031l11.156-19.844C253.875,146.938,285.75,128,320,128 M320,96c-47.938,0-89.219,26.688-111.156,65.688 C203.375,160.719,197.781,160,192,160c-41.938,0-77.219,27.063-90.281,64.563C99.813,224.438,97.969,224,96,224c-53,0-96,43-96,96 s43,96,96,96h320c53,0,96-43,96-96c0-41.938-27.062-77.25-64.562-90.313C447.5,227.75,448,225.938,448,224 C448,153.313,390.688,96,320,96L320,96z" fill="#333333"/>
</g>
</svg>
</div>
svg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
path.pathOne {
stroke-dasharray: 2566;
stroke-dataoffset: 2566;
animation: cloud 5s linear alternate infinite;
}
#keyframes cloud {
from {
stroke-dashoffset: 2566;
}
to {
stroke-dashoffset: 0;
}
}
https://jsfiddle.net/maisonm/9c3baxh5/
Your grafic does not show the stroke of a path, but a filled path without a stroke. Here is a illustration of your path data as you could see them in the svg editor Inkscape:
That is the path you could animate. Was that what you wanted? In that case, define a stroke and remove the fill:
path.pathOne {
fill: none;
stroke: black;
stroke-width: 3;
stroke-dasharray: 2566;
stroke-dataoffset: 2566;
animation: cloud 5s linear alternate infinite;
}
#keyframes cloud {
from {
stroke-dashoffset: 2566;
}
to {
stroke-dashoffset: 0;
}
}
<svg x="0px" y="0px" width="250px" height="250px" viewBox="0 0 512 512">
<g>
<path class="pathOne" d="M320,128c52.562,0,95.375,42.438,96,94.813c-0.25,1.938-0.438,3.875-0.5,5.875l-0.812,23.5l22.25,7.75 C462.688,268.906,480,293.062,480,320c0,35.312-28.688,64-64,64H96c-35.281,0-64-28.688-64-64c0-34.938,28.188-63.438,63-64 c1.5,0.219,3.063,0.406,4.625,0.5l24.313,1.594l8-22.969C140.938,209.313,165.063,192,192,192c3.125,0,6.563,0.375,11.188,1.188 l22.406,4.031l11.156-19.844C253.875,146.938,285.75,128,320,128 M320,96c-47.938,0-89.219,26.688-111.156,65.688 C203.375,160.719,197.781,160,192,160c-41.938,0-77.219,27.063-90.281,64.563C99.813,224.438,97.969,224,96,224c-53,0-96,43-96,96 s43,96,96,96h320c53,0,96-43,96-96c0-41.938-27.062-77.25-64.562-90.313C447.5,227.75,448,225.938,448,224 C448,153.313,390.688,96,320,96L320,96z" fill="#333333"/>
</g>
</svg>
Note that both subpaths are dashed on their own, resulting in the impression that there are two animations. But that is not what is happening, it's simply that the dash and the offset are applied to each subpath separately.
Since the path length is computed for the total of both subpaths, you see a time lag before the animation repeats.
But maybe what you were aiming for was this?
Handwriting solution
When an SVG shape has a double path with different distances between the paths and the shape at the points of change of direction, then it is better to use the technique - Handwriting to animate drawing the paths.
Its essence is to animate the middle line, which is wide enough to cover the widest parts of the original shape.
This middle line must be drawn in a vector editor and saved as path
Next, animate this path by drawing a line from maximum to zero . Add this element to the mask and apply a mask to the original shape of the cloud outline.
<animate attributeName="stroke-dasharray"
begin="svg1.click" dur="4s" values="1281,0;0,1281" fill="freeze" />
where 1281 maximum centerline length
The length of the animated mask changes to reveal the original outline of the cloud.
At the same time, creating the illusion of drawing lines with different widths and shapes.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="312" height="312" viewBox="0 0 512 512" >
<defs>
<mask id="msk">
<rect width="100%" height="100%" fill="white" />
<!-- middle line -->
<path stroke="#111" stroke-dashoffset="700" stroke-width="45" fill="none" d="m262.3 400c56 0.2 111.3 0 168 0 14.8 0 28.2-10.8 39.1-20.7 9-8.2 15.8-19.2 19.9-30.7 5.2-14.5 9.1-31 5.4-46-4.8-19.1-18.9-35.5-33.7-48.3-7.8-6.7-24.3-4.1-27.6-13.8-5.7-16.5-1.3-35.8-7.7-52.2-7.1-18.4-17.9-36.4-33-49.1-18.4-15.4-42-27.5-66-29.1-24.1-1.7-49.5 6.8-69.8 19.9-16.9 10.9-21.1 35.5-39.1 46-12.4 6.2-27.9-0.8-41.4 2.3-13 3-26.9 6.5-36.8 15.3-13.2 11.7-14.3 25-26.1 46-3.1 5.6-12.9 0.2-19.2 1.5-15.4 3.2-31.9 5.9-44.5 15.3-15.3 11.5-27.7 28.5-33 46.8-4 14-4.3 30.7 2.3 43.7 12.1 24 35.3 50.8 62.1 51.4 65.1 1.5 120.7 1.3 181 1.5z">
<!-- A mask animation with a wide line that reveals the outlines of the cloud -->
<animate id="an" attributeName="stroke-dasharray" begin="svg1.click" dur="8s" values="1281,0;0,1281" fill="freeze" repeatCount="1" />
</path>
</mask>
</defs>
<!-- Cloud contours -->
<path mask="url(#msk)" fill="dodgerblue" class="pathOne" d="m320 128c52.6 0 95.4 42.4 96 94.8-0.2 1.9-0.4 3.9-0.5 5.9l-0.8 23.5 22.3 7.8C462.7 268.9 480 293.1 480 320c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64 0-34.9 28.2-63.4 63-64 1.5 0.2 3.1 0.4 4.6 0.5l24.3 1.6 8-23C140.9 209.3 165.1 192 192 192c3.1 0 6.6 0.4 11.2 1.2l22.4 4 11.2-19.8C253.9 146.9 285.8 128 320 128m0-32C272.1 96 230.8 122.7 208.8 161.7 203.4 160.7 197.8 160 192 160 150.1 160 114.8 187.1 101.7 224.6 99.8 224.4 98 224 96 224 43 224 0 267 0 320c0 53 43 96 96 96h320c53 0 96-43 96-96 0-41.9-27.1-77.2-64.6-90.3C447.5 227.8 448 225.9 448 224 448 153.3 390.7 96 320 96Z"/>
<text x="200" y="300" font-size="36px" fill="dodgerblue" > Click me
<animate id="op" attributeName="opacity" begin="an.end" dur="1s" values="1;0" fill="freeze" repeatCount="1" />
</text>
</svg>
Option with repeated animation after a 2s pause
To do this, add a restart condition after a pause of 2s:
begin="svg1.click;an.end+2s"
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="312" height="312" viewBox="0 0 512 512" >
<defs>
<mask id="msk">
<rect width="100%" height="100%" fill="white" />
<!-- middle line -->
<path stroke="#111" stroke-dashoffset="700" stroke-width="45" fill="none" d="m262.3 400c56 0.2 111.3 0 168 0 14.8 0 28.2-10.8 39.1-20.7 9-8.2 15.8-19.2 19.9-30.7 5.2-14.5 9.1-31 5.4-46-4.8-19.1-18.9-35.5-33.7-48.3-7.8-6.7-24.3-4.1-27.6-13.8-5.7-16.5-1.3-35.8-7.7-52.2-7.1-18.4-17.9-36.4-33-49.1-18.4-15.4-42-27.5-66-29.1-24.1-1.7-49.5 6.8-69.8 19.9-16.9 10.9-21.1 35.5-39.1 46-12.4 6.2-27.9-0.8-41.4 2.3-13 3-26.9 6.5-36.8 15.3-13.2 11.7-14.3 25-26.1 46-3.1 5.6-12.9 0.2-19.2 1.5-15.4 3.2-31.9 5.9-44.5 15.3-15.3 11.5-27.7 28.5-33 46.8-4 14-4.3 30.7 2.3 43.7 12.1 24 35.3 50.8 62.1 51.4 65.1 1.5 120.7 1.3 181 1.5z">
<!-- A mask animation with a wide line that reveals the outlines of the cloud -->
<animate id="an" attributeName="stroke-dasharray" begin="svg1.click;an.end+2s" dur="6s" values="1281,0;0,1281" fill="freeze" />
</path>
</mask>
</defs>
<!-- Cloud contours -->
<path mask="url(#msk)" fill="dodgerblue" class="pathOne" d="m320 128c52.6 0 95.4 42.4 96 94.8-0.2 1.9-0.4 3.9-0.5 5.9l-0.8 23.5 22.3 7.8C462.7 268.9 480 293.1 480 320c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64 0-34.9 28.2-63.4 63-64 1.5 0.2 3.1 0.4 4.6 0.5l24.3 1.6 8-23C140.9 209.3 165.1 192 192 192c3.1 0 6.6 0.4 11.2 1.2l22.4 4 11.2-19.8C253.9 146.9 285.8 128 320 128m0-32C272.1 96 230.8 122.7 208.8 161.7 203.4 160.7 197.8 160 192 160 150.1 160 114.8 187.1 101.7 224.6 99.8 224.4 98 224 96 224 43 224 0 267 0 320c0 53 43 96 96 96h320c53 0 96-43 96-96 0-41.9-27.1-77.2-64.6-90.3C447.5 227.8 448 225.9 448 224 448 153.3 390.7 96 320 96Z"/>
<text x="200" y="300" font-size="36px" fill="dodgerblue" > Click me
<animate id="op" attributeName="opacity" begin="6s" dur="1s" values="1;0" fill="freeze" />
</text>
</svg>