We Keep Coding

Is there a way to start the svg circle stroke fill from opacity 0 without the visible edges?

I have the SVG circle chart which has a gradient stroke. My problem is that I can not figure out how to do the gradient invisible from the start with opacity 0 and make it opacity 1 at the end. What do I need to get is at the image bellow.
What do I have until now is in my snippet bellow
/*graf animacie*/
.circle-chart__circle {
animation: circle-chart-fill 2s reverse; /* 1 */
transform: rotate(-90deg); /* 2, 3 */
transform-origin: center; /* 4 */
}
.circle-chart__circle--negative {
transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
}
.circle-chart__info {
animation: circle-chart-appear 2s forwards;
opacity: 0;
transform: translateY(0.3em);
}
#keyframes circle-chart-fill {
to { stroke-dasharray: 0 100; }
}
#keyframes circle-chart-appear {
to {
opacity: 1;
transform: translateY(0);
}
}
.grid {
display: grid;
grid-column-gap: 1em;
grid-row-gap: 1em;
grid-template-columns: repeat(1, 1fr);
}
#media (min-width: 31em) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
<div style="margin: auto; display: contents; text-align: center;">
<section>
<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="150" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<circle class="circle-chart__background" stroke="white" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<circle class="circle-chart__circle circle-chart__circle--negative" stroke="url(#gradient)" stroke-width="2" stroke-dasharray="90,100" stroke-linecap="" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<g class="circle-chart__info">
<text class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">DEMO</text>
</g>
<defs>
<linearGradient id="gradient" x1="1" y1="1" x2="0" y2="0">
<stop offset="0.01" stop-color="#fdfafa"></stop>
<stop offset="0.20" style="stop-color:#e5b4b6"/>
<stop offset="0.80" style="stop-color:#c2545a"/>
<stop offset="1" stop-color="#AE1515"></stop>
</linearGradient>
</defs>
</svg>
</section>
</div>
Thanks in advance for your help.

What you need here is a "conic gradient". Unfortunately SVG doesn't support conic gradients natively. They are supported in CSS, but you can't yet apply CSS gradients to SVG elements.
Option 1 (Not really an option :)
You could apply a conic gradient to an HTML element, and then mask it with an SVG mask to produce the final effect. Unfortunately masking HTML elements with SVG masks, currently only works in Firefox.
DEMO (Firefox only)
.chart-container {
/* positioned parent is required in order for us to stack the children on top of each other */
position: relative;
}
.chart-container .conic {
width: 200px;
height: 200px;
background: conic-gradient(rgba(176, 37, 44, 1) 34deg, rgba(176, 37, 44, 0) 326deg);
mask: url(#div-mask);
}
.chart-container svg {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.div-mask-path {
stroke-dasharray: 100 100;
animation: circle-chart-fill 2s forwards;
}
#keyframes circle-chart-fill {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
<div class="chart-container">
<div class="conic"/>
<svg viewBox="0 0 100 100">
<mask id="div-mask" maskContentUnits="objectBoundingBox">
<path class="div-mask-path"
d="M 0.2706,0.1723
A 0.40,0.40 0 0 0 0.5,0.90
A 0.40,0.40 0 0 0 0.7294,0.1723"
fill="none" stroke="white" stroke-width="0.12"
pathLength="100"/>
</mask>
</svg>
</div>
Option 2
If you know what your page background colour is going to be. You can use a similar technique as above, but instead of masking the HTML element, you cover it with an SVG element with a hole cut in it.
Demo (should work in all browsers)
.chart-container {
/* positioned parent is required in order for us to stack the children on top of each other */
position: relative;
}
.chart-container .conic {
width: 200px;
height: 200px;
background: conic-gradient(rgba(176, 37, 44, 1) 34deg, rgba(176, 37, 44, 0) 326deg);
}
.chart-container svg {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.div-mask-path {
stroke-dasharray: 2.025 2.025;
animation: circle-chart-fill 2s forwards;
}
#keyframes circle-chart-fill {
from { stroke-dashoffset: 2.025; }
to { stroke-dashoffset: 0; }
}
<div class="chart-container">
<div class="conic"/>
<svg viewBox="0 0 100 100">
<defs>
<mask id="div-mask" maskContentUnits="objectBoundingBox">
<!-- mask is mostly solid (white parts) -->
<rect width="1" height="1" fill="white"/>
<!-- but has a hole cut in it (black path) -->
<path class="div-mask-path"
d="M 0.2706,0.1723
A 0.40,0.40 0 0 0 0.5,0.90
A 0.40,0.40 0 0 0 0.7294,0.1723"
fill="none" stroke="black" stroke-width="0.12"/>
</mask>
</defs>
<!-- use a white rectangle (matches page background)
to cover the <div> with the conic gradient -->
<rect width="100" height="100" fill="white" mask="url(#div-mask)"/>
</svg>
</div>
Option 3
Instead of using an <div> element with a conic gradient. Create a bitmap image that contains the conic gradient; include it in the SVG; mask that image instead.
Demo (should work in all browsers)
Note that I've messed up here and created a solid white-to-red PNG here, rather than a transparent-to-red one as you wanted. That's just a mistake on my part. I can't be bothered re-creating it now. I'll leave that to you :)
svg {
width: 200px;
}
.div-mask-path {
stroke-dasharray: 2.025 2.025;
animation: circle-chart-fill 2s forwards;
}
#keyframes circle-chart-fill {
from { stroke-dashoffset: 2.025; }
to { stroke-dashoffset: 0; }
}
<svg viewBox="0 0 100 100">
<defs>
<mask id="div-mask" maskContentUnits="objectBoundingBox">
<path class="div-mask-path"
d="M 0.2706,0.1723
A 0.40,0.40 0 0 0 0.5,0.90
A 0.40,0.40 0 0 0 0.7294,0.1723"
fill="none" stroke="white" stroke-width="0.12"/>
</mask>
</defs>
<image xlink:href="https://i.imgur.com/cqhjI45.png"
width="100" height="100"
mask="url(#div-mask)"/>
</svg>
Option 4
Create the gradient by aligning a sequence of SVG elements in a circle. Start with a transparent one and interpolate the colours around to the end point. Then mask that group of elements using the same technique as Option 3. This will work, but will result in a larger SVG because you'll be adding up to 256 extra elements to create that gradient sequence.
(Not demoed here)

Play SVG when entering viewport - Browser Support?

I have the following script that plays my SVGs when they scroll into view (i have several of these SVGs on the page). This works perfectly but only in Firefox! Is this the correct way to do it or is there a better code that will work on other browsers? Ideally, if it can't work on IE, and i am expecting this, then the SVG would just appear like an image and not animated. But i would expect it to work in all other browsers!
<div id="arrow-2id" class="arrow-2 leftarrows">
<!--START ARROW 2-->
<svg id="arrow2svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.009 303.044">
<script type="text/javascript">
var diva2 = document.getElementById("arrow-2id");
window.addEventListener("scroll", function() {
if (document.documentElement.scrollTop >= diva2.offsetTop - -500) {
diva2.classList.add("play");
}
}
);
</script>
<mask id="arrow2-mask1" maskUnits="userSpaceOnUse">
<path d="M272.304,11.13c-85-31.5-421.5,178.5-175,268.5"/>
</mask>
<mask id="arrow2-mask2" maskUnits="userSpaceOnUse">
<path d="M-3.696,293.63
c130.667-12.167,130.667,23.5,58.5-89.5"/>
</mask>
<path mask="url(#arrow2-mask1)" fill="#42A8FC" d="M74.443,277.599c-22.03-9.911-41.892-24.317-56.394-41.811c-32.086-38.702-16.961-81.441,14.377-119.45
c8.258-9.874,27.106-28.748,31.125-32.337C95.94,55.065,133.39,29.76,173.667,13.682c21.596-8.622,49.867-18.374,71.02-11.181
c10.227,3.479,20.322,12.379,20.322,14.696c-0.002,2.317-8.945-0.005-10.693-0.368c-5.762-1.199-13.512-0.332-19.262,0.301
c-22.932,2.51-47.227,13.269-68.383,23.897c-60.319,27.104-104.662,75.694-105.099,75.646
c-12.522,12.951-23.527,26.688-32.052,40.988c-32.137,53.904,3.738,93.021,50.723,109.687
C91.345,270.88,88.917,283.693,74.443,277.599z"/>
<path mask="url(#arrow2-mask2)" fill="#42A8FC" d="M74.443,277.599c-20.021,1.14-40.042,2.28-60.062,3.422c-16.744,0.952-18.679,22.91-2.629,21.996
c30.077-1.713,60.152-3.425,90.23-5.14c8.539-0.484,17.633-7.912,13.074-16.089c-13.158-23.591-26.316-47.181-39.471-70.771
c-6.476-11.604-30.8-2.861-23.525,10.185c8.394,15.048,19.787,31.097,28.182,46.146c5.811,8.531,5.436,9.656,5.436,9.656
L74.443,277.599z"/>
</svg>
<style>
.play #arrow2-mask1 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 478.362 478.362;
stroke-dashoffset: 0;
animation: brush2a 2s linear ;
animation-fill-mode: forwards;
}
.play #arrow2-mask2 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 203.128 203.128;
stroke-dashoffset: 0;
animation: brush2b 2s linear ;
animation-fill-mode: forwards;
}
#keyframes brush2a {
0% { stroke-dashoffset: 478.362; }
25% { stroke-dashoffset: 478.362; }
75% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
#keyframes brush2b {
0% { stroke-dashoffset: 203.128; }
80% { stroke-dashoffset: 203.128; }
100% { stroke-dashoffset: 0; }
}
</style>
<!--END ARROW 2-->
</div>

How to animate a CSS-loaded SVG background with JavaScript

I have the following SVG (shortened version).
.line {
width: 100%;
height: 500vh;
margin-top: 100px;
opacity: 0.8;
background:
linear-gradient(to bottom, #fff, transparent) top/100% 1024px no-repeat,
linear-gradient(to top, #fff, transparent) bottom/100% 128px no-repeat,
url(line.svg) top/768px;
}
<?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="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<style>
path {
transition: opacity 512ms ease-in-out;
}
.rise {
opacity: 0.2;
}
.fall {
opacity: 1;
}
</style>
<g>
<path fill="#070707" d="M109.021,87.07c1.871,1.233,1.874,3.713,3.569,5.022c0.051-0.372,0.073-0.78,0.042-1.163l-0.426-0.236
c2.157-5.078-5.299-7.254-8.281-7.586c-2.127-0.236-4.292-0.489-6.372-1.008c-2.521-0.63-3.054-1.987-4.201-4.195
c-0.397,5.932,5.381,6.908,9.51,7.333C104.642,85.419,107.502,86.07,109.021,87.07z"/>
<path fill="#070707" d="M200,199.422c-0.219,0.195-0.438,0.391-0.664,0.58H200V199.422z"/>
</g>
<script type="text/javascript"><![CDATA[
var els = document.querySelectorAll('path')
for (var i = 0, n = els.length; i < n; i++) {
var el = els[i]
animateIn(el, Math.floor(Math.random() * 2048))
}
function animateIn(el, stagger) {
setTimeout(function(){
el.classList.add('rise')
animateOut(el, 512)
}, stagger)
}
function animateOut(el, stagger) {
setTimeout(function(){
el.classList.add('fall')
animateIn(el, 512)
}, stagger)
}
]]></script>
</svg>
I don't think that works, but it's the gist of the code. Basically, I have added some JavaScript straight to the SVG, to animate the opacity of each separate path in and out. I want it to sort of "sparkle".
But this isn't working if I style an element with this .line class. It successfully draws the SVG in a repeating fashion, but it doesn't do the animation. I'm wondering how to accomplish this. I don't want to use a purely inline SVG which I could directly animate in a similar way, because I want to use this SVG on multiple pages and don't want to load it inline on each page. But if that's the only way to do it that would be good to know.
Do I need something like this?
Basically my HTML document is like this:
<html>
<body>
<section>something</section>
<section class='line'></section>
<section>something else</section>
</body>
</html>
The .line class sets the CSS background-image to the line.svg file.

EDIT3 (FINAL): What I alluded to in EDIT2 below IS possible and here it is, since I don't have your "line.svg" and I wanted to show a working snippet, I just inlined svg binary into my css , this should be interchangeable with a proper svg file (as in: if .line had background: url("line.svg") it will work identically to my example)
Next time PLEASE post the whole question before publishing. That took way too many edits due to the question being changed.
#keyframes shine {
0% {
opacity: .2;
}
100% {
opacity: 1;
}
}
.line {
/*transition: opacity 512ms ease-in-out;*/
animation: shine 1s ease-in-out infinite;
width: 50px;
height: 50px;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij48ZyBpZD0ic3VyZmFjZTEiPjxwYXRoIHN0eWxlPSIgIiBkPSJNIDQ0Ljg2MzI4MSA3IEwgMzguMTY3OTY5IDcgQyAzNi4zOTQ1MzEgNyAzNSA4LjI1IDM1IDEwIEwgMzUgMTQgTCAxNSAxNCBMIDE1IDEwIEMgMTUgOC4yNSAxMy41ODU5MzggNyAxMS44MTI1IDcgTCA1LjEzNjcxOSA3IEMgMy40MDYyNSA3IDIgOC4zNzUgMiAxMC4xNzU3ODEgTCAyIDM5LjY0MDYyNSBDIDIgNDEuNTU4NTk0IDMuMzgyODEzIDQzIDUuMTEzMjgxIDQzIEwgNDQuODg2NzE5IDQzIEMgNDYuNjE3MTg4IDQzIDQ4IDQxLjU1ODU5NCA0OCAzOS43NjE3MTkgTCA0OCAxMC4xNzU3ODEgQyA0OCA4LjA1ODU5NCA0Ni41OTM3NSA3IDQ0Ljg2MzI4MSA3IFogTSAxNSAzMyBDIDEyLjI0MjE4OCAzMyAxMCAzMC43NTc4MTMgMTAgMjggQyAxMCAyNS4yNDIxODggMTIuMjQyMTg4IDIzIDE1IDIzIEMgMTcuNzU3ODEzIDIzIDIwIDI1LjI0MjE4OCAyMCAyOCBDIDIwIDMwLjc1NzgxMyAxNy43NTc4MTMgMzMgMTUgMzMgWiBNIDM1IDMzIEMgMzIuMjQyMTg4IDMzIDMwIDMwLjc1NzgxMyAzMCAyOCBDIDMwIDI1LjI0MjE4OCAzMi4yNDIxODggMjMgMzUgMjMgQyAzNy43NTc4MTMgMjMgNDAgMjUuMjQyMTg4IDQwIDI4IEMgNDAgMzAuNzU3ODEzIDM3Ljc1NzgxMyAzMyAzNSAzMyBaICI+PC9wYXRoPjwvZz48L3N2Zz4=') 50% 50% no-repeat;
background-size: 100%; }
}
<html>
<body>
<section>something</section>
<section class='line'></section>
<section>something else</section>
</body>
</html>
EARLIER (before Question-er updated question)
If I understand your question and code - you want to have that same 'fade-in and out' effect but without the inline javascript. You can seperate js from the html and add that svg path with js.
window.onload=function() {
var line=document.getElementsByClassName("line")[0];
console.log(line);
/* not sure why I had to concatonate the various pieces, prob because of the code snippet editor in SO */
line.innerHTML='<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="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">'+
'<g>'+
'<path class="myPath" fill="#070707" d="M109.021,87.07c1.871,1.233,1.874,3.713,3.569,5.022c0.051-0.372,0.073-0.78,0.042-1.163l-0.426-0.236'+
'c2.157-5.078-5.299-7.254-8.281-7.586c-2.127-0.236-4.292-0.489-6.372-1.008c-2.521-0.63-3.054-1.987-4.201-4.195'+
'c-0.397,5.932,5.381,6.908,9.51,7.333C104.642,85.419,107.502,86.07,109.021,87.07z"/>' +
'<path class="myPath" fill="#070707" d="M200,199.422c-0.219,0.195-0.438,0.391-0.664,0.58H200V199.422z"/>'+
'</g>'+
'</svg>';
};
.line {
/*transition: opacity 512ms ease-in-out;*/
animation: shine 1s ease-in-out infinite;
}
#keyframes shine {
0% {
opacity: .2;
}
100% {
opacity: 1;
}
}
<html>
<body>
<section>something</section>
<section class='line'></section>
<section>something else</section>
</body>
</html>
NOTE: the above is the OLD snippet, please scroll up in same answer for the final answer which is in the first snippet
EDIT2: ...I believe it may be doable without js, by bringing in line.svg as the background for .line elements and using my css to animate it, but it's bed-time :)...

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

Repeat SVG horizontally infinitely

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.