SVG stroke-dashoffset not working - javascript

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>

Related

svg animation of drawing line with marker

I'm trying to make an animation of a growing arrow. The path is drawn correctly, but the marker arrow is immediately at the end. Can you please tell me how can I attach a marker to the end of the path so that it moves with it?
<?xml version="1.0" encoding="UTF-8"?>
<svg width="291px" height="260px" viewBox="0 0 391 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Path</title>
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
</marker>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path marker-end="url(#Triangle)" d="M273.097656,120.507813 C201.899566,163.577543 130.777516,213.94793 50.8398438,240.160156 C36.9248074,244.723012 17.4914196,262.184399 8.2265625,250.84375 C-1.53762975,238.89189 20.198756,222.272258 24.0078125,207.316406 C27.3670238,194.126823 28.5689142,180.441602 29.6132812,166.871094 C30.9603726,149.366986 31.1766739,131.782428 31.171875,114.226563 C31.1623478,79.3735161 8.15793288,37.1795952 29.5703125,9.6796875 C43.1473611,-7.75730878 67.7544299,32.013528 87.5742187,41.7890625 C105.639606,50.6992894 124.365537,58.2317755 143.085938,65.6679688 C150.003672,68.4158594 157.202901,70.4330349 164.40625,72.3085938 C177.173796,75.6329203 190.335014,77.4306133 202.960938,81.2578125 C220.824973,86.6728004 237.747783,94.999359 255.734375,99.9921875 C266.927708,103.099302 278.679688,103.638021 290.152344,105.460938" id="Path" stroke="#979797" stroke-width="10"></path>
</g>
</svg>
html,
body {
display: grid;
place-items: center;
min-height: 100vh;
}
svg {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
pointer-events: none;
animation: animateDash 2s linear forwards infinite;
}
#keyframes animateDash {
to {
stroke-dashoffset: 0;
}
}
code https://codepen.io/rostislav_blatman/pen/JjBOWMB
UPD:
Or perhaps there is another way how to achieve a similar result. Ideally, I want to bind the length of the arrow to the page scroll percentage

<marker> elements refer to the actual geometry of an element
Since you don't actually change/manipulate the <path> while animating – all markers will stick to their initial position.
Markers can only be aligned to:
element starting point: marker-start
path command end point: marker-mid
element end points: marker-end
In other words: you can't animate/move markers unless you're changing the element's geometry.
<h3>Animate path d: marker moves according to geometry change</h3>
<svg viewBox="0 0 391 260" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" overflow="visible" viewBox="0 0 10 10" refX="0" refY="0" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<path id="markerArrow" d="M -5 -5 l 10 5 l -10 5 z" opacity="0.5" />
</marker>
<marker id="markerStart" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<circle cx="5" cy="5" r="5" fill="green"></circle>
</marker>
<marker id="markerMid" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<circle cx="5" cy="5" r="5" fill="orange"></circle>
</marker>
</defs>
<g stroke-width="1" fill="none" stroke="#ccc">
<path marker-end="url(#arrow)" marker-mid="url(#markerMid)" marker-start="url(#markerStart)" id="motionPath3" pathLength="100" d="M0 50 l0 0 l0 0 l0 0">
<animate xlink:href="#motionPath3" attributeName="d" attributeType="XML"
from="M0 50 l0 0 l0 0 l0 0"
to="M20 50 l25 0 l50 0 l100 0"
dur="2s"
fill="freeze"
repeatCount="indefinite" />
</path>
</g>
</svg>
Animate an element via <mpath>
create a reusable <path> element for the motion path within a <defs> element
add a marker/arrow element here as well
add a svg SMIL animation via <animateMotion>:
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
Alernative: Css offset-path
Spoiler: current browser support (2023) is unfortunately still a bit spotty.
body {
margin: 1em;
}
svg {
width: 20em;
border: 1px solid #ccc;
overflow: visible;
}
.strokeBG {
marker-start: url(#markerStart);
marker-mid: url(#markerRound);
stroke-width: 0.33%;
}
.strokeAni {
stroke-dasharray: 0 100;
animation: animateDash 6s linear forwards infinite;
}
#keyframes animateDash {
to {
stroke-dasharray: 100 100;
}
}
.strokeMarker2 {
offset-path: path( "M273.1 120.5c-71.2 43.1-142.3 93.4-222.3 119.7c-13.9 4.5-33.3 22-42.6 10.6c-9.7-11.9 12-28.5 15.8-43.5c3.4-13.2 4.6-26.9 5.6-40.4c1.4-17.5 1.6-35.1 1.6-52.7c0-34.8-23-77-1.6-104.5c13.5-17.5 38.2 22.3 58 32.1c18 8.9 36.8 16.4 55.5 23.9c6.9 2.7 14.1 4.7 21.3 6.6c12.8 3.3 25.9 5.1 38.6 9c17.8 5.4 34.7 13.7 52.7 18.7c11.2 3.1 23 3.6 34.5 5.5");
animation: followpath 6s linear infinite;
}
#keyframes followpath {
to {
motion-offset: 100%;
offset-distance: 100%;
}
}
<h3>Svg SMIL</h3>
<svg viewBox="0 0 391 260" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="motionPath" pathLength="100" d="M273.1 120.5c-71.2 43.1-142.3 93.4-222.3 119.7c-13.9 4.5-33.3 22-42.6 10.6c-9.7-11.9 12-28.5 15.8-43.5c3.4-13.2 4.6-26.9 5.6-40.4c1.4-17.5 1.6-35.1 1.6-52.7c0-34.8-23-77-1.6-104.5c13.5-17.5 38.2 22.3 58 32.1c18 8.9 36.8 16.4 55.5 23.9c6.9 2.7 14.1 4.7 21.3 6.6c12.8 3.3 25.9 5.1 38.6 9c17.8 5.4 34.7 13.7 52.7 18.7c11.2 3.1 23 3.6 34.5 5.5" />
<path id="marker" d="M -5 -5 l 10 5 l -10 5 z" />
</defs>
<g id="Page-1" stroke-width="1" fill="none">
<use class="strokeBG" href="#motionPath" stroke="#eee" stroke-width="10" />
<use class="strokeAni" href="#motionPath" stroke="#979797" stroke-width="10" />
<use class="strokeMarker" href="#marker" stroke="#979797" stroke-width="10">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</use>
<use class="strokeMarker" href="#marker" fill="red" />
</g>
</svg>
<h3>Css offset path</h3>
<svg viewBox="0 0 391 260" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="motionPath2" pathLength="100" d="M273.1 120.5c-71.2 43.1-142.3 93.4-222.3 119.7c-13.9 4.5-33.3 22-42.6 10.6c-9.7-11.9 12-28.5 15.8-43.5c3.4-13.2 4.6-26.9 5.6-40.4c1.4-17.5 1.6-35.1 1.6-52.7c0-34.8-23-77-1.6-104.5c13.5-17.5 38.2 22.3 58 32.1c18 8.9 36.8 16.4 55.5 23.9c6.9 2.7 14.1 4.7 21.3 6.6c12.8 3.3 25.9 5.1 38.6 9c17.8 5.4 34.7 13.7 52.7 18.7c11.2 3.1 23 3.6 34.5 5.5" />
<path id="marker2" d="M -5 -5 l 10 5 l -10 5 z" />
</defs>
<g stroke-width="1" fill="none">
<use class="strokeAni" href="#motionPath2" stroke="#979797" stroke-width="10" />
<use class="strokeMarker2" href="#marker2" stroke="#979797" stroke-width="10">
</g>
</svg>
<!-- markers to show commands -->
<svg id="svgMarkers" style="width:0; height:0; position:absolute; z-index:-1;">
<defs>
<marker id="markerStart" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<circle cx="5" cy="5" r="5" fill="green"></circle>
<marker id="markerRound" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<circle cx="5" cy="5" r="2.5" fill="red"></circle>
</marker>
</defs>
</svg>

SVG make a clip-path to scale and relocate as its container scales

I have this svg:
<svg viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clipPath">
<path d="M 10 10 q 49 41 100 0 c -14 46 -14 40 50 50 c -24 -1 -50 -6 -40 40 c -14 -44 -53 -73 -99 -51 Z"/>
</clipPath>
</defs>
<rect x="5" y="5" width="190" height="90" fill="#770000" clip-path="url(#clipPath)"/>
</svg>
I can't use CSS styles here, just SVG. And I need to scale and relocate the clipPath as the rect scales or moves.
I tried adding this to the clipPath definition <clipPath id="clipPath" width="190" height="90" x="5" y="5"> with no result. Tried adding these parameters to the path too. No result both times. Also tried reducing the dimensions of the rect the clipPath will truncate instead of readjusting, same thing if I change the X,Y position. Any hint on how to solve this?

How to animate a svg path such that another different colored path slowly starts filling it?

I have an SVG that kind of looks like a race track encoded in the form of a <path> element. What i want is to animate another path with a different color which starts from one end of the race track and fills to the other end (animation).
Here's the SVG for the race track thing :
<svg viewBox="0 0 1307 772" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M305 19C385.381 71.1047 436 74 538.5 81.5C641 89 716.5 104 755.5 103C794.5 102 1029 81.5 1029 81.5C1052.73 83.3972 1068.89 91.3809 1102.5 117.5C1121.72 137.652 1127.34 151.094 1131.5 177.5C1130.72 202.494 1140.5 224 1129.5 241.5C1118.5 259 1064.62 273.928 1029 274L931.5 298H855.5H798.5L666 317H487L384 298H272.5L74.5 341.5L42 379.5L35 387.685L23.5 416.5L35 447L74.5 469L229 488L451.5 515H487H704L788 526L988.5 542.5L1156.5 558.5L1235 599C1295.85 629.595 1299.04 647.455 1254 680.5L1129.5 745.5" stroke="#403737" stroke-width="36" stroke-linecap="round"/>
</svg>
The race track would have some kind of checkpoints to it and from javascript i want to animate the filler color to reach only that checkpoint.
How can I achieve this ? Thank you for your help :)

Give the power to HTML, create your own standard JavaScript Web Component <svg-track>
<svg-track length="50">
<path stroke="green" stroke-width="30"
d="M20 20H200"/>
</svg-track>
<svg-track dur="2" length="70" viewBox="0 0 400 100">
<path stroke="blue" stroke-width="36" stroke-linecap="round"
d="M20 30l40 30l40 -30l40 30h200"/>
</svg-track>
<svg-track dur="3" length="100" viewBox="0 0 800 60">
<path stroke="red" stroke-width="60" stroke-linecap="round"
d="M800 30h-800"/>
</svg-track>
<script>
customElements.define("svg-track", class extends HTMLElement {
connectedCallback() {
setTimeout(() => { // make sure innerHTML is parsed
let attr = name => this.getAttribute(name);
this.innerHTML = `<svg style="background:lightgrey;height:60px;max-width:100vw"
viewBox="${attr("viewBox")||"0 0 200 40"}" fill="none">
${this.innerHTML}</svg>`;
let path = this.querySelector("path");
path.setAttribute("pathLength", 100);
path.setAttribute("stroke-dasharray", 100);
path.innerHTML =`<animate dur="${attr("dur")||1}s" to="${100-attr("length")}"
attributeName="stroke-dashoffset" from="100" fill="freeze"
repeatCount="1" begin="0s"/>`;
})
}
})
</script>
svga

Here I copied the path, set a pathLength on the path and animate the stroke-dasharray from 0 100 to 100 100.
#p1 {
stroke-dasharray: 0 100;
animation: stroke 5s linear forwards;
}
#keyframes stroke {
100% {
stroke-dasharray: 100 100;
}
}
<svg viewBox="0 0 1307 772" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M305 19C385.381 71.1047 436 74 538.5 81.5C641 89 716.5 104 755.5 103C794.5 102 1029 81.5 1029 81.5C1052.73 83.3972 1068.89 91.3809 1102.5 117.5C1121.72 137.652 1127.34 151.094 1131.5 177.5C1130.72 202.494 1140.5 224 1129.5 241.5C1118.5 259 1064.62 273.928 1029 274L931.5 298H855.5H798.5L666 317H487L384 298H272.5L74.5 341.5L42 379.5L35 387.685L23.5 416.5L35 447L74.5 469L229 488L451.5 515H487H704L788 526L988.5 542.5L1156.5 558.5L1235 599C1295.85 629.595 1299.04 647.455 1254 680.5L1129.5 745.5" stroke="#403737" stroke-width="36" stroke-linecap="round"/>
<path id="p1" d="M305 19C385.381 71.1047 436 74 538.5 81.5C641 89 716.5 104 755.5 103C794.5 102 1029 81.5 1029 81.5C1052.73 83.3972 1068.89 91.3809 1102.5 117.5C1121.72 137.652 1127.34 151.094 1131.5 177.5C1130.72 202.494 1140.5 224 1129.5 241.5C1118.5 259 1064.62 273.928 1029 274L931.5 298H855.5H798.5L666 317H487L384 298H272.5L74.5 341.5L42 379.5L35 387.685L23.5 416.5L35 447L74.5 469L229 488L451.5 515H487H704L788 526L988.5 542.5L1156.5 558.5L1235 599C1295.85 629.595 1299.04 647.455 1254 680.5L1129.5 745.5" pathLength="100" stroke="red" stroke-width="14" stroke-linecap="round" />
</svg>

Animation of cutting boards with a circular saw

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>

How to do draw animation effect fill SVG?

I am trying to animate the SVG logo like drawing fill path without stroke. my logo is looking like that.
Is it possible to create fill drawing instead of strokes? I saw many solutions about that but all are used by strokes. I also found This solution is pretty similar to my problem. but my SVG path is a bit complicated and can't create a fake path with stroke-like they created. I want it growing from nothing and drawing animation effect with fill.
My full SVG code here
<svg
class="logo-white"
xmlns="http://www.w3.org/2000/svg"
width="184"
height="90"
viewBox="0 0 184 90.733"
>
<path
class="draw-logo"
id="logo-path"
data-name="Path 1"
d="M84.763,300a45.529,45.529,0,0,0-31.688,12.921l-.009-.009L37.2,328.748,9.482,356.417s-1.207,1.2-1.813,1.81c-.006.006-.012.012-.018.017A18.987,18.987,0,0,1-5.69,363.663c-10.664.118-18.855-7.748-18.965-18.213A18.247,18.247,0,0,1-6.319,326.813c10.148-.112,18.136,6.911,19.128,16.466L33.934,322.07C25.866,308.538,10.8,299.807-6.977,300c-25.612.282-45.29,20.283-45.021,45.763.272,25.694,20.383,45.254,46.566,44.963A46.86,46.86,0,0,0,26.933,377.55c.088-.085.178-.166.265-.252l.285-.285,15.235-15.206c6.542,17.268,22.741,29.1,43.1,28.875,26.209-.291,46.458-20.232,46.175-45.838-.285-25.679-20.775-45.133-47.233-44.842m1.288,63.661c-10.664.118-18.855-7.748-18.965-18.213a18.247,18.247,0,0,1,18.336-18.638c10.776-.119,19.122,7.8,19.237,18.263.115,10.429-7.934,18.469-18.608,18.587"
fill="#f7f7f7"
transform="translate(52 -300)"
/>
</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>
Select in the vector editor on the toolbar Edit contour nodes F2 (arrow red -1)
Edit the shape of the curve by dragging the nodal points and change the length and position of the control levers of the nodal points (arrow red -2)
Vector editor saves a lot of overhead information. To remove it, you need to optimize the saved file using SVG Editor
Replace the old path with the new one from the optimized file
.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,443;
animation: draw 4s linear forwards;
animation-iteration-count: 2;
}
#keyframes draw {
0% {stroke-dasharray: 0,443;}
100% {stroke-dasharray: 443,0;}
}
<div class="container">
<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" d="m78 34.5c0 0-1.3-1.3-1.9-2.1C74.8 30.9 73.8 29.1 72.7 27.4 71.4 26.2 61.9 10.9 46.6 11.2c-5.1 0.1-10.4 1.5-14.9 4-4.7 2.5-8.8 6.3-11.8 10.7-2.6 3.9-4.3 8.5-4.9 13.1-0.9 6.7-0.5 13.9 2.1 20.2 2.4 5.7 6.5 11 11.6 14.3 5.1 3.3 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.1-38 55.1-52.2 5.4-3.7 11.4-7.3 17.9-8.2 6-0.8 12.6 0 17.9 2.9 6.8 3.9 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 8.1-22.2 7-9.7-1.3-20-7.4-24.5-16.1-2.7-5.3-4-10.1-4.4-15.4-0.4-4.7 0.5-11 1.6-14.1 1.9-5.2 8.5-12.4 8.5-12.4" />
</svg>
</div>

Your figure is drawn in double stroke
Therefore, it is impossible to animate its filling with color using stroke-dasharray
Consider creating a single outline that runs in the middle of the shape.
Set the width of this line 25px and we will animate its appearance by changing the attributes ofstroke-dasharray
Animation CSS
.container {
padding:10px;
background-color:#151515;
width:50%;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425;
animation: draw 4s linear forwards;
animation-iteration-count: 2;
}
#keyframes draw {
0% {stroke-dasharray: 0,425;}
100% {stroke-dasharray: 425,0;}
}
<div class="container">
<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" 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>
</div>
Animation SVG
To start the animation click on the black rectangle
.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425;
}
<div class="container">
<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" 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" >
<animate attributeName="stroke-dasharray" begin="svg1.click+0.5s" dur="4s" values="0,425;425,0" repeatCount="2" fill="freeze" />
</path>
</svg>
</div>
An additional example of filling the logo from one point with two lines
To start the animation, click on any letter in the circle
.container {
width:40%;
height="40%";
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the left stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint left top stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint lower right stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the right stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>

Categories