svg animation of drawing line with marker - javascript

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>

Related

updating SVG animateMotion path using JavaScript

I try changing an SVG motion path according to a html select value using JS. The path updates as expected, but the element, which uses the path as a motion path continues to move along the original path. What am I missing?
function changepath(selectObject) {
let value = selectObject.value;
let path = document.getElementById("planePath");
let plane = document.getElementById("animPath");
let rotation = "rotate(" + value + ")";
path.setAttribute("transform", rotation);
plane.setAttribute("transform", rotation);
}
body {
background: #eee;
}
.planePath {
opacity: 0.8;
stroke: darkslategrey;
stroke-width: 2px;
fill: none;
}
.plane {
transform: scale(0.15);
}
select {
margin-left: 2em;;
}
<svg viewBox="0 0 2000 200">
<!-- <path class="planePath" id="planePath" d="M 0 0 C 200 250 250 50 550 150 C 850 250 700 180 1000 200 " /> -->
<path class="planePath" id="planePath" d="M 50 100 c 14 -3 736 -115 1900 0" />
<g id="plane" class="plane">
<rect x="0" y="0" width="100" height="100"/>
</g>
<animateMotion xlink:href="#plane" dur="6s" repeatCount="indefinite" rotate="auto">
<mpath id="animPath" xlink:href="#planePath" />
</animateMotion>
</svg>
<select name="route" id="route" onchange="changepath(this)">
<option value="0">0°</option>
<option value="1">1°</option>
<option value="2">2°</option>
<option value="3">3°</option>
<option value="4">4°</option>
</select>

As Danny mentioned in his answer the mpath is using the untransformed path. If you need it to be transformed you can wrap both the path and the animated rect in a group and transform the group.
<svg viewBox="0 0 2000 200">
<g transform="rotate(5)">
<path id="path" fill="none" stroke="red" stroke-width="5"
d="M 50 100 c 14 -3 736 -115 1900 0" />
<rect id="block" x="0" y="0" width="20" height="20"/>
<animateMotion href="#block" dur="2s" repeatCount="indefinite"
rotate="auto" restart="always">
<mpath href="#path" />
</animateMotion>
</g>
</svg>

Looks like animateMotion mpath can't handle the transform
<svg viewBox="0 0 2000 200">
<path id="NO_rotate" fill="none" stroke="green" stroke-width="5"
d="M 50 100 c 14 -3 736 -115 1900 0"/>
<path id="path" fill="none" stroke="red" stroke-width="5"
d="M 50 100 c 14 -3 736 -115 1900 0"
transform="rotate(5)"/>
<rect id="block" x="0" y="0" width="20" height="20"/>
<animateMotion href="#block" dur="2s" repeatCount="indefinite"
rotate="auto" restart="always">
<mpath href="#path" />
</animateMotion>
</svg>

Wavy effect for my svg Bezier curve Does it possible?

I'm trying to add wavy effect to my line
<svg width="1440" height="768" viewBox="0 0 1440 768" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-83.6143 -168.119C-83.6143 -168.119 -28.2399 30.8053 74.4593 88.0896C221.086 169.876 364.03 -134.373 489.568 -22.8989C541.227 22.9737 522.397 86.2632 573.454 132.805C668.648 219.579 808.738 68.6733 902.337 157.164C984.353 234.705 886.122 360.221 967.307 438.631C1076.34 543.937 1234.26 326.531 1354.83 418.414C1480.33 514.051 1274.03 778.862 1427.47 815.613C1487.58 830.013 1584.35 794.881 1584.35 794.881" stroke="#979F79" stroke-width="2">
</path>
</svg>
But idk what way is right.
Guess, i need to change start and end points from js.
Thank you very much.

To ensure that the SVG curve does not go beyond the SVG canvas, it is necessary to accurately calculate its overall dimensions.
It can be done with JS getBBox() method.
let bb = wave.getBBox();
console.log(bb);
<svg width="1440" height="768" viewBox="0 0 1440 768" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="wave" d="M-83.6143 -168.119C-83.6143 -168.119 -28.2399 30.8053 74.4593 88.0896C221.086 169.876 364.03 -134.373 489.568 -22.8989C541.227 22.9737 522.397 86.2632 573.454 132.805C668.648 219.579 808.738 68.6733 902.337 157.164C984.353 234.705 886.122 360.221 967.307 438.631C1076.34 543.937 1234.26 326.531 1354.83 418.414C1480.33 514.051 1274.03 778.862 1427.47 815.613C1487.58 830.013 1584.35 794.881 1584.35 794.881" stroke="#979F79" stroke-width="2">
</path>
</svg>
Add the resulting numbers to the viewBox
Was viewBox ="0 0 1440 768" Now `viewBox ="- 83 -168 1668 987"
<svg width="1440" height="768" viewBox="-83 -168 1668 987" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="wave" d="M-83.6143 -168.119C-83.6143 -168.119 -28.2399 30.8053 74.4593 88.0896C221.086 169.876 364.03 -134.373 489.568 -22.8989C541.227 22.9737 522.397 86.2632 573.454 132.805C668.648 219.579 808.738 68.6733 902.337 157.164C984.353 234.705 886.122 360.221 967.307 438.631C1076.34 543.937 1234.26 326.531 1354.83 418.414C1480.33 514.051 1274.03 778.862 1427.47 815.613C1487.58 830.013 1584.35 794.881 1584.35 794.881" stroke="#979F79" stroke-width="2">
</path>
</svg>
Technique of getting animation of d path attribute step by step
Load your svg file into a vector editor such as Inkscape
Select the path and clone it
Note
That the animation runs smoothly without jumps, it is necessary that the number of node points and their type are the same in the start and end positions.
Curve cloning is the easiest trick to meet this condition.
To change the curve clone, change the position of the node points (in the figure, the red curve)
Save the file in a vector editor
Copy the patches of the start and end positions of the curve
The animation of the d attribute is to move from the start position to the end
values="path-start;path-finish"
Update
If you want a repeating animation from the start position to the final position and back to the start position
values="path-start;path-finish;path-start"
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="1440" height="768" viewBox="-83 -168 1668 987" fill="none" version="1.1" border="1">
<path d="M-83.6-168.1C-83.6-168.1-28.2 30.8 74.5 88.1 221.1 169.9 364-134.4 489.6-22.9 541.2 23 522.4 86.3 573.5 132.8 668.6 219.6 808.7 68.7 902.3 157.2 984.4 234.7 886.1 360.2 967.3 438.6 1076.3 543.9 1234.3 326.5 1354.8 418.4 1480.3 514.1 1274 778.9 1427.5 815.6 1487.6 830 1584.4 794.9 1584.4 794.9" stroke="#979F79" fill="none" stroke-width="2">
<animate
attributeName="d"
dur="5s"
begin="0s"
repeatCount="indefinite"
values ="
M-83.6-168.1C-83.6-168.1-28.2 30.8 74.5 88.1 221.1 169.9 364-134.4 489.6-22.9 541.2 23 522.4 86.3 573.5 132.8 668.6 219.6 808.7 68.7 902.3 157.2 984.4 234.7 886.1 360.2 967.3 438.6 1076.3 543.9 1234.3 326.5 1354.8 418.4 1480.3 514.1 1274 778.9 1427.5 815.6 1487.6 830 1584.4 794.9 1584.4 794.9;
m-78.8 87.9c0 0 171-311.8 255.7-230.2 124.2 119.8 84.8 203 207.1 230.2 140.8 0 99.3-262.4 265.6-179.1 199.2 49.5 254.4-56.1 316.7-1.2 89.6 31.1-70.6 478.5 36.2 515 149 50.9 195-20.9 315.5 71 125.5 95.6-26.4 245.3 127 282 60.1 14.4 139.3 19.3 139.3 19.3;
M-83.6-168.1C-83.6-168.1-28.2 30.8 74.5 88.1 221.1 169.9 364-134.4 489.6-22.9 541.2 23 522.4 86.3 573.5 132.8 668.6 219.6 808.7 68.7 902.3 157.2 984.4 234.7 886.1 360.2 967.3 438.6 1076.3 543.9 1234.3 326.5 1354.8 418.4 1480.3 514.1 1274 778.9 1427.5 815.6 1487.6 830 1584.4 794.9 1584.4 794.9"
/>
</path>
<!-- <path d="m-83.6-168.1c0 0 55.4 85.3 158.1 142.6 146.6 81.8 289.6-222.5 415.1-111 51.7 45.9 30.5 67.5 81.6 114 95.2 86.8 239.1-120 332.7-31.5 82 77.5-19.4 337.4 61.8 415.8 109 105.3 270.4-206.5 390.9-114.6 125.5 95.6-83.1 331.7 70.4 368.4 60.1 14.4 157.3 179.2 157.3 179.2" style="fill:none;stroke-width:2;stroke:#f00c79"/> -->
</svg>
You can change the shape of the curve in the final position to your liking.
Hope this answer helps you

Another example of animating the d attribute
Here is another form of path that looks more like a wave
The technique for obtaining the final patch is the same as in the first example.
Start path
* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}
<div class="morph-shape" id="morph-shape" >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z"/>
</svg>
</div>
End path
* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}
<div class="morph-shape" id="morph-shape" >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;"/>
</svg>
</div>
Wave animation
* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}
<div class="morph-shape" id="morph-shape" >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z">
<animate
attributeName="d"
dur="7s"
repeatCount="indefinite"
values="
M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;
M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;
M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z" />
</path>
</svg>
</div>
UPDATE
codepen.io/manabox/pen/BPrNPg Like that. But without fill only stroke
2px
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="none" stroke="dodgerblue" stroke-width="2" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z">
<animate
attributeName="d"
dur="7s"
repeatCount="indefinite"
values="
M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 ;
M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 ;
M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 " />
</path>
</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>

SVG path is not proper when draw Arc using different angle

I am using HTML5 SVG and draw doughnut shape with different angle (90 and 120). But using angle 120, The doughnut path is not proper. This is my code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 1 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>
JsFiddle
Let me know what i did mistake on this
Thanks,
Bharathi.

In your second path, the inner arc should be rotated:
A 94 94 45 1 0 754.4063879557373 295 z
Maybe someone more knowledgeable than me can explain the math behind it, and why it is like this...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
<path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 45 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>

Categories