We Keep Coding

Transform transition on button makes child SVG jump position at beginning and end of transition

I am currently creating a Stencil component library and one of the components is a navigation button which has an SVG icon that scales on hover to give a pop effect. To achieve this effect I put a scale transform on the SVG with an ease transition.
The problem is that when I hover over the button, just before the transitions starts, the icon jumps on some of the buttons instances (pretty randomly, depending on where on the page the button is on the page sometimes up, down, left and right) and then when the transient has ended it jumps back (sometimes not even the same amount or direction as the first jump)
<my-element></my-element>
<my-element></my-element>
<my-element></my-element>
<script>
customElements.define("my-element", class extends HTMLElement {
constructor() {
super()
.attachShadow({mode: "open"})
.innerHTML = `
<style>
:host {
display: inline-block;
}
button {
display: block;
border-radius: 8px;
margin: 0;
padding: 0.6rem;
border: none;
cursor: pointer;
}
svg {
display: block;
width: 4rem;
height: 4rem;
padding: 0;
margin: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
transform: scale(1);
}
:host(:not([active]):not([disabled])) button:hover svg {
transform: scale(1.2);
}
</style>
<button disabled={this.disabled}>
<svg>
<use href="#circ">
<?xml version="1.0" encoding="UTF-8"?>
<svg height="24" width="24">
<symbol viewBox="0 0 24 24" id="circ">
<circle cx="12" cy="12" r="12" stroke="none" stroke-width="3" fill="red" />
</symbol>
</svg>
</use>
</svg>
</button>`;
}
});
</script>
This problem is browser agnostic and I've tried for quite a few hours now to figure out what's causing it. It seems removing all padding and margins resolves the issue but that's not really a solution. What I find very strange is if I put the sag inside of a collared div and add the scale transition to the div instead of the SVG, the div scales smoothly without the jump, but the SVG inside the div does the same weird jumps.

Inline elements behave differently than block elements when it comes to transitions/animations. Your div is a block element whereas the svg is an inline one.
Try to make the svg an inline-block element, or stick on a block element to achieve it.
svg {
display: inline-block;
}

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 :)...

Loading Square on the border of image using CSS or JS

Thank you for reading this I want a square which will load in 2 seconds around a image of 50x50
Loading Square image:
From above image the middle one is a image of height=50 and width=50, and the red colour border is loading square .
whenever anyone hover on that image that red colour square will start loading around the image and after 2 second it will complete

You could use a SVG and animate a path around an inner image, e.g.
The direction of the effect is dependent on how you build the path
svg {
cursor: pointer;
border: 1px dashed #ccc;
width: 150px;
height: 150px;
background: url(https://i.ibb.co/qdngFNL/Screenshot-2019-06-07-at-11-45-55.png) center no-repeat / 50px 50px;
}
svg:hover path {
animation: dash 2s linear 0s forwards;
}
svg path {
stroke-dasharray: 770;
stroke-dashoffset: 770;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg viewBox="0 0 200 200">
<path d="M2 12L2 188 Q 2,198 20,198 L 188 198 Q198,198 198,188 L198 12 Q198,2 188,2 L12 2 Q2,2 2,12z" stroke="red" stroke-width="4" fill="none"/>
</svg>
Also, for the sake of accessibility remember to add an aria-label/aria-describedby attribute if you need to convey useful information to the user, otherwise add a role="none" (or "presentation") to hide this element from assistive tecnologies.

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 Animations Very Laggy after Resizing (Expert)?

So I am adding an SVG to my website. I am also resizing this svg to fit most of my screen, by changing a class called "background-svg" that you'll see in my code below.
Basically, If you make the SVG bigger, it becomes super laggy (like its animations are super laggy) and even other animations on the page become super laggy. Try On JSFIDDLE
If you make the SVG small, the animations are Smooth. On the JSFIDDLE link above, try making your window smaller (you'll see the animations are better), then make your window bigger (laggy animations again).
Problem Only Occurs on Chrome and Safari...No Lags on FireFox
My SVG:
<svg class="background-svg" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#8B65E4">
<path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
<path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
<path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
</g>
<foreignObject x="8%" y="20%" width="80%" height="100%"
>
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<h1>
Hey! <br />I'm <span>someperson</span> <span class="info">I like</span>
</h1>
</div>
</body>
</foreignObject>
</g>
</svg>
My CSS:
#import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);
body {
height: 100vh;
overflow: hidden;
text-align: center;
font-family: "Roboto", sans-serif;
}
.background-svg{
position: absolute;
top: 0;
left: 20%;
width: 80%;
height: 80%;
}
h1 {
font-weight: 300;
font-size: 24px;
letter-spacing: 2px;
color: #fff;
text-align: left;
}
h1 .info {
display: block;
color: #CFBDF9;
font-size: 16px;
letter-spacing: 0px;
}
.box {
text-align: right;
padding: 0px 40px;
}
.box-item {
display: inline-block;
color: #fff;
font-size: 30px;
padding-right: 20px;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#Triangle-1 {
-webkit-animation: box 2.5s infinite; /* Main Anim is super laggy on chrome and safary*/
-moz-animation: box 2.5s infinite; /* Main Anim seems good on Firefox*/
}
#Triangle-2 {
-webkit-animation: box2 1s infinite; /* same as above */
-moz-animation: box2 1s infinite; /* same as above */
}
#keyframes box2 {
10% {
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
90% {
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
}
#keyframes box {
10% {
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
90% {
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
}
TL;DR: Super Laggy SVG Animations if SVG is large, but smooth animations if SVG is small.

This has to do with GPU usage when animating with pure CSS. Although most properties like transform are 'GPU injected' this isn't a guarantee. If you were to do this with JavaScript; you may see significant performance enhancements.
I do not get much 'lag' at all while running these animations.
This article is specific to a JS animation library, but clearly explains this concept as well.
How CSS animations are rendered
As far as performance changing with window scaling, it has to do with the number of pixels being altered/rendered with each animation cycle.
For example, if you're vector SVG draws a shape on a 500x500px canvas that takes up 75% of the area, you're going to be drawing alot less pixels in then if you have a 2000x2000px canvas with a shape that takes up 75% of the area.
Since this is calculated over and over again then redrawn when you're using an SVG, there can be a significant performance difference when scaling up.
Since browsers are built and render differently, FireFox is simply able to handle the redrawing of these shapes over and over better than the other browsers in this circumstance.

I've noticed two main issues:
the order of the css properties: transform and transition properties are after the vendor-specific ones, so I put it before them
the use of the 2D transformations, which don't exploit hardware acceleration, so I changed them with the equivalent 3D ones
The following snippet contains part of what I've modified, you can try it in this fiddle and give me a feedback
#Triangle-2 {
animation: box2 1s infinite;
-o-animation: box2 1s infinite;
-moz-animation: box2 1s infinite;
-webkit-animation: box2 1s infinite;
}
#keyframes box2 {
10% {
transform: rotate(1deg);
-o-animation: rotateZ(1deg);
-moz-animation: rotateZ(1deg);
-webkit-transform: rotateZ(1deg);
}
90% {
transform: rotate(-2deg);
-o-animation: rotateZ(-2deg);
-moz-animation: rotateZ(-2deg);
-webkit-transform: rotateZ(-2deg);
}
}
I've worked with html elements translations in the past, and in my case the 3D css solution outperformed the 2D and the javascript ones, mostly because of the hardware speed up without passing through the javascript interpreter.
If you want take a look here to have more details about hardware accelerations and comparison with javascript solutions.