Repeat SVG horizontally infinitely - javascript
I am looking to create an infinite (repeating) animation of a car going horizontally, with landscape (different layers, SVG) passing by.
I couldn't find how to repeat my SVG landscape layers along the X-axis so when I play the animation, it just keeps repeating.
My animation is done with CSS keyframes and translateX (not sure if it's the best solution though).
The idea here is that you wish to 'mimic' the background into repeating. I'm not sure this is the best solution, it's just one that I have used in the past and am very fond of.
First, we'll duplicate the background svg with the same properties and call it #back instead of #front.
keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}
keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
Next, we're setting another animation that has exactly the same properties, except it moves from -100% to 0% while the original one goes from 0% to100%`.
If we all wrap it together, the following happens:
body {
margin : 0;
overflow : hidden;
}
#front {
position : absolute;
left :0;
right:0;
bottom:0;
z-index : 9;
-webkit-animation: frontScroll 2.5s linear infinite;
animation: frontScroll 2.5s linear infinite;
}
#back {
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 9
-webkit-animation: backScroll 2.5s linear infinite;
animation: backScroll 2.5s linear infinite;
}
keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}
#-webkit-keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}
keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
#-webkit-keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
<div id="back">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
<g id="XMLID_173_">
<g id="XMLID_193_">
<g id="XMLID_202_">
<path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8
c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2
c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/>
</g>
<path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9
c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8
V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0
c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6
c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/>
<path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2
l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6
c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55
c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/>
</g>
</g>
</g>
</svg>
</div>
<div id="front">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
<g id="XMLID_173_">
<g id="XMLID_193_">
<g id="XMLID_202_">
<path id="XMLID_203_" class="st0" d="M833.9,230.9l-25.9-3.7c0,0,0,0,0,0l-204.6,28c0,0,0,0,0,0l-160.5-3.8l-162.3,3.8
c0,0,0,0,0,0L200,240.8c0,0,0,0,0,0L0,241.5c0,0,0,0,0,0v72.4c0,0,0,0,0,0H1200c0,0,0,0,0,0l0-109.9c0,0,0,0,0,0l-200-25.2
c0,0,0,0,0,0L833.9,230.9C833.9,230.9,833.9,230.9,833.9,230.9z"/>
</g>
<path id="XMLID_200_" class="st0" d="M258.3,120.9V133c0,10.5,4.6,20,11.9,26.8c7.6,7,12.1,16.4,12.1,26.5v81c0,0,0,0,0,0h28.9
c0,0,0,0,0,0v-81c0-10.1,4.5-19.5,12.1-26.5c7.3-6.7,11.9-16.3,11.9-26.8v-32.2c0-5.8-5.3-10.4-11.5-9.5c-5,0.7-8.5,5-8.5,9.8
V133c0,6.3-3.4,11.8-8.5,14.9c0,0,0,0,0,0V79.6c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v68.5c0,0,0,0,0,0
c-5.1-3.2-8.5-8.7-8.5-14.9V14.4c0-4.8-3.6-9.2-8.5-9.8c-6.2-0.8-11.5,3.7-11.5,9.5v83.6c0,0,0,0,0,0c-7.9-1-14-7.4-14-15.3V26.6
c0-3.2-2.5-6-5.8-6c-3.4-0.1-6.2,2.5-6.2,5.8v56.1c0,11,6.9,20.5,16.8,24.7C254.7,109.5,258.3,115,258.3,120.9z"/>
<path id="XMLID_199_" class="st0" d="M657.7,257.6h27.9c0,0,0,0,0,0v-69.3c0-8.9,4.6-17.2,12.1-22.4c10.9-7.7,18-20.2,18-34.2
l0-86.8c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v87.1c0,11.2-7.5,20.8-18,24.3c0,0,0,0,0,0V8.7c0-4.2-3.1-8-7.4-8.6
c-5.4-0.7-10,3.3-10,8.3v147.5c0,0,0,0,0,0c-10.5-3.5-18-13.1-18-24.3V76.9c0-4.2-3.1-8-7.4-8.6c-5.4-0.7-10,3.3-10,8.3v55
c0,14,7.1,26.5,18,34.2c7.5,5.3,12.1,13.5,12.1,22.4L657.7,257.6C657.7,257.6,657.7,257.6,657.7,257.6z"/>
</g>
</g>
</g>
</svg>
</div>
Now we can easily position a car or something on top of the land and voila, an never-ending driving car.
Related
How do I make my SVG mobile responsive
I wanted to make a svg animation for a website. But the svg is not mobile responsive. It stretches out of the background and thus making the width of the website go beyond what I intended. I think most likely that I'm doing something wrong with the viewport or width and height but I can't figure out where it's wrong.. Moreover it looks fine on desktop when I minimize the chrome browser to a mobile screen width size but when I actually open in mobile, it doesn't look the same.. Any help would be appreciated.
<svg id="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="500" height="150" viewBox="0 0 600 140.63" >
<defs>
<style type="text/css">
.cls-1{fill:none; stroke:#8B0000;stroke-width:2; stroke-miterlimit:5;}
.PhIOtjDr_0{
stroke-dasharray:2948 2950;stroke-dashoffset:2949;
animation:PhIOtjDr_draw 6666ms ease-in 0ms forwards;
}
#keyframes PhIOtjDr_draw
{
100%{
stroke-dashoffset:0;
}
}
#keyframes PhIOtjDr_fade
{
0%{
stroke-opacity:1;
}
97.1830985915493%
{
stroke-opacity:1;
}
100%{
stroke-opacity:0;
}
}
#logo:hover .PhIOtjDr_0{
fill:#8B0000;
</style>
</defs>
<path class="cls-1 PhIOtjDr_0" d="M83.9,93.58H81.26V141a13.39,13.39,0,0,1-2.54,8.45A17.45,17.45,0,0,1,73,154.34a22.66,22.66,0,0,1-6.54,2.34,27.14,27.14,0,0,1-6.2.44,22.94,22.94,0,0,1-5.67-1,41.64,41.64,0,0,1-5-1.9,39.58,39.58,0,0,1-10.16-7l2.73-6.35a11.3,11.3,0,0,0,1.37,1.56q.78.78,2.2,2.1t3.66,3.17a36.14,36.14,0,0,0,5.81,4.15A15.89,15.89,0,0,0,60,153.65a10.6,10.6,0,0,0,4.3-.1,20.7,20.7,0,0,0,4.4-1.66,6.62,6.62,0,0,0,2.88-3.08,9,9,0,0,0,.93-3.76V125.33a36.24,36.24,0,0,1-3,3.22,27.72,27.72,0,0,1-3.81,2.93,38.67,38.67,0,0,1-4.88,2.69,35.31,35.31,0,0,1-5.47,2,20.56,20.56,0,0,1-5.47.78A14.33,14.33,0,0,1,43,135.29a14.88,14.88,0,0,1-5-4,14.47,14.47,0,0,1-2.83-5.76,17.74,17.74,0,0,1-.29-7.18A34.27,34.27,0,0,1,36.92,111a53,53,0,0,1,3.57-7.23q2.1-3.56,4.25-6.89,1.27-2,2.05-3.32H34.57L39.46,85H57.82q-1.76,2.93-3.08,5.27t-2.93,5.27q-1.61,2.93-3.08,5.86a50.48,50.48,0,0,0-4.54,13,24.23,24.23,0,0,0-.24,9.23,5.92,5.92,0,0,0,3,3.81,12,12,0,0,0,7,.78q4.3-.59,10.26-4.59a36.93,36.93,0,0,0,4.59-3.52q2.05-1.85,3.61-3.52V93.58H65.24L70.13,85H88.88Zm44-8.6a6.37,6.37,0,0,1,4.54,1.37q1.42,1.37,1.42,4.49v45.61l-6.25-6.06a28.9,28.9,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.44,25.44,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.46,9.46,0,0,1-1.17-2.44,18.54,18.54,0,0,1-.93-6.35,12.31,12.31,0,0,1,.44-3,12.48,12.48,0,0,1,1.56-3.52,12.82,12.82,0,0,1,2.2-2.54,13.06,13.06,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.21,22.21,0,0,0,4.44-2.1,11.16,11.16,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H94.73L99.62,85Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.6,25.6,0,0,0-3.42,1.51,20.33,20.33,0,0,0-3.27,2.15,18.09,18.09,0,0,0-2.73,2.73,7.88,7.88,0,0,0-1.61,3.37,15.32,15.32,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.84,5.84,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.7,16.7,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.18,26.18,0,0,0,3.13-1.51,23.3,23.3,0,0,0,3.71-2.59,23.69,23.69,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm53.72-18.07a47.61,47.61,0,0,1,4.79,5.71,43.51,43.51,0,0,1,4.35,7.57,36.79,36.79,0,0,1,2.73,9.18,33.44,33.44,0,0,1,0,10.65,38.5,38.5,0,0,1-2.2,8.06,31.4,31.4,0,0,1-3.17,6,25,25,0,0,1-3.76,4.35,23.52,23.52,0,0,1-4.05,3,25.4,25.4,0,0,1-10.26,3.32,30.93,30.93,0,0,0,4.3-2.64,31.77,31.77,0,0,0,3.81-3.37,22.36,22.36,0,0,0,3.52-4.84,43.58,43.58,0,0,0,2.49-5.47,29.41,29.41,0,0,0,1.86-9.77q0-2.44,0-5.18a17.68,17.68,0,0,0-1.66-6.54,27.73,27.73,0,0,0-3.37-5.52,24.91,24.91,0,0,0-3.86-4,10.54,10.54,0,0,0-2.93-1.86l-14.94,9v31.16l-8.79-8.5V93.68h-7.33L145.13,85h11.23V99.83l11.82-9L176,85a11.25,11.25,0,0,1,1.37,1.17Zm25.69-3.74q-.21.56-.42,1.11h.42ZM212.22,73a7.9,7.9,0,0,1,2.8-.49c2.19,0,9.32,2,12.26,2a13.31,13.31,0,0,0,4.75-.76c-1.14,0-3.15-1.56-3.15-6.09s4.84-6.18,4.84-6.18c-1.85,0-10-11.22-10-17.61a12.87,12.87,0,0,1,4.43-9.78c-3.09,0-10.09,2.78-10.09,11.33S223,60.31,223,62.26s-1.13,3.19-3.6,3.19-9.24-3.19-9.24-8.79,3.17-5.11,3.17-11.91S208,27.36,208,27.36s-5.35,10.61-5.35,17.4,3.17,6.31,3.17,11.91c0,4-3.43,6.74-6.3,8a8.11,8.11,0,0,1-2.95.79l-.27,0C194,65.35,193,64.14,193,62.26s4.94-8.34,4.94-16.89-7-11.33-10.09-11.33a12.87,12.87,0,0,1,4.43,9.78c0,6.38-8.13,17.61-10,17.61,0,0,4.84,1.65,4.84,6.18s-2,6.09-3.15,6.09a13.31,13.31,0,0,0,4.75.76c2.5,0,8-1.43,10.94-1.87a9.84,9.84,0,0,1,1.32-.13c2.19,0,4.85.86,4.85,2.95,0,1.1-1.1,5-2.37,8.46V85h-3.22l-4.88,8.6h8.11V118.1a11.2,11.2,0,0,0,.59,3.66,13.42,13.42,0,0,0,2,3.57l2.25,2.78a33.89,33.89,0,0,0,2.34,2.59,41.72,41.72,0,0,0,3.57,3.17,14,14,0,0,0,4.15,2.3,8.81,8.81,0,0,0,4.93.15,9.74,9.74,0,0,0,4.15-2.25,11.71,11.71,0,0,0,2.78-3.91,10.7,10.7,0,0,0,.93-4.83l-8.3-8.3a10.08,10.08,0,0,1-.83,4.88,11.48,11.48,0,0,1-2.88,4,13.59,13.59,0,0,1-2.34,1.71,4.54,4.54,0,0,1-2.64.63,1.75,1.75,0,0,1-1.86-1.66v-33h6l4.88-8.6H213c-.25-.64-.5-1.31-.73-2a38.12,38.12,0,0,1-2.05-7.58A2.74,2.74,0,0,1,212.22,73Zm56.25,12.41a8.92,8.92,0,0,1,4.35,1.56,11.66,11.66,0,0,1,3.32,3.47A14.35,14.35,0,0,1,278,94.85a10.29,10.29,0,0,1,.1,4.44,6.4,6.4,0,0,1-2.1,3.57,7.64,7.64,0,0,1-4.69,1.66,6.11,6.11,0,0,1-3.12-.59,6.69,6.69,0,0,1-2.3-1.86,7.1,7.1,0,0,1-1.32-2.69,6.13,6.13,0,0,1,0-3.08,13.23,13.23,0,0,0-3.17,1.22q-1.81.93-3.86,2.15t-4.1,2.59l-3.81,2.54v31.65l-8.79-8.5V93.68h-7.32L238.39,85h11.23V99.44q2.15-2.54,4.44-5.13a52.52,52.52,0,0,1,4.15-4.25q.78-.68,2-1.51A24,24,0,0,1,262.71,87a18.19,18.19,0,0,1,2.83-1.22A7.62,7.62,0,0,1,268.48,85.38ZM317.59,85a6.37,6.37,0,0,1,4.54,1.37q1.41,1.37,1.42,4.49v45.61l-6.25-6.06a28.89,28.89,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.45,25.45,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.44,9.44,0,0,1-1.17-2.44,18.47,18.47,0,0,1-.93-6.35,12.26,12.26,0,0,1,.44-3,12.46,12.46,0,0,1,1.56-3.52,12.8,12.8,0,0,1,2.2-2.54,13,13,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.2,22.2,0,0,0,4.44-2.1,11.17,11.17,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H284.38l4.88-8.6Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.64,25.64,0,0,0-3.42,1.51,20.29,20.29,0,0,0-3.27,2.15,18,18,0,0,0-2.73,2.73,7.87,7.87,0,0,0-1.61,3.37,15.31,15.31,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.83,5.83,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.69,16.69,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.14,26.14,0,0,0,3.12-1.51,23.28,23.28,0,0,0,3.71-2.59,23.75,23.75,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm43-2.25q1,2.34,2.1,5t2.35,5.37q1.22,2.74,2.44,5.52t2.39,5.23q2.64,6,5.47,11.82h-5.67a6.68,6.68,0,0,1-3.22-1.08,6,6,0,0,1-2.64-2.93q-.88-2-2.1-4.54l-2.49-5.27q-1.27-2.69-2.49-5.23t-2.2-4.49a13.45,13.45,0,0,0-1.42-2.34,2.06,2.06,0,0,0-1.51-.83,4,4,0,0,0-2.1.63,31.09,31.09,0,0,0-3.08,2.05l-.73.54a5.43,5.43,0,0,1-.73.44l-.68.59v22.56l-8.79-8.5V73.27h-1.37a4.09,4.09,0,0,1-3.22-1.32,8.89,8.89,0,0,1-1.76-3,16.23,16.23,0,0,1-.88-4.3h16v42.68l23.34-22.17,5.08,7.42-12.79,9.57a5.55,5.55,0,0,1,.34.59Zm57.81,21.2a7.43,7.43,0,0,1-1.12,4.69,11.36,11.36,0,0,1-3.57,3.47,21.37,21.37,0,0,1-5.08,2.3,31.92,31.92,0,0,1-5.71,1.22,35.46,35.46,0,0,1-5.47.24,17.72,17.72,0,0,1-4.25-.59,19.2,19.2,0,0,1-10.16-7.67q-4.1-5.81-7.23-16.46l.78-2.73q1.27,2.93,2.93,6,1.37,2.54,3.27,5.47a40.31,40.31,0,0,0,4.15,5.37,10.69,10.69,0,0,0,5.47,3.22,18.71,18.71,0,0,0,6.45.44,17.25,17.25,0,0,0,6-1.71,9.88,9.88,0,0,0,4-3.32,4.8,4.8,0,0,0,.59-4.2q-.68-2.25-4.3-4.49-1.86-1.17-3.61-2.15a40.87,40.87,0,0,1-3.76-2.39q-2-1.42-4.44-3.52a66.52,66.52,0,0,1-5.57-5.52,12.34,12.34,0,0,1-3.13-5.76,8.72,8.72,0,0,1,.54-5.42,9.45,9.45,0,0,1,3.81-4.15,14.59,14.59,0,0,1,6.69-2h15.73l-4.88,8.6H391A1.87,1.87,0,0,0,389,94.9a5.22,5.22,0,0,0,.29,3.22,15,15,0,0,0,2.3,4,19.19,19.19,0,0,0,3.86,3.76,43.71,43.71,0,0,0,6.35,3.86,58.21,58.21,0,0,1,6.4,3.71,21.53,21.53,0,0,1,5,4.64A11.84,11.84,0,0,1,415.56,124.64Zm37.36-38.78q5.57-2.25,9-.68t3.47,5.76v45.52l-8.79-8.5V97.29q0-2.54-1.76-3.27t-4.39.73q-1.66.88-3.91,2.15t-4.64,2.69q-2.39,1.42-4.84,2.78l-4.39,2.44v31.65l-8.79-8.5V73.27h-1.27a4.09,4.09,0,0,1-3.22-1.32,8.88,8.88,0,0,1-1.76-3,16.28,16.28,0,0,1-.88-4.3H432.7V99.93l3.61-2.64,3.61-2.69,3.22-2.44q1.47-1.12,2.54-1.9,2-1.37,3.76-2.54A21.35,21.35,0,0,1,452.92,85.87Z"></path>
</svg>
You can check the result on this test site.
Test Site
You can do it like this:
* {margin: 0; padding: 0; box-sizing: border-box}
svg {width: 500px; height: 150px; max-width: 100%; background: Khaki}
.cls-1 {fill: none; stroke: #8B0000; stroke-width: 2; stroke-miterlimit: 5}
.PhIOtjDr_0 {
stroke-dasharray: 2948 2950;
stroke-dashoffset: 2949;
animation: PhIOtjDr_draw 6666ms ease-in forwards;
}
#keyframes PhIOtjDr_draw {
100% {stroke-dashoffset: 0}
}
#keyframes PhIOtjDr_fade {
0% {stroke-opacity: 1}
97.1830985915493% {stroke-opacity: 1}
100% {stroke-opacity: 0}
}
#logo:hover .PhIOtjDr_0 {
fill: #8B0000;
}
<svg id="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 600 140.63">
<defs>
</defs>
<path class="cls-1 PhIOtjDr_0" d="M83.9,93.58H81.26V141a13.39,13.39,0,0,1-2.54,8.45A17.45,17.45,0,0,1,73,154.34a22.66,22.66,0,0,1-6.54,2.34,27.14,27.14,0,0,1-6.2.44,22.94,22.94,0,0,1-5.67-1,41.64,41.64,0,0,1-5-1.9,39.58,39.58,0,0,1-10.16-7l2.73-6.35a11.3,11.3,0,0,0,1.37,1.56q.78.78,2.2,2.1t3.66,3.17a36.14,36.14,0,0,0,5.81,4.15A15.89,15.89,0,0,0,60,153.65a10.6,10.6,0,0,0,4.3-.1,20.7,20.7,0,0,0,4.4-1.66,6.62,6.62,0,0,0,2.88-3.08,9,9,0,0,0,.93-3.76V125.33a36.24,36.24,0,0,1-3,3.22,27.72,27.72,0,0,1-3.81,2.93,38.67,38.67,0,0,1-4.88,2.69,35.31,35.31,0,0,1-5.47,2,20.56,20.56,0,0,1-5.47.78A14.33,14.33,0,0,1,43,135.29a14.88,14.88,0,0,1-5-4,14.47,14.47,0,0,1-2.83-5.76,17.74,17.74,0,0,1-.29-7.18A34.27,34.27,0,0,1,36.92,111a53,53,0,0,1,3.57-7.23q2.1-3.56,4.25-6.89,1.27-2,2.05-3.32H34.57L39.46,85H57.82q-1.76,2.93-3.08,5.27t-2.93,5.27q-1.61,2.93-3.08,5.86a50.48,50.48,0,0,0-4.54,13,24.23,24.23,0,0,0-.24,9.23,5.92,5.92,0,0,0,3,3.81,12,12,0,0,0,7,.78q4.3-.59,10.26-4.59a36.93,36.93,0,0,0,4.59-3.52q2.05-1.85,3.61-3.52V93.58H65.24L70.13,85H88.88Zm44-8.6a6.37,6.37,0,0,1,4.54,1.37q1.42,1.37,1.42,4.49v45.61l-6.25-6.06a28.9,28.9,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.44,25.44,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.46,9.46,0,0,1-1.17-2.44,18.54,18.54,0,0,1-.93-6.35,12.31,12.31,0,0,1,.44-3,12.48,12.48,0,0,1,1.56-3.52,12.82,12.82,0,0,1,2.2-2.54,13.06,13.06,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.21,22.21,0,0,0,4.44-2.1,11.16,11.16,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H94.73L99.62,85Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.6,25.6,0,0,0-3.42,1.51,20.33,20.33,0,0,0-3.27,2.15,18.09,18.09,0,0,0-2.73,2.73,7.88,7.88,0,0,0-1.61,3.37,15.32,15.32,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.84,5.84,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.7,16.7,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.18,26.18,0,0,0,3.13-1.51,23.3,23.3,0,0,0,3.71-2.59,23.69,23.69,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm53.72-18.07a47.61,47.61,0,0,1,4.79,5.71,43.51,43.51,0,0,1,4.35,7.57,36.79,36.79,0,0,1,2.73,9.18,33.44,33.44,0,0,1,0,10.65,38.5,38.5,0,0,1-2.2,8.06,31.4,31.4,0,0,1-3.17,6,25,25,0,0,1-3.76,4.35,23.52,23.52,0,0,1-4.05,3,25.4,25.4,0,0,1-10.26,3.32,30.93,30.93,0,0,0,4.3-2.64,31.77,31.77,0,0,0,3.81-3.37,22.36,22.36,0,0,0,3.52-4.84,43.58,43.58,0,0,0,2.49-5.47,29.41,29.41,0,0,0,1.86-9.77q0-2.44,0-5.18a17.68,17.68,0,0,0-1.66-6.54,27.73,27.73,0,0,0-3.37-5.52,24.91,24.91,0,0,0-3.86-4,10.54,10.54,0,0,0-2.93-1.86l-14.94,9v31.16l-8.79-8.5V93.68h-7.33L145.13,85h11.23V99.83l11.82-9L176,85a11.25,11.25,0,0,1,1.37,1.17Zm25.69-3.74q-.21.56-.42,1.11h.42ZM212.22,73a7.9,7.9,0,0,1,2.8-.49c2.19,0,9.32,2,12.26,2a13.31,13.31,0,0,0,4.75-.76c-1.14,0-3.15-1.56-3.15-6.09s4.84-6.18,4.84-6.18c-1.85,0-10-11.22-10-17.61a12.87,12.87,0,0,1,4.43-9.78c-3.09,0-10.09,2.78-10.09,11.33S223,60.31,223,62.26s-1.13,3.19-3.6,3.19-9.24-3.19-9.24-8.79,3.17-5.11,3.17-11.91S208,27.36,208,27.36s-5.35,10.61-5.35,17.4,3.17,6.31,3.17,11.91c0,4-3.43,6.74-6.3,8a8.11,8.11,0,0,1-2.95.79l-.27,0C194,65.35,193,64.14,193,62.26s4.94-8.34,4.94-16.89-7-11.33-10.09-11.33a12.87,12.87,0,0,1,4.43,9.78c0,6.38-8.13,17.61-10,17.61,0,0,4.84,1.65,4.84,6.18s-2,6.09-3.15,6.09a13.31,13.31,0,0,0,4.75.76c2.5,0,8-1.43,10.94-1.87a9.84,9.84,0,0,1,1.32-.13c2.19,0,4.85.86,4.85,2.95,0,1.1-1.1,5-2.37,8.46V85h-3.22l-4.88,8.6h8.11V118.1a11.2,11.2,0,0,0,.59,3.66,13.42,13.42,0,0,0,2,3.57l2.25,2.78a33.89,33.89,0,0,0,2.34,2.59,41.72,41.72,0,0,0,3.57,3.17,14,14,0,0,0,4.15,2.3,8.81,8.81,0,0,0,4.93.15,9.74,9.74,0,0,0,4.15-2.25,11.71,11.71,0,0,0,2.78-3.91,10.7,10.7,0,0,0,.93-4.83l-8.3-8.3a10.08,10.08,0,0,1-.83,4.88,11.48,11.48,0,0,1-2.88,4,13.59,13.59,0,0,1-2.34,1.71,4.54,4.54,0,0,1-2.64.63,1.75,1.75,0,0,1-1.86-1.66v-33h6l4.88-8.6H213c-.25-.64-.5-1.31-.73-2a38.12,38.12,0,0,1-2.05-7.58A2.74,2.74,0,0,1,212.22,73Zm56.25,12.41a8.92,8.92,0,0,1,4.35,1.56,11.66,11.66,0,0,1,3.32,3.47A14.35,14.35,0,0,1,278,94.85a10.29,10.29,0,0,1,.1,4.44,6.4,6.4,0,0,1-2.1,3.57,7.64,7.64,0,0,1-4.69,1.66,6.11,6.11,0,0,1-3.12-.59,6.69,6.69,0,0,1-2.3-1.86,7.1,7.1,0,0,1-1.32-2.69,6.13,6.13,0,0,1,0-3.08,13.23,13.23,0,0,0-3.17,1.22q-1.81.93-3.86,2.15t-4.1,2.59l-3.81,2.54v31.65l-8.79-8.5V93.68h-7.32L238.39,85h11.23V99.44q2.15-2.54,4.44-5.13a52.52,52.52,0,0,1,4.15-4.25q.78-.68,2-1.51A24,24,0,0,1,262.71,87a18.19,18.19,0,0,1,2.83-1.22A7.62,7.62,0,0,1,268.48,85.38ZM317.59,85a6.37,6.37,0,0,1,4.54,1.37q1.41,1.37,1.42,4.49v45.61l-6.25-6.06a28.89,28.89,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.45,25.45,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.44,9.44,0,0,1-1.17-2.44,18.47,18.47,0,0,1-.93-6.35,12.26,12.26,0,0,1,.44-3,12.46,12.46,0,0,1,1.56-3.52,12.8,12.8,0,0,1,2.2-2.54,13,13,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.2,22.2,0,0,0,4.44-2.1,11.17,11.17,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H284.38l4.88-8.6Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.64,25.64,0,0,0-3.42,1.51,20.29,20.29,0,0,0-3.27,2.15,18,18,0,0,0-2.73,2.73,7.87,7.87,0,0,0-1.61,3.37,15.31,15.31,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.83,5.83,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.69,16.69,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.14,26.14,0,0,0,3.12-1.51,23.28,23.28,0,0,0,3.71-2.59,23.75,23.75,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm43-2.25q1,2.34,2.1,5t2.35,5.37q1.22,2.74,2.44,5.52t2.39,5.23q2.64,6,5.47,11.82h-5.67a6.68,6.68,0,0,1-3.22-1.08,6,6,0,0,1-2.64-2.93q-.88-2-2.1-4.54l-2.49-5.27q-1.27-2.69-2.49-5.23t-2.2-4.49a13.45,13.45,0,0,0-1.42-2.34,2.06,2.06,0,0,0-1.51-.83,4,4,0,0,0-2.1.63,31.09,31.09,0,0,0-3.08,2.05l-.73.54a5.43,5.43,0,0,1-.73.44l-.68.59v22.56l-8.79-8.5V73.27h-1.37a4.09,4.09,0,0,1-3.22-1.32,8.89,8.89,0,0,1-1.76-3,16.23,16.23,0,0,1-.88-4.3h16v42.68l23.34-22.17,5.08,7.42-12.79,9.57a5.55,5.55,0,0,1,.34.59Zm57.81,21.2a7.43,7.43,0,0,1-1.12,4.69,11.36,11.36,0,0,1-3.57,3.47,21.37,21.37,0,0,1-5.08,2.3,31.92,31.92,0,0,1-5.71,1.22,35.46,35.46,0,0,1-5.47.24,17.72,17.72,0,0,1-4.25-.59,19.2,19.2,0,0,1-10.16-7.67q-4.1-5.81-7.23-16.46l.78-2.73q1.27,2.93,2.93,6,1.37,2.54,3.27,5.47a40.31,40.31,0,0,0,4.15,5.37,10.69,10.69,0,0,0,5.47,3.22,18.71,18.71,0,0,0,6.45.44,17.25,17.25,0,0,0,6-1.71,9.88,9.88,0,0,0,4-3.32,4.8,4.8,0,0,0,.59-4.2q-.68-2.25-4.3-4.49-1.86-1.17-3.61-2.15a40.87,40.87,0,0,1-3.76-2.39q-2-1.42-4.44-3.52a66.52,66.52,0,0,1-5.57-5.52,12.34,12.34,0,0,1-3.13-5.76,8.72,8.72,0,0,1,.54-5.42,9.45,9.45,0,0,1,3.81-4.15,14.59,14.59,0,0,1,6.69-2h15.73l-4.88,8.6H391A1.87,1.87,0,0,0,389,94.9a5.22,5.22,0,0,0,.29,3.22,15,15,0,0,0,2.3,4,19.19,19.19,0,0,0,3.86,3.76,43.71,43.71,0,0,0,6.35,3.86,58.21,58.21,0,0,1,6.4,3.71,21.53,21.53,0,0,1,5,4.64A11.84,11.84,0,0,1,415.56,124.64Zm37.36-38.78q5.57-2.25,9-.68t3.47,5.76v45.52l-8.79-8.5V97.29q0-2.54-1.76-3.27t-4.39.73q-1.66.88-3.91,2.15t-4.64,2.69q-2.39,1.42-4.84,2.78l-4.39,2.44v31.65l-8.79-8.5V73.27h-1.27a4.09,4.09,0,0,1-3.22-1.32,8.88,8.88,0,0,1-1.76-3,16.28,16.28,0,0,1-.88-4.3H432.7V99.93l3.61-2.64,3.61-2.69,3.22-2.44q1.47-1.12,2.54-1.9,2-1.37,3.76-2.54A21.35,21.35,0,0,1,452.92,85.87Z"></path>
</svg>
Moved the width and height of the svg element out of the inline styling, added max-width: 100% for responsiveness and some background for easier demonstration.
How can I put an animation in the path of my circular progress bar?
I have a circular progress bar that has two paths. On one of those paths increases in length as the data comes in, eventually turning the entire circle red.
SVG HTML
<path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" stroke-width="4" fill-opacity="0">
</path>
<path id="path2" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#EB483F" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.416, 295.416; stroke-dashoffset: 250"></path>
</svg>
CSS (Just makes loading of red path smoother)
#path2 {
-webkit-transition-property: stroke-dashoffset; /* Safari */
transition-property: stroke-dashoffset;
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 0.3s;
}
.viewbox {
width: 50%;
}
https://jsfiddle.net/z5yb5kr9/
I would like for the remaining gray portion to have an animation such as a small div running through it lighting it up. Something similar to this
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
I believe that I need to add some sort of keyframe animation and put the div inside the Path of the svg but I am not sure exactly what the method for doing so is.
Here's one way you could do the pulsing anumation on a circular progress bar.
In order to get the pulse effect showing inside a growing progress bar, the most obvious way is to create the pulse effect as it's own animation, then mask it with the actually progress arc.
Firstly, let's start with the plain red progress bar. I've added a grow animation for testing.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<circle id="grey" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)"
stroke="#A9B0B7" stroke-width="4" fill="none"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#EB483F" stroke-width="6" fill="none"/>
</svg>
Next, let's create our pulse animation which mimics the example you gave in an answer that was deleted.
.viewbox {
width: 50%;
}
#pulse {
stroke-dasharray: 0 0 0 296;
animation: pulse 1.5s linear infinite;
}
#keyframes pulse {
33% { stroke-dasharray: 0 0 148 296; }
66% { stroke-dasharray: 0 50 200 296; }
100% { stroke-dasharray: 0 296 0 296; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#EB483F"/>
<circle id="pulse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
</svg>
It's just a translucent circle (with a dash animation) on a red background.
The penultimate step is to convert the first example into the form we need for a mask. In masks, black is transparent and white is opaque.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<rect width="100" height="100" fill="black"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="6" fill="none"/>
</svg>
The final step is to combine the last two steps. We turn the previous step into a proper <mask> and use it to mask the pulse animation.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
#pulse {
stroke-dasharray: 0 0 0 296;
animation: pulse 1.5s linear infinite;
}
#keyframes pulse {
33% { stroke-dasharray: 0 0 148 296; }
66% { stroke-dasharray: 0 50 200 296; }
100% { stroke-dasharray: 0 296 0 296; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<defs>
<mask id="progress-as-mask" >
<rect width="100" height="100" fill="black"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="6" fill="none"/>
</mask>
</defs>
<circle id="grey" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)"
stroke="#A9B0B7" stroke-width="4" fill="none"/>
<g mask="url(#progress-as-mask)">
<rect width="100" height="100" fill="#EB483F"/>
<circle id="pulse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
</g>
</svg>
You weren't entirely clear on what you wanted. But hopefully, this has at least got you started.
IE / Edge SVG loading/rendering issue
When I open my website in Microsoft Edge, Everything looks mostly okay, except that the left-hand side of the logo does not keep time with the right-hand side -- the B comes in nice and smooth, but the S is slightly behind in timing and very jerky. Refreshed several times and it is always exactly the same. Also, if I scroll down and back up to the top in Edge, the S is sometimes only partly drawn (i,e. the bottom of it is missing) even though it was drawn completely when I first open the page.
#keyframes bounce-in {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
#logo {
animation: bounce-in 700ms ease-in-out forwards;
margin-bottom: 20px;
max-height: 70vh;
}
.s {
transform-origin: 50% 50%;
stroke-dasharray: 128px;
stroke-dashoffset: -128px;
animation: draw-s 1500ms 500ms forwards;
}
.b-back {
transform-origin: 50% 50%;
stroke-dasharray: 93px;
stroke-dashoffset: -93px;
animation: draw-b-back 1500ms 500ms forwards;
}
.b-front-2 {
transform-origin: 50% 50%;
stroke-dasharray: 124px;
animation: draw-b-front 1500ms 500ms forwards;
transform: translateX(-0.2px);
}
.logo-shadow {
opacity: 0;
animation: draw-shadow 1s ease 1500ms forwards;
}
#keyframes draw-s {
from {
stroke-dashoffset: 128px;
}
to {
stroke-dashoffset: 0px;
}
}
#keyframes draw-b-back {
from {
stroke-dashoffset: 93px;
}
to {
stroke-dashoffset: 0px;
}
}
#keyframes draw-b-front {
from {
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: 124px;
}
}
#keyframes draw-shadow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.8 120.8">
<style>
.logo-circle {
fill: #3BB383;
}
.logo-shadow {
fill: #349F74;
}
.logo-text {
fill: none;
stroke: #FFFFFF;
stroke-width: 8;
stroke-miterlimit: 10;
}
.logo-text-2 {
fill: none;
stroke: #3BB383;
stroke-width: 9;
stroke-miterlimit: 10;
}
</style>
<path class="logo-circle" d="M117.8 60.3c.1 31.1-25.1 56.4-56.3 56.5-31.1.1-56.4-25.1-56.5-56.3C4.9 29.4 30.1 4.1 61.3 4c31.1-.1 56.4 25.1 56.5 56.3z" />
<path class="logo-shadow" d="M117.4 53.6L84.5 20.7l-.8.8c-5.2-5.7-13.3-9.7-22.1-9.7-15.8 0-28.4 12.1-28.4 26.5 0 8.9-.1 17.7 7.3 22.4L39 66.2c.5.5 1 1.1 1.4 1.9 1.9 3.9 7.4 5.5 10.2 8.8 4.3 5 4.5 11.6 4.4 17.8-.1 8.2-11.4 9.1-13.9 2.7-.6-.7-1-1.5-1.2-2.4-1.1 2.4-1.4 5.8-4.2 5.9l14.8 14.9c3.5.7 7.2 1 10.9 1 31.1-.1 56.3-25.4 56.3-56.5.1-2.3-.1-4.5-.3-6.7z"
/>
<path class="logo-text s" d="M60.6 15.8c-12 0-27.7 10.6-27.7 29.3C32.9 64 52.3 72 55.6 84.5c3 11.3-2 16.3-5 17.3-6 2-12-3-14-6" />
<path class="logo-text b-front" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
<path class="logo-text-2 b-front-2" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
<path class="logo-text b-back" d="M66.6 14.6v92.2" />
</svg>
Also, the graph/circle animations work, but they don't do exactly the same thing as they do in Chrome. In Chrome the circles do a full 360 degrees before coming to their final positions, in Edge they just go from the top to their final position (i.e. only turn 270°, 180° or 90°).
.graph {
margin: 20px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: 628px;
stroke-dashoffset: -628px;
transform-origin: center;
}
.graph-25 {
animation: graph-25 1000ms ease forwards;
}
.graph-50 {
animation: graph-50 1000ms ease forwards;
}
.graph-75 {
animation: graph-75 1000ms ease forwards;
}
#keyframes graph-25 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 157px;
transform: rotate(0deg);
}
}
#keyframes graph-50 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 314px;
transform: rotate(0deg);
}
}
#keyframes graph-75 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 471px;
transform: rotate(0deg);
}
}
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<div class="large-4 column align">
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line ps graph-75" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
<div class="large-4 column align">
<svg width="250" height="250" class="graph illustrator">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#EA954A" />
<circle class="graph-line ai graph-50" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
<div class="large- column align">
<svg width="250" height="250" class="graph sketch">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#F4D24B" />
<circle class="graph-line sk graph-25" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
Anyone know how to fix these issues?
Here's the website: http://seanbaines.com
Svg scale path at a center point (pulsating)
I am trying to animate several paths in an svg around two circles. My goal is to scale the paths at center, as if they were pulsating. I've looked at every answer on stackoverflow to figure out how to achieve this. The closest solution I have found did not wok.
Here is a jsfiddle of what I have so far. As you can see, the paths are scaling away/towards the origin. If there is no way to achieve this with CSS, is it possible to achieve this with a javascript framework like Velocity.js?
This is the SVG:
<div class="wrapper">
<svg version="1.1" viewBox="20 20 60 60" >
<g class="icon-sun">
<path class="icon-sun-beam"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/>
<path class="icon-sun-beam"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/>
<path class="icon-sun-beam"
d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/>
<path class="icon-sun-beam"
d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/>
<path class="icon-sun-beam"
d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/>
<path class="icon-sun-beam"
d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/>
<path class="icon-sun-beam"
d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/>
<path class="icon-sun-beam"
d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/>
<circle class="icon-sun-outline"
cx="50.034"
cy="50"
r="11.999"/>
<circle class="icon-sun-fill"
fill="#FFFFFF"
cx="50.034"
cy="50"
r="7.999"/>
</g>
</svg>
</div>
And here is the CSS:
.wrapper {
width: 100px;
text-align: center;
}
.icon-sun-beam {
animation-name: scale;
animation-duration: 3s;
animation-iteration-count: infinite;
transform-origin: 50px 50px;
animation-timing-function: linear;
animation-fill-mode: both;
animation-direction: alternate;
}
.icon-sun-beam:nth-child(even) {
animation-delay: 4.5s, 4.5s;
}
.icon-sun {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration: 18s;
animation-timing-function: linear;
transform-origin: 50px 50px;
}
svg {
shape-rendering: geometricPrecision;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#keyframes scale {
0% {
transform: scale(0.85, 0.85);
}
100% {
transform: scale(1.35, 1.35);
}
}
There is a simple solution, that is cross-browser.
Just give each of your sunbeams its own absolute transform-origin.
.wrapper {
width: 100px;
text-align: center;
}
.icon-sun-beam {
animation-name: scale;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: both;
animation-direction: alternate;
}
.icon-sun-beam:nth-child(even) {
animation-delay: 4.5s, 4.5s;
}
.icon-sun {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration: 18s;
animation-timing-function: linear;
transform-origin: 50px 50px;
}
svg {
shape-rendering: geometricPrecision;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#keyframes scale {
0% {
transform: scale(0.85, 0.85);
}
100% {
transform: scale(1.35, 1.35);
}
}
<div class="wrapper">
<svg version="1.1" viewBox="20 20 60 60" >
<g class="icon-sun">
<path class="icon-sun-beam" style="transform-origin: 70.0px 50.0px;"
d="M72.03,51.999
h-3.998
c-1.105,0-2-0.896-2-1.999
s0.895-2,2-2h3.998
c1.104,0,2,0.896,2,2
S73.136,51.999,72.03,51.999z"/>
<path class="icon-sun-beam" style="transform-origin: 64.2px 35.9px;"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/>
<path class="icon-sun-beam" style="transform-origin: 50.0px 30.0px;"
d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/>
<path class="icon-sun-beam" style="transform-origin: 35.9px 35.9px;"
d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/>
<path class="icon-sun-beam" style="transform-origin: 30.0px 50.0px;"
d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/>
<path class="icon-sun-beam" style="transform-origin: 35.9px 64.1px;"
d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/>
<path class="icon-sun-beam" style="transform-origin: 50.0px 70.0px;"
d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/>
<path class="icon-sun-beam" style="transform-origin: 64.2px 64.1px;"
d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/>
<circle class="icon-sun-outline"
cx="50.034"
cy="50"
r="11.999"/>
<circle class="icon-sun-fill"
fill="#FFFFFF"
cx="50.034"
cy="50"
r="7.999"/>
</g>
</svg>
</div>
I ended up using GSAP library to animate the SVG. I chose to do this because there was no solution that would have worked without breaking the animation on either Chrome or Firefox. This is the code that I have tested which works on IE 11, Firefox and Chrome. I used Jquery and TweenMax libraries.
$(document).ready(function() {
var sun = $(".icon-sun");
var sunBeamEven = $(".icon-sun-beam:even");
var sunBeamOdd = $(".icon-sun-beam:odd");
function animateSun(){
TweenMax.to(sun, 12, {rotation:"+=360", svgOrigin:"50 50", smoothOrigin:true, repeat:-1, ease:Linear.easeNone});
TweenMax.to(sunBeamEven, 4, {scale:0.5, transformOrigin:"50% 50%", repeat:-1, yoyo:true, ease:Linear.easeNone});
TweenMax.to(sunBeamOdd, 4, {scale:0.5, transformOrigin:"50% 50%", repeat:-1, yoyo:true, ease:Linear.easeNone, delay:3});
}
animateSun();
svg rotate shape around its centre endlessly
I'm trying to rotate a svg shape around its centre endlessly. This is what I have so far. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55" xml:space="preserve"> <g> <polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1 384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732 223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064 266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795 463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16 584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936 " transform="rotate(15, 40, 40)" dur="0.1s" calcMode="discrete" repeatCount="indefinite"/> <circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/> </g> </svg> …but can't get it to work. Do I need to rotate it with javascript cause I think I've seen something similar using solely xml. Also, the second shape should be in the centre of the first shape too. Thanks for help!
Are you looking for something like this?
http://jsfiddle.net/t97w9cqm/7/
I'm just rotating it with CSS animations.
#Layer_1 {
transform-origin: 50% 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
The key is the transform-origin
You are missing the animation, add the animation and you should be set. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55" xml:space="preserve"> <g> <polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1 384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732 223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064 266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795 463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16 584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936" calcMode="discrete"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 398 639" to="360 398 639" dur="1s" repeatCount="indefinite"/> </polygon> <circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/> </g> </svg> Tested successfully in Chrome Version 46.0.2490.80 m on Windows 7. I have the 'star' spinning with the black ring toward the center of the star.