Inline SVG not always showing up in Chrome

Question

Heyo!

So I have a big chunk of inline SVG code so I can animate it in with some css, I have put the SVG inline code in a pastebin, if I were to put it here it would be massive. Now the problem is that it is not showing up in Chrome. Corresponding SCSS:

#logo {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke-linecap: square;
  z-index: 1;
}

#logo path {
  &:nth-child(1) {
    stroke-dasharray: 500.82;
    stroke-dashoffset: 500.92;
    animation: line-anim 1.5s ease forwards;
  }

  &:nth-child(2) {
    stroke-dasharray: 313.24163818359375;
    stroke-dashoffset: 313.24163818359375;
    animation: line-anim 1.5s ease forwards 0.3s;
  }

  &:nth-child(3) {
    stroke-dasharray: 350.793212890625;
    stroke-dashoffset: 350.793212890625;
    animation: line-anim 1.5s ease forwards 0.6s;
  }

  &:nth-child(4) {
    stroke-dasharray: 327.3361511230469;
    stroke-dashoffset: 327.3361511230469;
    animation: line-anim 1.5s ease forwards 0.9s;
  }

  &:nth-child(5) {
    stroke-dasharray: 282.18719482421875;
    stroke-dashoffset: 282.18719482421875;
    animation: line-anim 1.5s ease forwards 1.2s;
  }

  &:nth-child(6) {
    stroke-dasharray: 313.2420959472656;
    stroke-dashoffset: 313.2420959472656;
    animation: line-anim 1.5s ease forwards 1.5s;
  }

  &:nth-child(7) {
    stroke-dasharray: 386.1973876953125;
    stroke-dashoffset: 386.1973876953125;
    animation: line-anim 1.5s ease forwards 1.8s;
  }

  &:nth-child(8) {
    stroke-dasharray: 365.17633056640625;
    stroke-dashoffset: 365.17633056640625;
    animation: line-anim 1.5s ease forwards 2.1s;
  }

  &:nth-child(9) {
    stroke-dasharray: 296.4239501953125;
    stroke-dashoffset: 296.4239501953125;
    animation: line-anim 1.5s ease forwards 2.4s;
  }

  &:nth-child(10) {
    stroke-dasharray: 350.7937316894531;
    stroke-dashoffset: 350.7937316894531;
    animation: line-anim 1.5s ease forwards 2.7s;
  }

  &:nth-child(11) {
    stroke-dasharray: 365.1751708984375;
    stroke-dashoffset: 365.1751708984375;
    animation: line-anim 1.5s ease forwards 3s;
  }

  &:nth-child(12) {
    stroke-dasharray: 313.2421875;
    stroke-dashoffset: 313.2421875;
    animation: line-anim 1.5s ease forwards 3.3s;
  }

  &:nth-child(13) {
    stroke-dasharray: 482.3141174316406;
    stroke-dashoffset: 482.3141174316406;
    animation: line-anim 1.5s ease forwards 3.6s;
  }
}

I have tried it on Edge where it does show but very weird. And on FireFox it doesn't show at all, everything was working fine yesterday, and now that I got a bit further in the project I thought it was some SCSS that I added later on, but that isn't the case either.

Any help would be appreciated

Answer 1

Silly me, I accidentally removed the line-anim keyframe when cleaning up my css, thanks for reminding me @enxaneta