Getting svg to rotate correctly on hover - css

I'm trying to get svg circular lines to rotate from the centre point of the svg. At the minute it's rotating on it's axis which is not what i want to happen. Any ideas on how to solve this?
This is my code:
#lines {
animation: antiClockwiseSpin 30s infinite linear;
animation-play-state: paused;
}
svg:hover #lines {
animation-play-state: running;
}
#keyframes antiClockwiseSpin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="435" height="435" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g fill="#000" id="lines">
<path fill="none" d="M13.528,293.508C4.551,269.306,0,243.827,0,217.778c0-28.265,5.336-55.765,15.859-81.737l1.802,0.73
C7.233,162.51,1.945,189.765,1.945,217.778c0,25.817,4.511,51.068,13.407,75.053L13.528,293.508z"/>
<path d="M217.778,435.556c-41.973,0-82.721-11.965-117.838-34.603c-34.202-22.047-61.498-53.081-78.937-89.745
c-0.231-0.485-0.025-1.065,0.46-1.296c0.484-0.233,1.065-0.025,1.296,0.46c17.284,36.337,44.337,67.095,78.235,88.946
c34.803,22.435,75.186,34.293,116.784,34.293c11.55,0,23.139-0.919,34.445-2.733c0.526-0.087,1.029,0.275,1.114,0.806
c0.085,0.53-0.276,1.029-0.806,1.114C241.123,434.629,229.431,435.556,217.778,435.556z"/>
<path fill="none" d="M269.654,429.34l-0.461-1.889c30.629-7.484,59.825-21.988,84.433-41.944l1.225,1.511
C330.021,407.152,300.56,421.787,269.654,429.34z"/>
<path d="M361.996,380.637c-0.268,0-0.534-0.11-0.726-0.325c-0.357-0.401-0.322-1.015,0.079-1.373
c45.924-40.941,72.264-99.682,72.264-161.161c0-15.731-1.701-31.424-5.054-46.646c-0.115-0.525,0.216-1.043,0.74-1.159
c0.526-0.12,1.043,0.216,1.159,0.74c3.384,15.359,5.099,31.194,5.099,47.064c0,62.033-26.576,121.303-72.914,162.612
C362.457,380.556,362.226,380.637,361.996,380.637z"/>
<path fill="none" d="M423.026,150.825c-17.539-53.8-56.571-99.477-107.089-125.319l0.886-1.731
c50.971,26.074,90.355,72.162,108.051,126.447L423.026,150.825z"/>
<path d="M28.427,113.072c-0.16,0-0.323-0.04-0.474-0.124c-0.469-0.262-0.636-0.855-0.374-1.323C66.089,42.772,138.969,0,217.778,0
c31.227,0,61.374,6.469,89.603,19.229c0.489,0.221,0.706,0.797,0.485,1.287c-0.221,0.489-0.797,0.706-1.287,0.485
C278.605,8.356,248.727,1.945,217.778,1.945c-78.106,0-150.336,42.391-188.502,110.63
C29.098,112.893,28.768,113.072,28.427,113.072z"/>
</g>
</svg>
Here's a jsfiddle: https://jsfiddle.net/alexgomy/fdkh0wzb/1/


Unlike HTML elements, the default transform-origin of SVG elements is 0 0 (top left). You need to set transform-origin: center; on #lines:
#lines {
animation: antiClockwiseSpin 30s infinite linear;
animation-play-state: paused;
transform-origin: center;
}
svg:hover #lines {
animation-play-state: running;
}
#keyframes antiClockwiseSpin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes antiClockwiseSpin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="435" height="435" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g fill="#000" id="lines">
<path fill="none" d="M13.528,293.508C4.551,269.306,0,243.827,0,217.778c0-28.265,5.336-55.765,15.859-81.737l1.802,0.73
C7.233,162.51,1.945,189.765,1.945,217.778c0,25.817,4.511,51.068,13.407,75.053L13.528,293.508z"/>
<path d="M217.778,435.556c-41.973,0-82.721-11.965-117.838-34.603c-34.202-22.047-61.498-53.081-78.937-89.745
c-0.231-0.485-0.025-1.065,0.46-1.296c0.484-0.233,1.065-0.025,1.296,0.46c17.284,36.337,44.337,67.095,78.235,88.946
c34.803,22.435,75.186,34.293,116.784,34.293c11.55,0,23.139-0.919,34.445-2.733c0.526-0.087,1.029,0.275,1.114,0.806
c0.085,0.53-0.276,1.029-0.806,1.114C241.123,434.629,229.431,435.556,217.778,435.556z"/>
<path fill="none" d="M269.654,429.34l-0.461-1.889c30.629-7.484,59.825-21.988,84.433-41.944l1.225,1.511
C330.021,407.152,300.56,421.787,269.654,429.34z"/>
<path d="M361.996,380.637c-0.268,0-0.534-0.11-0.726-0.325c-0.357-0.401-0.322-1.015,0.079-1.373
c45.924-40.941,72.264-99.682,72.264-161.161c0-15.731-1.701-31.424-5.054-46.646c-0.115-0.525,0.216-1.043,0.74-1.159
c0.526-0.12,1.043,0.216,1.159,0.74c3.384,15.359,5.099,31.194,5.099,47.064c0,62.033-26.576,121.303-72.914,162.612
C362.457,380.556,362.226,380.637,361.996,380.637z"/>
<path fill="none" d="M423.026,150.825c-17.539-53.8-56.571-99.477-107.089-125.319l0.886-1.731
c50.971,26.074,90.355,72.162,108.051,126.447L423.026,150.825z"/>
<path d="M28.427,113.072c-0.16,0-0.323-0.04-0.474-0.124c-0.469-0.262-0.636-0.855-0.374-1.323C66.089,42.772,138.969,0,217.778,0
c31.227,0,61.374,6.469,89.603,19.229c0.489,0.221,0.706,0.797,0.485,1.287c-0.221,0.489-0.797,0.706-1.287,0.485
C278.605,8.356,248.727,1.945,217.778,1.945c-78.106,0-150.336,42.391-188.502,110.63
C29.098,112.893,28.768,113.072,28.427,113.072z"/>
</g>
</svg>

Related

CSS that animate an SVG changes the animation sequence when the SVG is resized

I managed to create this animated check mark here by following a tutorial https://codepen.io/flaccuz/pen/MWaPmgg
#my-icon .circle {
animation: circle-animation 0.5s ease-out forwards;
opacity: 0;
transform: scale(0.9);
transform-origin: center;
}
#keyframes circle-animation {
100% {
opacity: 1;
transform: scale(1);
}
}
#my-icon .checkmark {
animation: checkmark-animation 1s ease-out forwards;
stroke-dasharray: 400;
stroke-dashoffset: 400;
stroke: #cfd8dc;
transform-origin: center;
}
#keyframes checkmark-animation {
40% {
transform: scale(1);
}
55% {
stroke: #cfd8dc;
transform: scale(1.2);
}
70% {
transform: scale(1);
}
100% {
stroke-dashoffset: 0;
transform: scale(1);
stroke: #21b587;
}
}
However, when I resized the checkmark and added an illustration to the background, the style of the animation changed — the checkmark isn't drawing itself anymore, it just kind of jumps up and down, as seen here: https://codepen.io/flaccuz/pen/MWaPmYg
Any idea why that is? I didn't change anything in the CSS at all.

you need to replace transform-origin: center; with transform-origin: 100.99px 106.52px; where 100.99px 106.52px; is the center of the circle. Also the length of the <polyline class="checkmark" is 16.97 not 400. Use this value in your css.
In order to know the length of a path you can use the getTotalLength method in Javascript.
svg{border:solid}
#my-icon .circle {
animation: circle-animation .5s ease-out forwards;
opacity: 0;
transform: scale(0.9);
transform-origin: 100.99px 106.52px;
}
#keyframes circle-animation {
100% {
opacity: 1;
transform: scale(1);
}
}
#myicon .checkmark {
animation: checkmark-animation 1s ease-out forwards;
stroke-dasharray: 16.97;
stroke-dashoffset: 16.97;
stroke: #cfd8dc;
transform-origin: 100.99px 106.52px;
}
#keyframes checkmark-animation {
40% {
transform: scale(1);
}
55% {
stroke: #cfd8dc;
transform: scale(1.2);
}
70% {
transform: scale(1);
}
100% {
stroke-dashoffset: 0;
transform: scale(1);
stroke: #21b587;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.78 126.7" width="200">
<g id="background">
<g>
<path d="M64.92,23.92A56.07,56.07,0,0,0,15.4,106.4h99a55.65,55.65,0,0,0,4.66-11.76A56.13,56.13,0,0,0,64.92,23.92Z" style="fill: #f6f8f6"/>
<g>
<circle cx="64.94" cy="21.42" r="16.52" style="fill: #fff"/>
<path d="M64.94,5.27A16.15,16.15,0,1,1,48.8,21.42,16.15,16.15,0,0,1,64.94,5.27m0-.75a16.9,16.9,0,1,0,16.9,16.9,16.92,16.92,0,0,0-16.9-16.9Z"/>
</g>
<line x1="35.47" y1="106.4" x2="114.37" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<line x1="15.21" y1="106.4" x2="44.47" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<line x1="6" y1="106.4" x2="11.12" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<g>
<path d="M64.94,33.19A11.78,11.78,0,1,1,76.72,21.42,11.78,11.78,0,0,1,64.94,33.19Z" style="fill: #ff5454"/>
<path d="M64.94,10a11.41,11.41,0,1,1-11.4,11.41A11.41,11.41,0,0,1,64.94,10m0-.75A12.16,12.16,0,1,0,77.1,21.42,12.17,12.17,0,0,0,64.94,9.26Z"/>
</g>
<g>
<path d="M60.78,28.76a1.18,1.18,0,0,1-.93-1.89A6,6,0,0,0,61.26,24H60.17a1.17,1.17,0,0,1,0-2.34h.91c-.1-.47-.23-1-.38-1.54l-.11-.44c-.89-3.47.74-5.52,2.56-6.28A5.16,5.16,0,0,1,65.21,13,5.57,5.57,0,0,1,70,15.58a1.18,1.18,0,0,1-.4,1.61,1.16,1.16,0,0,1-.6.17,1.18,1.18,0,0,1-1-.56,3.22,3.22,0,0,0-2.76-1.49,2.83,2.83,0,0,0-1.14.22c-1.23.51-1.65,1.77-1.2,3.54l.11.44c.19.74.37,1.44.5,2.12h4a1.17,1.17,0,1,1,0,2.34H63.62a6.49,6.49,0,0,1-.71,2.44h6.77a1.18,1.18,0,0,1,0,2.35Z" style="fill: #fff"/>
<path d="M65.21,13.33a5.22,5.22,0,0,1,4.44,2.45.81.81,0,0,1-.27,1.09A.78.78,0,0,1,69,17a.81.81,0,0,1-.69-.39,3.57,3.57,0,0,0-3.08-1.66,3.32,3.32,0,0,0-1.28.24c-1.4.59-1.92,2-1.42,4l.11.43c.22.87.42,1.65.54,2.4h4.29a.8.8,0,0,1,0,1.6H63.27a6.72,6.72,0,0,1-1,3.19h7.39a.8.8,0,0,1,0,1.59h-8.9a.8.8,0,0,1-.63-1.28,6,6,0,0,0,1.52-3.5h-1.5a.8.8,0,0,1,0-1.6h1.37c-.11-.59-.28-1.24-.47-2L61,19.56c-.82-3.24.67-5.14,2.35-5.85a4.86,4.86,0,0,1,1.91-.38m0-.75v0A5.65,5.65,0,0,0,63,13c-1.88.79-3.73,3-2.78,6.72l.11.45c.1.38.19.73.27,1.06h-.44a1.55,1.55,0,0,0,0,3.1h.64a6.58,6.58,0,0,1-1.25,2.29,1.54,1.54,0,0,0,1.22,2.49h8.9a1.55,1.55,0,0,0,0-3.09H63.49A6.54,6.54,0,0,0,64,24.35h3.49a1.55,1.55,0,0,0,0-3.1H63.78q-.2-.88-.45-1.83L63.22,19c-.23-.91-.41-2.52,1-3.11a2.61,2.61,0,0,1,1-.18A2.85,2.85,0,0,1,67.64,17a1.57,1.57,0,0,0,1.33.75,1.52,1.52,0,0,0,.8-.23,1.54,1.54,0,0,0,.52-2.12,6,6,0,0,0-5.08-2.81Z"/>
</g>
<path d="M74.77,57.2s6.83,1.43,10.83-2.44S88.37,44,88.37,44s-6.83-1.43-10.82,2.44S74.77,57.2,74.77,57.2Z" style="fill: #a5db85;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<path d="M57.45,51.3S58.87,44.47,55,40.48s-10.75-2.75-10.75-2.75-1.41,6.84,2.46,10.82S57.45,51.3,57.45,51.3Z" style="fill: #a5db85;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="64.92" y1="72.52" x2="64.92" y2="38.01" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="65.24" y1="59.02" x2="69.85" y2="63.5" style="fill: none"/>
<line x1="57.45" y1="51.3" x2="64.92" y2="58.56" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="74.77" y1="57.2" x2="64.92" y2="66.45" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<g>
<path d="M51.72,105.68a1.71,1.71,0,0,1-1.67-1.33l-4.7-20.21A1.71,1.71,0,0,1,47,82h35.8a1.7,1.7,0,0,1,1.35.65,1.73,1.73,0,0,1,.33,1.46l-4.66,20.21a1.71,1.71,0,0,1-1.68,1.33Z" style="fill: #00aff5"/>
<path d="M82.82,82.4a1.34,1.34,0,0,1,1.31,1.65l-4.66,20.21a1.35,1.35,0,0,1-1.31,1H51.72a1.36,1.36,0,0,1-1.31-1l-4.7-20.21A1.35,1.35,0,0,1,47,82.4h35.8m0-.75H47a2.1,2.1,0,0,0-2,2.57l4.7,20.21a2.09,2.09,0,0,0,2,1.63H78.16a2.09,2.09,0,0,0,2-1.63l4.66-20.21a2.09,2.09,0,0,0-2-2.57Z" style="fill: #111"/>
</g>
<g>
<rect x="39.79" y="72.14" width="50.3" height="11.64" rx="1.89" style="fill: #00aff5"/>
<path d="M88.21,72.52A1.52,1.52,0,0,1,89.72,74v7.86a1.51,1.51,0,0,1-1.51,1.51H41.68a1.5,1.5,0,0,1-1.51-1.51V74a1.51,1.51,0,0,1,1.51-1.51H88.21m0-.75H41.68A2.26,2.26,0,0,0,39.42,74v7.86a2.26,2.26,0,0,0,2.26,2.26H88.21a2.26,2.26,0,0,0,2.26-2.26V74a2.26,2.26,0,0,0-2.26-2.26Z" style="fill: #111"/>
</g>
</g>
</g>
<g id="myicon">
<circle class="circle" cx="100.99" cy="106.52" r="14" style="fill: #fff;stroke: #e4f4da;stroke-miterlimit: 10;stroke-width: 2px"/>
<polyline class="checkmark" points="94.99 106.52 98.99 110.52 106.99 102.52" style="fill: none;stroke: #a5db85;stroke-linecap: round;stroke-linejoin: round;stroke-width: 2px"/>
</g>
</svg>

Random square appears when animating an SVG clip-path in Firefox 60 or earlier

I have an svg image with multiple elements being clipped with clip-paths (all defined in the file). The clip-paths and the elements within them are all animated. In Firefox 60 or earlier, one of these clipped elements is showing up as a square instead of the proper path:
https://i.stack.imgur.com/ITTJr.gif
This is how it's supposed to appear: https://i.stack.imgur.com/YQs34.gif
The code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 394.08 393.12">
<defs>
<style>
.outer, .outer-sky, .middle, .middle-sky, .inner, .inner-sky, .foreground {
animation-name: rotate;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-iteration-count: infinite;
}
.outer, .outer-sky, .foreground {
animation-duration: 45s;
}
.middle, .middle-sky {
animation-duration: 30s;
}
.inner, .inner-sky {
animation-duration: 15s;
}
.foreground, .outer-sky, .middle-sky, .inner-sky {
animation-direction: reverse;
}
.outer {
clip-path: url(#outerClip);
}
.middle {
clip-path: url(#middleClip);
}
.inner {
clip-path: url(#innerClip);
}
.outer-sky {
fill: url(#outerGradient);
}
.middle-sky {
fill: url(#middleGradient);
}
.inner-sky {
fill: url(#innerGradient);
}
.foreground {
fill: #1c204c;
}
.star {
fill: #fff;
animation-name: twinkle;
animation-duration: 1.3s;
animation-timing-function: linear;
transform-origin: 50% 50%;
animation-iteration-count: infinite;
transform-box: fill-box;
}
.star:nth-of-type(5n+0) {
animation-delay: -0.5s;
}
.star:nth-of-type(5n+1) {
animation-delay: -0.75s;
}
.star:nth-of-type(5n+2) {
animation-delay: -0.25s;
}
#keyframes twinkle {
0% {
transform: scale(1);
opacity: 1;
} 60% {
transform: scale(1);
opacity: 1;
} 80% {
transform: scale(0.95);
opacity: 0;
} 100% {
transform: scale(1);
opacity: 1;
}
}
#keyframes rotate {
0% {
transform: rotate(0deg);
} 100% {
transform: rotate(360deg);
}
}
</style>
<clipPath id="outerClip">
<path d="M75.19,103.15c-4.39,12.47-7.7,25.92-14.48,36.66-7.91,12.52-17.87,23.85-21.13,38.56-3.41,15.39-4,31.52-.7,47a85.31,85.31,0,0,0,20.42,40c10.42,11.22,26.14,15.6,36.43,27.29,4.93,5.61,8.23,12.44,12.26,18.73,12.63,19.68,32.83,34.05,55.14,41.07,21.17,6.66,42.46,5.93,64.07,3.13a78.69,78.69,0,0,0,49.6-26.78c10.11-12,16.43-26.91,27.71-37.95s26.2-18.19,36.88-30.46c16.37-18.82,19.81-50.91,12-73.82-2.39-7.07-5.82-13.77-8.16-20.87-4.3-13.09.25-26.52-3.9-39.61-2.09-6.58-5.46-12.89-10.54-17.56-8.65-7.93-21.27-12.68-31.64-17.93-10.59-5.37-20.64-11.67-29-20.19C259,59,248.56,46.15,233.28,40.13c-21.88-8.61-50.16-4.75-69.57,8-7.39,4.87-14,11.14-22.3,14.27-10.39,3.94-22,2.44-32.86,5C88.63,72,81,86.75,75.19,103.15Z3-10.59-5.37-20.64-11.67-29-20.19C259,59,248.56,46.15,233.28,40.13c-21.88-8.61-50.16-4.75-69.57,8-7.39,4.87-14,11.14-22.3,14.27-10.39,3.94-22,2.44-32.86,5C88.63,72,81,86.75,75.19,103.15Z" />
</clipPath>
<radialGradient id="outerGradient" cx="87.7601679%" cy="8.06021835%" fx="87.7601679%" fy="8.06021835%" r="103.2123%" gradientTransform="translate(0.877602,0.080602),scale(1.000000,0.995772),rotate(135.207489),translate(-0.877602,-0.080602)">
<stop stop-color="#1E72B9" offset="0%"></stop>
<stop stop-color="#374CA1" offset="100%"></stop>
</radialGradient>
<clipPath id="middleClip">
<path d="M131.56,119.47a61.83,61.83,0,0,1,14.25-4.29c15.8-2.81,23.46-19.54,39-23.07,10.66-2.42,21.73,3.08,29.53,10.75,3.47,3.41,6.53,7.29,10.54,10,6.27,4.33,14.13,5.46,21.67,6.56,9.62,1.42,19.42,3,28.06,7.51s16.12,12.26,17.76,21.85c1.21,7-.78,14.27-.06,21.37.74,7.34,4.29,14.05,7.91,20.47,1.94,3.44,3.94,6.93,4.68,10.81a23.85,23.85,0,0,1-.11,8.59,37,37,0,0,1-13.46,22.44c-5.58,4.37-12.59,7.29-16.43,13.24s-3.61,13.23-5.09,20a40.92,40.92,0,0,1-49.93,31c-7.05-1.76-14.18-5.43-21.21-3.56-3.9,1-7.15,3.67-10.75,5.51-11.7,5.95-26,2.95-37.89-2.67-18.17-8.61-34.25-24.59-36.95-44.52-.83-6.15-.37-12.4-1.06-18.57s-2.75-12.55-7.51-16.53c-3.26-2.72-7.64-4.2-10.06-7.69-3.37-4.83-1.63-11.58,1.41-16.62s7.29-9.46,9.11-15.06c1.58-4.82,1.19-10,1.36-15.1.36-11.28,3.69-22.66,10.6-31.59C120.57,125.59,125.82,122,131.56,119.47Z" />
</clipPath>
<radialGradient id="middleGradient" cx="87.1592657%" cy="0%" fx="87.1592657%" fy="0%" r="115.307406%" gradientTransform="translate(0.871593,0.000000),scale(0.989524,1.000000),rotate(127.766222),translate(-0.871593,-0.000000)">
<stop stop-color="#15A781" offset="0%"></stop>
<stop stop-color="#15A681" offset="34.7550622%"></stop>
<stop stop-color="#1B8BA1" offset="100%"></stop>
</radialGradient>
<clipPath id="innerClip">
<path d="M213,148.4c-.64,0-1.29.09-1.93.17-5.09.6-10.32,1.78-15.26.43-2.3-.64-4.42-1.79-6.68-2.56-5.58-1.9-13.69-.58-18.27,3.14-5.53,4.51-7,12.4-11.6,17.84-3.38,4-8.33,6.47-11.4,10.7-3.46,4.75-4,11-4,16.86,0,2.6.12,5.31,1.36,7.6,1.79,3.32,5.56,5.06,8,8,3.91,4.8,3.43,11.72,5.3,17.63A22.8,22.8,0,0,0,178,243.66c5.21.38,10.48-1.09,15.66-.34,4.18.6,8.05,2.62,12.21,3.39,9.76,1.82,20.38-4.33,23.67-13.7,1.13-3.22,1.48-6.71,2.94-9.8,4.18-8.79,16.64-12.85,17.67-22.54.94-8.87-7.35-13.76-11.43-20.46-4.65-7.64-4.07-18-9.3-25.05C225.4,149.73,219.34,148,213,148.4Z" />
</clipPath>
<radialGradient id="innerGradient" cx="-6.12176208%" cy="0.279661765%" fx="-6.12176208%" fy="0.279661765%" r="156.069259%" gradientTransform="translate(-0.061218,0.002797),scale(0.953303,1.000000),rotate(37.294692),translate(0.061218,-0.002797)">
<stop stop-color="#FFCD54" offset="0.0844594595%"></stop>
<stop stop-color="#FFA440" offset="100%"></stop>
</radialGradient>
</defs>
<title>Stargazing</title>
<g class="outer">
<circle class="outer-sky" cx="50%" cy="50%" r="41%" />
</g>
<g class="middle">
<circle class="middle-sky" cx="50%" cy="50%" r="28%" />
</g>
<g class="inner">
<circle class="inner-sky" cx="50%" cy="50%" r="14%"/>
</g>
<g class="outer">
<path class="foreground" d="M315.45,357.22s-37.57-29.74-37.05-30.41L263.11,314.4c-6.29-5.11-13-11-15.3-18.48A6.41,6.41,0,0,0,243,291.5c-.63-.13-1.25-.29-1.87-.47l-3-19.69,0-.18a.74.74,0,0,0,.45-.2l16.25-15a.8.8,0,0,0,.19-.9l-2.86-6.51a.79.79,0,0,0-1.32-.2l-17.1,19.59a.8.8,0,0,0,.23,1.22l.87.45-.11.13-6.45,14.15a31.09,31.09,0,0,1-5.91-7.22,6.34,6.34,0,0,0-6.43-3,27.76,27.76,0,0,1-7.83.09c0-.28,0-.55.05-.84,1.26-21.89.69-34.36.33-39.21a8.07,8.07,0,0,0-1.3-3.81h.2a.64.64,0,0,0,.64-.7l-1-12.23a.42.42,0,0,1,.83-.1v0l2.58,17.61a.65.65,0,0,0,.64.55h1.11c.06,1,.5,1.5.63,3.33.17,2.32,1.4,0,1.71-3.33h.5a.64.64,0,0,0,.63-.74L213,216.09a16.23,16.23,0,0,0-9.28-12.36,15.92,15.92,0,0,0-3.33-1.12c-.34-.07-.68-.11-1-.16l-.15-.7c-.17-.84.67-1.14.67-2.83s-.66-3.41-3.67-3.41c-2.16,0-2.29,2.34-2.29,3.34a3.45,3.45,0,0,0,.7,2,1.65,1.65,0,0,1,.16,1c0,.22.1.43,0,.6a16.18,16.18,0,0,0-13.86,13.68l-2.71,18.18a.64.64,0,0,0,.64.74h.49c.3,3.32,1.53,5.65,1.7,3.33.13-1.83.57-2.36.64-3.33h1.07a.65.65,0,0,0,.64-.55L186,216.85v0a.42.42,0,0,1,.83.1l-1,12.23a.64.64,0,0,0,.64.7h.64a8.07,8.07,0,0,0-1.3,3.81c-.36,4.84-.93,17.29.32,39.13l-19.3,5.55a6.44,6.44,0,0,0-4.44,4.71,7.15,7.15,0,0,1-4.6,5.15c-2.86.91-6.28,0-8.73,1.71-1.47,1-2.2,2.8-2.89,4.47a230,230,0,0,1-15.25,30.48c-1.24,2.08-3.39,4.48-5.18,6.86-13.7,10.52-18.63,21.05-5,25.35m74.85-86.51a11.22,11.22,0,0,0-1.64.14,189.48,189.48,0,0,1,2.76-28.2.41.41,0,0,1,.82,0,186.8,186.8,0,0,1,2.77,29.08A14.84,14.84,0,0,0,195.63,270.54ZM235.57,272l3.81,18.47a32,32,0,0,1-9.51-5.26Z"/>
</g>
<path class="star" d="M134.27,152.31l-1.82.07a3.61,3.61,0,0,1-.94,2.59,3.2,3.2,0,0,1-1.18.81,2.53,2.53,0,0,1-1.3.13,2.34,2.34,0,0,1-1.16-.59,1.94,1.94,0,0,1-.65-1.27,4.65,4.65,0,0,1,.17-1.64,5,5,0,0,1-1.15-.27,2.5,2.5,0,0,1-.81-.49,1.8,1.8,0,0,1-.61-1.42,2.42,2.42,0,0,1,.73-1.58,2.77,2.77,0,0,1,1-.69,1.82,1.82,0,0,1,1-.13,1.7,1.7,0,0,1,.89.44,1.77,1.77,0,0,1,.59,1.29,6,6,0,0,1-.3,1.79c.7,0,1.5,0,2.39,0a6.79,6.79,0,0,0-.61-1.52l1.27-.24a6.85,6.85,0,0,1,.58,1.7l1.88-.09Zm-6.57-1a4.26,4.26,0,0,0,.2-1.24,1.08,1.08,0,0,0-.35-.83.79.79,0,0,0-.63-.24,1,1,0,0,0-.65.34,1,1,0,0,0-.3.74.9.9,0,0,0,.32.69A2.57,2.57,0,0,0,127.7,151.27Zm3.56,1.17c-1.17,0-2.12.06-2.85,0a3.14,3.14,0,0,0-.1,1.05,1.12,1.12,0,0,0,.37.74,1.23,1.23,0,0,0,1,.36,1.56,1.56,0,0,0,1-.52A2.42,2.42,0,0,0,131.26,152.44Z"/>
<path class="star" d="M96.07,105.1l-.55,1.5-2.89-1.07-1.06,2.85-1.41-.52L91.22,105l-2.87-1.06.56-1.49,2.87,1.06,1.06-2.87,1.41.52L93.19,104Z"/>
<path class="star" d="M156.34,80.21a1.36,1.36,0,0,1,1.22,1.32,1.18,1.18,0,0,1-1.25,1.16,1.3,1.3,0,0,1-.86-.43,1.21,1.21,0,0,1-.36-.88,1.12,1.12,0,0,1,.38-.83A1.16,1.16,0,0,1,156.34,80.21Zm3.5,3.82a1.18,1.18,0,0,1,.85.42,1.41,1.41,0,0,1,.27.4c0,.13.11.31.17.53l.63,2.28-.83.77-.87-2A1.14,1.14,0,0,1,159,86a1.23,1.23,0,0,1-.36-.87,1.15,1.15,0,0,1,.38-.82A1.19,1.19,0,0,1,159.84,84Z"/>
<path class="star" d="M272.07,184.08a1.21,1.21,0,0,1,.34.89,1.25,1.25,0,0,1-.34.91,1.12,1.12,0,0,1-.86.36,1.13,1.13,0,0,1-.84-.37,1.25,1.25,0,0,1-.34-.9,1.21,1.21,0,0,1,.34-.89,1.21,1.21,0,0,1,1.7,0Z"/>
<path class="star" d="M94.64,176.35a1.25,1.25,0,0,1,.34.89,1.3,1.3,0,0,1-.34.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.35A1.18,1.18,0,0,1,94.64,176.35Z"/>
<path class="star" d="M125.23,294.86a1.21,1.21,0,0,1,.34.89,1.25,1.25,0,0,1-.34.91,1.21,1.21,0,0,1-1.71,0,1.3,1.3,0,0,1-.33-.9,1.24,1.24,0,0,1,.33-.89,1.22,1.22,0,0,1,1.71,0Z"/>
<path class="star" d="M312.8,145.2a.87.87,0,0,1-.11.66.89.89,0,0,1-.53.43.77.77,0,0,1-.64-.08.82.82,0,0,1-.39-.52.9.9,0,0,1,.12-.67.84.84,0,0,1,.51-.42.87.87,0,0,1,1,.6Zm2.36-6.76,1.32.77L315.41,141l-2,2.92-.85-.49,1.55-3.2Z"/>
<path class="star" d="M299,237.82a2.56,2.56,0,0,1,1.16-1.62,2.86,2.86,0,0,1,1.8-.59,1.84,1.84,0,0,1,1.43.88,2.1,2.1,0,0,1,.33.76,2.15,2.15,0,0,1,0,.71c0,.21-.09.48-.17.81a5,5,0,0,0-.18,1.06,1.53,1.53,0,0,0,.28.85l-1,.69a2.41,2.41,0,0,1-.36-.79,2.15,2.15,0,0,1-.06-.69,6.12,6.12,0,0,1,.14-.77,3.87,3.87,0,0,0,.13-.89,1.2,1.2,0,0,0-.24-.69.86.86,0,0,0-.65-.42,1.33,1.33,0,0,0-.82.28,1.25,1.25,0,0,0-.55.74,1.23,1.23,0,0,0,.22.92l-1,.7A2.49,2.49,0,0,1,299,237.82Zm5.46,4a.88.88,0,0,1,.55.37.91.91,0,0,1,.16.66.77.77,0,0,1-.35.55.75.75,0,0,1-.63.12.89.89,0,0,1-.56-.38.86.86,0,0,1-.15-.65.85.85,0,0,1,1-.67Z"/>
<path class="star" d="M223.13,124.18a1.24,1.24,0,0,1,.33.89,1.27,1.27,0,0,1-.33.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.34A1.17,1.17,0,0,1,223.13,124.18Z"/>
<path class="star" d="M223.13,124.18a1.24,1.24,0,0,1,.33.89,1.27,1.27,0,0,1-.33.91,1.15,1.15,0,0,1-.86.36,1.1,1.1,0,0,1-.85-.37,1.29,1.29,0,0,1-.34-.9,1.25,1.25,0,0,1,.34-.89,1.15,1.15,0,0,1,.85-.34A1.17,1.17,0,0,1,223.13,124.18Z"/>
<g class="star">
<path d="M246.85,134.28l.37.86-1.66.71.7,1.63-.81.35-.7-1.64-1.64.71-.37-.86,1.65-.7-.71-1.65.81-.35.71,1.65Z"/>
<path d="M245,141.2a5.41,5.41,0,0,1-2.09-.41,5.62,5.62,0,0,1-.12-10.37,5.63,5.63,0,0,1,7.37,3h0A5.61,5.61,0,0,1,245,141.2Zm0-10.37a4.75,4.75,0,0,0-1.76,9.16,4.67,4.67,0,0,0,3.63,0,4.75,4.75,0,0,0-1.87-9.12Z"/>
</g>
<path class="star" d="M65.66,240.37a2.56,2.56,0,0,1,1,1,3.13,3.13,0,0,1,0,3,2.52,2.52,0,0,1-1,1,3.06,3.06,0,0,1-1.51.35,3.14,3.14,0,0,1-1.53-.35,2.46,2.46,0,0,1-1-1,3.13,3.13,0,0,1,0-3,2.5,2.5,0,0,1,1-1,3.14,3.14,0,0,1,1.53-.36A3.07,3.07,0,0,1,65.66,240.37ZM63,241.63a1.92,1.92,0,0,0,0,2.42,1.59,1.59,0,0,0,2.26,0,1.92,1.92,0,0,0,0-2.42,1.59,1.59,0,0,0-2.26,0Z"/>
<path class="star" d="M122.72,246.79l1.53-2.73,3.11.32.65,1.25-2.38-.17,1.57,3-1,.54-1.57-3-1.23,2Z"/>
<path class="star" d="M239.24,74.35l-2-1.16,1.21-.63L241.18,74l-.36,3.09-1.21.63.18-2.28-3.09,1.6L236.13,76Z"/>
</svg>
Is there a solution and/or a way to use a static image as a fallback when on an older browser?

I figured it out! It looks like older versions of firefox draw a bounding box of some sort around the element based on its width/height, and this box does not animate with the element itself. I fixed it by putting the element in a group with an invisible rectangle as wide/large as the entire viewbox.

css scale an SVG moves element

I am trying to make a svg animation, as the demo shows when I scale the charge fill of svg, it was pushed to the container's left edge.
Is it possible to keep the x,y attributes of the path in the svg? Or is my svg made impossible to animate correctly?
.svg {
width: 40%;
}
#charge {
/* animation: charge 1s ease infinite; */
transform: scaleX(0.1);
}
#keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>

To avoid setting pixel value on the transform-origin you can also adjust the transform-box to have the transform-origin relative to the element and not the whole SVG:
.svg {
width: 40%;
}
#charge {
transform-origin: left;
transform-box:fill-box;
animation: charge 1s ease infinite;
transform: scaleX(0.1);
}
#keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>

You can use the transform-origin property allows you to change the position of transforming elements. The default values are 50%, 50%, making your transforms start in the middle of the element.
.svg {
width: 40%;
}
#charge {
transform-origin: 10px;
animation: charge 1s ease infinite;
transform: scaleX(0.1);
}
#keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>

You can animate the width instead, to achieve the desired effect:
.svg {
width: 40%;
}
#charge {
width: 10px;
height: 80px;
animation: charge 1s ease infinite;
}
#keyframes charge {
0% {
width: 0;
}
100% {
width: 180px;
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" x="10" y="10" fill="#0071BC"/>
</svg>
</div>

svg plus css animation

I want to do a animation of a wave that turns into a straight line.
What I have right now is a animation of a wave that goes from left to right see the below code. Also can this be made only using css?
body {
width: 960px;
height: 100%;
background-color: #d3d3d3;
}
/*#wave1 {
transform: translate(-260px, 200px);
}*/
#wave1 {
animation: popup 5s ease infinite;
}
#keyframes popup {
0% {
transform: translate( -500px, 0);
}
100% {
transform: translate(400px, 0);
}
}
#wave2 {
animation: popup 5s ease infinite;
}
#keyframes popup {
0% {
transform: translate( -500px, 0);
}
100% {
transform: translate(400px, 0);
}
}
#wave3 {
animation: popup 5s ease infinite;
}
#keyframes popup {
0% {
transform: translate( -500px, 0);
}
100% {
transform: translate(400px, 0);
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="91.43 -87.5 960 200" overflow="visible" enable-background="new 91.43 -87.5 960 200" xml:space="preserve">
<defs> </defs>
<path id="wave1" fill="none" stroke="#2E2925" stroke-miterlimit="10" d="M0,24.5c28.57,0,28.57-24,57.141-24c28.57,0,28.57,24,57.141,24
c28.572,0,28.572-24,57.142-24c28.57,0,28.57,24,57.141,24c28.572,0,28.572-24,57.143-24c28.569,0,28.569,24,57.138,24
c28.57,0,28.57-24,57.14-24c28.57,0,28.57,24,57.139,24s28.569-24,57.14-24c28.57,0,28.57,24,57.14,24c28.572,0,28.572-24,57.145-24
s28.572,24,57.145,24c28.571,0,28.571-24,57.143-24c28.572,0,28.572,24,57.145,24c28.573,0,28.573-24,57.146-24
c28.571,0,28.571,24,57.143,24c28.573,0,28.573-24,57.146-24c28.573,0,28.573,24,57.146,24c28.574,0,28.574-24,57.149-24
s28.575,24,57.149,24" /> </svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="960px" height="200px" viewBox="120 -87.5 960 200" overflow="visible" enable-background="new 120 -87.5 960 200" xml:space="preserve">
<defs> </defs>
<path id="wave2" fill="none" stroke="#E74267" stroke-miterlimit="10" d="M0,0.5c14.633,0,14.633,24,29.266,24c14.632,0,14.632-24,29.265-24
c14.636,0,14.636,24,29.27,24c14.633,0,14.633-24,29.265-24c14.635,0,14.635,24,29.268,24c14.635,0,14.635-24,29.269-24
c14.633,0,14.633,24,29.267,24c14.633,0,14.633-24,29.267-24s14.634,24,29.266,24c14.635,0,14.635-24,29.269-24s14.634,24,29.268,24
s14.634-24,29.269-24c14.634,0,14.634,24,29.269,24c14.633,0,14.633-24,29.268-24c14.631,0,14.631,24,29.262,24
c14.633,0,14.633-24,29.266-24c14.632,0,14.632,24,29.266,24c14.631,0,14.631-24,29.263-24c14.634,0,14.634,24,29.266,24
c14.636,0,14.636-24,29.269-24c14.635,0,14.635,24,29.268,24s14.633-24,29.266-24s14.633,24,29.266,24s14.633-24,29.268-24
c14.633,0,14.633,24,29.266,24c14.637,0,14.637-24,29.271-24s14.635,24,29.268,24c14.635,0,14.635-24,29.27-24s14.635,24,29.27,24
s14.635-24,29.27-24s14.635,24,29.27,24s14.635-24,29.27-24c14.633,0,14.633,24,29.266,24c14.635,0,14.635-24,29.27-24
s14.635,24,29.27,24s14.635-24,29.271-24s14.637,24,29.271,24c14.639,0,14.639-24,29.275-24s14.637,24,29.273,24
c14.639,0,14.639-24,29.277-24s14.639,24,29.277,24" /> </svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="100.641 -75.5 960 200" overflow="visible" enable-background="new 100.641 -75.5 960 200" xml:space="preserve">
<defs> </defs>
<path id="wave3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1161.282,0.5c-19.359,0-19.359,48-38.719,48
c-19.355,0-19.355-48-38.713-48c-19.355,0-19.355,48-38.715,48c-19.355,0-19.355-48-38.711-48s-19.355,48-38.711,48
c-19.354,0-19.354-48-38.707-48c-19.355,0-19.355,48-38.713,48c-19.355,0-19.355-48-38.711-48s-19.355,48-38.713,48
c-19.354,0-19.354-48-38.709-48s-19.355,48-38.709,48s-19.354-48-38.709-48c-19.354,0-19.354,48-38.709,48
c-19.354,0-19.354-48-38.709-48c-19.354,0-19.354,48-38.71,48c-19.353,0-19.353-48-38.707-48c-19.353,0-19.353,48-38.706,48
s-19.353-48-38.705-48s-19.352,48-38.704,48c-19.353,0-19.353-48-38.705-48c-19.355,0-19.355,48-38.709,48
c-19.355,0-19.355-48-38.708-48c-19.356,0-19.356,48-38.71,48s-19.354-48-38.708-48s-19.354,48-38.708,48
c-19.355,0-19.355-48-38.708-48c-19.355,0-19.355,48-38.709,48s-19.354-48-38.709-48s-19.354,48-38.709,48S19.354,0.5,0,0.5" /> </svg>

If you want the wave to flatten to a line, just can just animate its scale from 1 to 0. I don't know if that is the effect you are after though.
body {
width: 960px;
height: 100%;
background-color: #d3d3d3;
}
/*#wave1 {
transform: translate(-260px, 200px);
}*/
#wave1 {
animation: popup 5s ease infinite;
}
#keyframes popup {
0% {
transform: translate( -500px, 0) scale(1,1);
}
100% {
transform: translate(400px, 0) scale(1,0);
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="91.43 -87.5 960 200" overflow="visible" enable-background="new 91.43 -87.5 960 200" xml:space="preserve">
<defs> </defs>
<path id="wave1" fill="none" stroke="#2E2925" stroke-miterlimit="10" d="M0,24.5c28.57,0,28.57-24,57.141-24c28.57,0,28.57,24,57.141,24
c28.572,0,28.572-24,57.142-24c28.57,0,28.57,24,57.141,24c28.572,0,28.572-24,57.143-24c28.569,0,28.569,24,57.138,24
c28.57,0,28.57-24,57.14-24c28.57,0,28.57,24,57.139,24s28.569-24,57.14-24c28.57,0,28.57,24,57.14,24c28.572,0,28.572-24,57.145-24
s28.572,24,57.145,24c28.571,0,28.571-24,57.143-24c28.572,0,28.572,24,57.145,24c28.573,0,28.573-24,57.146-24
c28.571,0,28.571,24,57.143,24c28.573,0,28.573-24,57.146-24c28.573,0,28.573,24,57.146,24c28.574,0,28.574-24,57.149-24
s28.575,24,57.149,24" /> </svg>

SVG Broken heart

Where can i find broken heart SVG format??
i need two layer cause when i click on broken heart this layers combine and result want one good heart <3
I drew heart but cant animate :(
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">
<path d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />
<path d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />
</svg>
any ideas?

An animation moving the right side:
#right {
animation: move 2s infinite alternate;
fill: red;
}
#keyframes move {
0% {transform: translateX(2px);}
100% {transform: translateX(0px);}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">
<path id="right" d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />
<path d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />
</svg>
An another one setting inclination on both
#right {
animation: moveRight 2s infinite alternate;
transform-origin: 0% 100%;
fill: red;
}
#keyframes moveRight {
0% {transform: rotate(25deg);}
100% {transform: rotate(0deg);}
}
#left {
animation: moveLeft 2s infinite alternate;
transform-origin: 100% 100%;
fill: red;
}
#keyframes moveLeft {
0% {transform: rotate(-25deg);}
100% {transform: rotate(0deg);}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">
<path id="right" d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />
<path id="left" d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />
</svg>

Resources