Move.gif
I want to animate this path up and down (vertically). I use animationMotion for this, but my path is moving in different directions.
<svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2"
>
<animateMotion
path="M0,0 0 50 90 0 90 10"
begin="0s" dur="2s" repeatCount="indefinite"
/>
</path>
</svg>
Hope you got my point
You just need to give proper path for animateMotion. In your code it should be path="M0,0 0 90 0 0"
For more information, check this link
<svg width="698" height="745" viewBox="0 0 698 645" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="bottom-arrow" d="M404.767 578.541L414.523 592.852L397.251 594.146L404.767 578.541Z" stroke="#EEE8FB" stroke-width="2"
>
<animateMotion
path="M0,0 0 90 0 0"
begin="0s" dur="2s" repeatCount="indefinite"
/>
</path>
</svg>
Related
I had an exsits path that represent line with arrow:
<path {...lineProps} id={id} />
it looks like:
is there a chance to add the next svg in the middle of the current link:
<svg width="32" height="18" viewBox="0 0 32 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</svg>
it looks like:
eventually it should look like:
As #AKX commented you need to find the point in the middle of the path. You can do it using the getTotalLength and getPointAtLength methods.
As for the tag you can put it inside a symbol and use the symbol with <use>. The use element can take an x and y attributes, the x and y of the point in the middle of the path. In order to center the use element around the point you need also to translate the use element backward half width and height
//the path length
let l = thePath.getTotalLength();
//the point in the middle of the path
let p = thePath.getPointAtLength(l/2);
//set the x andy attributes in the middle of the path
theUse.setAttribute("x", p.x);
theUse.setAttribute("y", p.y);
<svg viewBox="0 0 300 200" width="300">
<symbol viewBox="0 0 32 18" fill="none" id="s">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</symbol>
<marker id="mk" viewBox="0 0 4 4" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto-start-reverse">
<polygon points="0,0 4,2 0,4" fill="black" />
</marker>
<path id="thePath" d="M10,10 L270,160" stroke="black" stroke-width="4" stroke-dasharray="5" marker-end="url(#mk)" />
<use id="theUse" xlink:href="#s" width="32" height="18" transform="translate(-16,-9)" />
<svg>
I'm trying to restart SVG animation sequence from Javascript. Restart-button below will broke SVG animation sequence. How to restart/reset entire sequence?
document.getElementById("button").addEventListener("click", function() {
document.getElementById("fore").beginElement();
});
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150">
<path id="track" fill="none" stroke="#000000" stroke-width="1" stroke-dasharray="10,10" d="M 50 100 L 950 50"/>
<path id="plane" d="M-10 -10 L10 0L-10 10z" fill="red" />
<animateMotion xlink:href="#plane"
id="fore"
begin="0s;back.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto"
keyPoints="0;1"
keyTimes="0;1"
><mpath xlink:href="#track" /></animateMotion>
<animateMotion xlink:href="#plane"
id="back"
begin="fore.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto-reverse"
keyPoints="1;0"
keyTimes="0;1"
><mpath xlink:href="#track" /></animateMotion>
</svg>
<button id="button">RESTART</button>
You can use setCurrentTime on the entire svg element. I added an id of svgEl to the svg node and then when rest is clicked we do:
document.getElementById('svgEl').setCurrentTime(0);
Have a look at this:
document.getElementById("button").addEventListener("click", function() {
document.getElementById('svgEl').setCurrentTime(0);
});
<svg id="svgEl" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150">
<path id="track" fill="none" stroke="#000000" stroke-width="1" stroke-dasharray="10,10" d="M 50 100 L 950 50"/>
<path id="plane" d="M-10 -10 L10 0L-10 10z" fill="red" />
<animateMotion xlink:href="#plane"
id="fore"
begin="0s;back.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto"
keyPoints="0;1"
keyTimes="0;1"
restart="always"
><mpath xlink:href="#track" /></animateMotion>
<animateMotion xlink:href="#plane"
id="back"
begin="fore.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto-reverse"
keyPoints="1;0"
keyTimes="0;1"
restart="always"
><mpath xlink:href="#track" /></animateMotion>
</svg>
<button id="button">RESTART</button>
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>
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>
I have a path which represent half of the circle, I want it to render in a circular way.
as it is only path I tried of svg but it couldn't work.
<svg version="1.1" x="0px"
y="0px" width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" enable-background="new 0 0 131.45 131.451"
xml:space="preserve">
<g id="Group_952" transform="translate(0 0)">
<g id="Path_211">
<path fill="#0088CE" d="M86.692,128.579l-6.314-20.938c17.843-5.735,29.832-22.563,29.832-41.875
c0-23.389-17.711-42.625-40.314-43.793l1.059-21.9c33.925,1.752,60.5,30.606,60.5,65.69
C131.452,94.733,113.463,119.974,86.692,128.579z"/>
</g>
<svg>
Your semicircle is drawn using a double path see image below
Therefore, you can animate figure drawing only with the help of filter ormask
I suggest using the technique of drawing a figure from the top point to a semicircle, by changing the 'stroke-dasharray' of the middle line of the figure.
The middle line turned out - a circle with the center of (70.70) and a radius of 50
Next, set stroke-width ="20" and stroke-dasharray = "157 157" to get half the circle
Turn the semicircle counterclockwise 90 degrees so that its beginning is at the top
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" >
<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
stroke-width="20" stroke-dasharray="157 157">
</circle>
</svg>
To animate the drawing from the top point to half the circle, change the stroke-dasharray from ="0 314" to ="157 157"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" >
<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
stroke-width="20" stroke-dasharray="157 157">
<animate
attributeName="stroke-dasharray"
values="0 314;157 157"
dur="5s"
fill="freeze" />
</circle>
</svg>
CSS animation
.crc1 {
fill:none;
stroke:#0088CE;
stroke-width:20;
stroke-dasharray:157.07;
animation: dash 4s ;
}
#keyframes dash {
0% {stroke-dasharray: 0 314}
100% {stroke-dasharray: 157 157}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" >
<circle class="crc1" transform="rotate(-90 70 70)" cx="70" cy="70" r="50"> </circle>
</svg>
Semicircle rotation animation
For animation the change of attribute stroke-dashoffset is used:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" >
<circle cx="70" cy="70" r="50" fill="none" stroke="#EDEDED"
stroke-width="20" />
<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
stroke-width="20" stroke-dasharray="157.07" stroke-dashoffset="-314">
<animate
attributeName="stroke-dashoffset"
values="0;-314"
dur="2s"
repeatCount="indefinite" />
</circle>
</svg>
Complex animation of drawing and rotation
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="131.45px" height="131.451px" viewBox="0 0 131.45 131.451" >
<circle cx="70" cy="70" r="50" fill="none" stroke="#EDEDED"
stroke-width="20" />
<circle transform="rotate(-90 70 70)" cx="70" cy="70" r="50" fill="none" stroke="#0088CE"
stroke-width="20" stroke-dasharray="157.07" stroke-dashoffset="-314">
<animate id="an_dasharray"
attributeName="stroke-dasharray"
values="0 314;157 157"
begin="0s;an_dashoffset.end+0.5s"
dur="2s"
fill="freeze" />
<animate id="an_dashoffset"
attributeName="stroke-dashoffset"
values="0;-314"
begin="an_dasharray.end"
dur="2s"
repeatCount="2" />
</circle>
</svg>