Develop Reference

Animate scale rotate svg element

Assuming I have an svg made with inkscape.
In this SVG set with a viewbox, I want to animate each element inside the SVG.
There is no problem for translate or opacity ... but when I need to rotate or scale a single element, it acting weird.
I try to correctly understand the concept of the viewbox but I need some help.
I understand that I have only one origin point when I have only one viewbox should I set multiple viewbox ?
<?xml version="1.0" encoding="UTF-8"?>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
// rotate or scale acting weird
<ellipse id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
// rotate or scale acting weird
<rect id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
// rotate or scale acting weird
<path id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
</svg>
I'm using anime.js 3.0 or CSS or I can try anything else

In Svg, the coordinates of any figure always have an absolute value that is calculated from the upper left corner of the SVG canvas.
Therefore, when applying the scale (2) command, the coordinates of the center of the figure will also be doubled and the figure will shift to the right and down.
<svg id="SVGRoot" version="1.1" width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="border:1px solid grey;">
<rect id="rect9240" transform="scale(2)" x="100" y="100" width="100" height="100" style="fill-rule:evenodd;fill:#f00;> stroke:#000; paint-order:normal">
<animateTransform
xlink:href="#rect9240"
attributeName="transform"
type="scale"
values="1;2;2;1;1"
dur="8s"
fill="freeze"
repeatcount="indefinite"
/>
</rect>
<circle cx="150" cy="150" r="3" fill="black" />
<circle cx="300" cy="300" r="3" fill="dodgerblue" />
<text x="150" y="140" font-size="16px" text-anchor="middle" > Center (150,150) </text>
<text x="300" y="290" font-size="16px" text-anchor="middle" > Center (300,300) </text>
</svg>
To return the enlarged figure to its original position, you must use the command translate (X, Y)
There is a great post here by #Paul LeBeau where this is explained in detail.
CSS solution
In order not to calculate the position of the center of the figure, you can use the CSS rule transform-box: fill-box
When the value of the fill-box attribute is selected
The object bounding box is used as the reference box.
Below is an example of increasing and decreasing the size of figures:
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: scale 3s linear infinite alternate;
animation-direction: alternate;
transform-origin:50% 50%;
}
#keyframes scale {
0% { transform: scale(0.5); }
100% { transform: scale(1); }
}
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
Rotation example
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: spin 4s linear infinite alternate;
transform-origin:50% 50%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
Increase and rotation
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: scale1 4s linear, spin 4s linear 4s infinite alternate;
transform-origin:50% 50%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes scale1 {
0% { transform: scale(0.5);}
100% { transform: scale(1);}
}
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>

I guess you mean the transform-origin CSS propierty. It is related to the center point of the svg file. Then, you need to calculate the center point of the element to animate related to document's center point.
For the animations you can use CSS animations.

The basics of viewBox is that the 4 numbers are "x y width height”. Generally the x/y coordinates are 0 which keeps your origin in the top left corner. Something people often do is place the origin in the middle.
In order to do that you move your viewBox top left by half of the width and half the height. In your case "-350 -250 700 500".

How to increase and decrease opacity after few seconds using javascript?

I have this SVG element in HTML:
<g id="Group-8" transform="translate(108.800000, 0.293172)" fill="#FF056A" opacity="0.1">
Here you can see an attribute called opacity and it's value is 0.1
Now I want to increase it's value to 0.3, 0.6, 0.9 and then again to 0.6, 0.3, 0.1. It should do this all the time.
I have used Javascript setTimeout method but don't know how to make it do what I want :(
setTimeout(function() {
$("#Group-8-Copy-2").attr('opacity', '0.3');
}, 1000);

Checkout below snippet:
$( document ).ready(function() {
setInterval(function(){
opacity = $('#tilak').css("opacity");
opacity = Number(opacity) + 0.3;
if (opacity > 1) {
opacity = 0;
}
$('#tilak').css("opacity", opacity);
console.log(opacity);
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="tilak" style="opacity: 0">
kdjkd
</body>

Here you go
var value = [0.1, 0.3, 0.6, 0.9];
var add = true;
var i = 0;
setInterval(function() {
$("#Group-8-Copy-2").attr('opacity', [value[i]]);
i = add ? i + 1 : i -1;
add = i == value.length -1 ? false : (i == 0 ? true : add );
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="Group-8-Copy-2" fill="#FF056A" opacity="0.1">
<circle cx="10" cy="10" r="5" />
</g>
</svg>

You can also achieve a pulsing without JS, using CSS animations. Using CSS animations often has advantages over animating with JS, you can more precisely adjust the timing of things by changing the animation-duration and tweaking other things instead of adjusting the length of the timeout on a timer, etc. It also tends to perform better because it is the browser doing all the work rather than your code being interpreted by he browser and interacting with the DOM to make it work.
.stepped-pulse {
animation-duration: 4s;
animation-name: stepped-pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: steps(4, end);
}
#keyframes stepped-pulse {
0% {
opacity: .01;
}
100% {
opacity: .09;
}
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="Group-8-Copy-2" class="stepped-pulse" fill="#FF056A">
<circle cx="10" cy="10" r="5" />
</g>
</svg>
If you want a smoother animation (as you seem to indicate in comments on another answer), you can just change the animation-timing-function (in this case I am removing it ant it will default to ease):
.pulse {
animation-duration: 4s;
animation-name: pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: .01;
}
100% {
opacity: .09;
}
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="Group-8-Copy-2" class="pulse" fill="#FF056A">
<circle cx="10" cy="10" r="5" />
</g>
</svg>

How can achieve an invisible pencil effect with SVG text? [duplicate]

I am trying to animate a text that I created and saved as SVG. So far, I've only been able to animate the stroke, but that's not what I am trying to achieve. How can I implement animation like the two examples, below?
http://codepen.io/se7ensky/pen/waoMyx
https://codepen.io/munkholm/pen/EaZJQE
Here is what I have so far:
.test {
width: 300px
/* margin:0 auto; */
}
.l1 {
animation: dash 15s 1;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation-fill-mode: forwards;
/*fill: none;*/
}
.l2 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 20s linear forwards;
-webkit-animation-delay: 1s;
/* Chrome, Safari, Opera */
animation-delay: 1s;
}
.l3 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 2.5s;
/* Chrome, Safari, Opera */
animation-delay: 2.5s;
}
.l4 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 4.5s;
/* Chrome, Safari, Opera */
animation-delay: 4.5s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg class="test" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30.1 21.8" style="enable-background:new 0 0 30.1 21.8;" xml:space="preserve">
<g>
<path class="text l1" d="M16.5,9.2c-0.2-0.2-0.2-1,0.1-1.5c0.1-0.1,0.2-0.3,0.3-0.4c-1.6,0-3.2-0.3-4.7-0.1C10.8,7.3,9.5,8,9.3,8.9
c-0.1,0.6,0.5,0.8,0.7,1c0.1,0.1,0,0.2-0.1,0.1C9.5,10,8.7,9.4,9,8.7c0,0,0-0.1,0-0.2c0.3-1.2,1.7-1.8,3.3-1.9
c1.8-0.1,3.9,0.4,4.8,0.4c0.2-0.2,0.4-0.4,0.5-0.4c0.3-0.1,0.6,0.1,0.3,0.4c-0.1,0.1-0.4,0.3-0.6,0.5c-0.4,0.4-0.8,1-0.5,1.5
C16.8,9.2,16.7,9.3,16.5,9.2z M12.1,12.8c0.1,0.1-0.1,0.3-0.1,0.3c-0.2,0.3-0.5,0.8-0.8,0.8c-0.1,0-0.5-0.1-0.5-0.1
c-0.1-0.8,1.5-3.5,1.9-4.2c0.2-0.3,0.1-0.4,0.1-0.5c0.1-0.4,0.9-1.4,1.5-1.4c0.2,0,0.8,0.2,0.7,0.5c0,0-0.1-0.1-0.2-0.1
c-1.1,0-2.9,3.6-3.4,4.7c-0.3,0.7,0.1,0.6,0.4,0.3C11.8,13,12,12.8,12.1,12.8z" fill="red" stroke="#000" stroke-miterlimit="10" stroke-width="0.5" />
<path class="text l2" d="M14.4,12.3c-0.2,0-0.3-0.2-0.1-0.2c0.4,0,1.1-0.4,1.5-0.8c0.2-0.2,0.6-0.5,0.5-0.8c0-0.3-0.4-0.2-0.6-0.1
c-0.7,0.3-1.7,1.3-2,2.2c-0.3,1,0.6,1,1.4,0.7c0.9-0.4,1.7-1,2.1-1.7c0-0.1,0.1-0.1,0.1,0c0.1,0,0.1,0.1,0,0.1
c-0.5,0.8-1.2,1.5-2.1,1.8c-1.2,0.5-2.8,0-2.1-1.5c0.4-0.8,2.2-2.4,3.1-2.1c0.5,0.2,0.4,0.8,0.2,1.1C16.1,11.8,15,12.2,14.4,12.3z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"
/>
<path class="text l3" d="M17.3,13.6c-0.2,0.2-0.1,0.5,0.4,0.4c0.6-0.2,1.5-0.9,1.5-1.6c0-0.3-0.7-0.6-0.9-0.7c-0.2-0.1-0.3-0.3-0.4-0.4
c-0.1,0.2-0.3,0.5-0.5,0.8c-0.1,0.1-0.3,0-0.2-0.1c0.3-0.5,0.6-0.9,0.6-1.1c0.1-0.9,1.7-1.7,2.6-1.7c0.5,0,1,0.3,0.7,0.8
c-0.1,0.2-0.2,0.3-0.4,0.4c-0.1,0-0.2,0-0.1-0.2c0.2-0.2,0.3-0.6,0-0.6c-0.4,0-1,0.2-1.3,0.4c-0.4,0.2-0.7,0.4-1,0.9
c-0.3,0.3-0.2,0.6,0.1,0.8c0.8,0.5,1.8,0.8,0.9,1.8c-0.4,0.5-1.1,0.7-1.7,0.9c-0.2,0-0.7,0.1-0.9-0.1c-0.1-0.1,0-0.3,0.2-0.5
c0.1-0.1,0.3-0.3,0.6-0.3c0.1,0,0.1,0.1,0,0.1C17.5,13.4,17.3,13.5,17.3,13.6z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
<path class="text l4" d="M23.6,10.2c-0.2,0.1-0.8,0.1-1.4,0.2c-0.2,0.3-0.3,0.5-0.3,0.6c-0.4,0.7-0.7,1.4-0.7,1.7c-0.1,0.5,0.2,0.8,0.6,0.6
c0.4-0.2,1.3-1,1.8-1.7c0.1-0.1,0.2,0,0.1,0.1c-0.2,0.4-1,1.2-1.6,1.6c-0.4,0.3-1.3,0.6-1.5-0.1c-0.1-0.3,0.1-0.9,0.4-1.5
c-0.1,0.1-0.2,0.3-0.5,0.6c-0.1,0.1-0.2,0-0.1-0.2c0.4-0.5,0.7-1,0.9-1.2c0,0,0.1-0.2,0.3-0.5c-0.1,0-0.2,0-0.3,0
c-0.1,0-0.2-0.1-0.2-0.3c0.1-0.2,0.4-0.2,0.6-0.2c0,0,0,0,0,0l0.6-1.1c0.3-0.5,0.3-0.6,0.5-0.7c0.2,0,0.4,0,0.5,0.1
c0.1,0.1,0,0.4-0.1,0.5C23.2,9,23.1,9,23,9.1l-0.6,1l0.2,0c0.4,0,0.7-0.1,1.1-0.1C23.9,10,24.1,10.1,23.6,10.2z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
View on CodePen

How the Se7ensky animation works is that it uses the standard dash animation technique, but clips the animated stroke with an outline representing the hand-drawn look of the logo.
So the standard dash animation technique works as follows. You take a standard line:
<svg>
<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Then you add a dash pattern to it and animate it's position (stroke-dashoffset).
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Finally to get the fancy variable stroke width of the Se7ensky example, you clip that line with the outline of your logo.
So let's pretend this simple path below represents your logo:
<svg>
<path stroke="black" stroke-width="1" fill="lightgrey"
d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</svg>
We turn that into a clipPath element and use it to trim our animated stroke to the shape of our logo:
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<clipPath id="logo">
<path d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</clipPath>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/>
</svg>
So to replicate their example, you'll need to add a continuous path (or paths if you want) to your SVG that represents the path that a pen would take if it were writing the letters in your logo.
Then animate that path using the dashoffset technique while clipping it with your original logo.
Update
Here's a final demo with a more realistic letter shape:
// Simple code to enable and disable the clipping path
var chk = document.getElementById("chk");
var penpath = document.getElementById("penpath");
chk.addEventListener("input", function(evt) {
if (evt.target.checked) {
penpath.classList.add("clipped");
} else {
penpath.classList.remove("clipped");
}
});
.pen {
fill: none;
stroke: red;
stroke-width: 18;
stroke-linecap: round;
stroke-dasharray: 206 206;
stroke-dashoffset: 206;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.clipped {
clip-path: url(#logo);
}
#keyframes draw {
from {
stroke-dashoffset: 206;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<defs>
<clipPath id="logo">
<path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/>
</clipPath>
</defs>
<path id="penpath" d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen clipped"/>
</svg>
<p>
<input id="chk" type="checkbox" checked="true"/> <label for="chk">Enable clipping path</label>
</p>

The example looks like a combination of svg paths and delayed animations.
This blog post by CSS-Tricks explains it pretty well (Note that the svg must have strokes for this to work):
https://css-tricks.com/svg-line-animation-works/
Here's a guide on stroke-dashoffset (used on the example) that might be useful:
https://css-tricks.com/almanac/properties/s/stroke-dashoffset/

How to create a power bar in JavaScript

How to create a power bar which will toggle automatically up and down and will stop when i click on the screen.
http://i.stack.imgur.com/L3JSH.jpg

You will need to be more specific about what exactly you have tried and what is not working. However, this should get you started. This example uses sgv but could easily be translated into a more div oriented approach.
The objective is to hit the toggle button when the circle is in the center region. Good Luck!
Note: This might only work in chrome at the moment.
document.getElementById("toggler").addEventListener("click", function(){
var el = document.querySelector("circle");
var className = "stopped";
el.classList.toggle(className);
if (!el.classList.contains(className)) { return }
var currentCX = parseFloat(getComputedStyle(el).getPropertyValue("cx"));
if (currentCX >= 240 && currentCX <= 260 ) {
console.log("hit");
} else {
console.log("miss");
}
});
#keyframes sweep {
from { cx: 5; }
to { cx: 495; }
}
circle{
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-name: sweep;
animation-iteration-count: infinite;
animation-direction: alternate;
}
circle.stopped{
animation-play-state: paused;
}
<svg id="lineWithDots" width="500px" height="20px">
<g transform="translate(0,10)">
<rect width="490" height="2" y="-1" x="5" />
<rect width="20" height="10" y="-5" x="240" />
<circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
</g>
</svg>
<div>
<button id="toggler">toggle</button>
</div>

svg path stroke animation infinite

I have for example a svg path that it looks like a circle. I tried to make it animate more than once by using a for loop. but it does not work.
This is the javascript I use to animate the stroke.
var loading = function() {
path = new Array();
length = new Array();
path[0] = document.getElementById('loader1');
length = path[0].getTotalLength();
path[0].style.transition = path[0].style.WebkitTransition = 'none';
length[0] = length;
path[0].style.strokeDasharray = length + ' ' + length;
path[0].style.strokeDashoffset = length;
path[0].getBoundingClientRect();
path[0].style.transition = path[0].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
path[0].style.strokeDashoffset = '0';
};
loading();
I would like to make it like a gif that animates all the time. if anyone could help I would appreciate it!
This is an example http://jsfiddle.net/6Lqkc2qs/

A transition can only go between two styles. You need a CSS animation rather than a transition.
.container
{
position:absolute;
width:500px;
height:500px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#keyframes changedash {
from {
stroke-dashoffset: 502.7825622558594px;
stroke-dasharray: 502.7825622558594 502.7825622558594;
}
to {
stroke-dashoffset: 0px;
stroke-dasharray: 502.7825622558594 502.7825622558594;
}
}
path {
animation-duration: 1s;
animation-name: changedash;
animation-iteration-count: infinite;
animation-direction: normal;
}
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="650px" height="650px" viewBox="0 0 650 650" enable-background="new 0 0 650 650" xml:space="preserve">
<path id="loader1" style="fill:none;stroke:#37c280;stroke-width:2;stroke-miterlimit:10;" d="M364.088,203.794c-15.126,2.056-30.18,9.004-44.175,14.744
c-12.281,5.037-21.834,12.462-30.789,22.188c-24.832,26.97-19.915,68.42,2.081,96.419c28.676,36.505,100.901,36.35,126.027-4.641
c14.806-24.154,17.992-67.197,0.505-90.905c-16.543-22.427-38.719-29.067-62.473-34.865" style="stroke-dasharray: 502.7825622558594 502.7825622558594; stroke-dashoffset: 502.7825622558594px;"/>
</svg>
</div>