We Keep Coding

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.

SVG doesn't fill once the animation is over

My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation Doesn't fill once it is over.
My website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/
If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want to fill once the animation is over.
Is there some way i can let it fill once the animation is over?
HTML:
<div class="photoshop">
<svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg>
</div>
CSS:
.photoshop {
height: 100px;
width: 100px;
opacity: 0;
}
.js-photoshop-animate{
opacity: 1;
}
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
100% {
stroke-dashoffset: 0;
}
}
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG finished * {
fill-opacity: 1;
}
JAVASCRIPT:
var $photoshop = $('.photoshop');
$photoshop.waypoint(function(){
console.log('Waypoint!');
$photoshop.addClass('js-photoshop-animate rzzhgcav_0');
}, {offset: '90%'} );
/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
obj.el.classList.add('finished');
});

Include multiple attributes in your animation, leave off the transition:
Start and end of the individual property animations can overlap if you leave out the property you want to "run through" a keyframe:
If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 5000ms 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
0% {
stroke-dashoffset: 27047;
fill-opacity: 0
animation-timing-function: ease-in-out
}
50% {
fill-opacity: 0
animation-timing-function: linear
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1
}
}

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 and CSS3 Animations not working in IE and Safari

I have this code for animations using HTML5, CSS3 Animations and SVG
line. It’s only working in Chrome, Opera and Firefox and not working
in IE and Safari. Any solution?
Here is the code:
.line {
width: 65%;
margin: 0 auto;
}
#svg path.path {
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation: lines 5s linear forwards;
-moz-animation: lines 5s linear forwards;
-ms-animation: lines 5s linear forwards;
-0-animation: lines 5s linear forwards;
animation: lines 5s linear forwards;
}
#keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
See the code in "Code Pen"
I want fix it by making it work in IE and Safari. Please, if possible
in HTML5, CSS and SVG only.

Mozilla Devloper Network - SVG Animation - Browser Compatibility says
Internet Explorer
Not supported
Then use FakeSMIL
Refer this FakeSmile with IE9
Refer this http://jsfiddle.net/whyoz/c3wb5sbr/
function registerAnimation(anim) {
var targets = getTargets(anim);
var elAnimators = new Array();
for(var i=0; i<targets.length ;i++) {
var target = targets[i];
var animator = new Animator(anim, target, i);
animators.push(animator);
elAnimators[i] = animator;
}
anim.animators = elAnimators;
var id = anim.getAttribute("id");
if (id)
id2anim[id] = anim;
for(var i=0; i<elAnimators.length ;i++)
elAnimators[i].register();
}
var svg = document.getElementsByTagName('svg')[0];
.......
var animation = document.createElementNS(
"http://www.w3.org/2000/svg", "animate");
.......
.......
registerAnimation(animation);
animation.beginElement();
Which could bring animation for SVG in IE
Refer MSDN https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx
Example http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/06seventeenGearsWith1Button.html

SVG pattern animation and background fade in issue

I am trying to animate an SVG pattern and, once this has finished, to make a background image fading in.
Each of the two effect works fine separately. But when I combine them it looks like the timing is wrong.
I think the actual issue is the SVG being inside the div with opacity:0. This is used to make the background colour fade in, but it means that the SVG isn't not visible straight away.
Is a CSS only solution possible? Or do I need Javascript? And if so, could people make suggestion?
I have simplified the scenario by using a background colour instead of an image.
DEMO
HTML
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>
CSS
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
}
.background-image.visible {
opacity: 1;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}

You can use a pseudo-element on the background-image div to "underly" the SVG.
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
position: relative;
}
.background-image::before {
content:"";
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
z-index:0;
}
.background-image.visible {
opacity: 1;
}
svg {
position: relative;
z-index:2;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>