Widget causing game crash with too many divs that have keyframes attached

generated html:
problem lines are the super long single lines, just copy pasted the same three, but they are normally randomized in game. can work with up to two, once I add the third, the game glitches.

<html>
    <head>
        <!-- Required includes -->
        <script type="text/javascript" src="coui://uiresources/js/crayta.js"></script>

        <style type="text/css">
.animated {
	animation-duration: 10s;
}
.blot-container {
	animation-name: blot-container-anim;
  width: 70vw;
  height: 70vw;
  position: absolute;
}
@keyframes blot-container-anim {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.center {
  animation-name: center-anim;
  background: black;
  position: absolute;
  border-radius: 50%;
  filter: blur(20rem);
}
@keyframes center-anim {
	0% {
    height: 0%;
    width: 0%;
    left: 50%;
    bottom: 50%;
	}
  10% {
    width: 24%;
    height: 24%;
    left: 38%;
    bottom:  38%;
  }
  100% {
    width: 24%;
    height: 24%;
    left: 38%;
    bottom:  38%;
  }
}
.splat {
  animation-name: splat-anim;
  background: black;
  position: absolute;
  border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
  filter: blur(10rem);
  transform-origin: 50% 250%;
}
@keyframes splat-anim {
	0% {
    height: 0%;
    width: 0%;
    left: 50%;
    bottom: 50%;
	}
  10% {
    width: 10%;
    height: 20%;
    left: 45%;
    bottom:  80%;
  }
  100% {
    width: 10%;
    height: 20%;
    left: 45%;
    bottom:  80%;
  }
}
.streak {
  background: black;
  position: absolute;
  bottom: 50%;
  filter: blur(10rem);
  transform-origin: 50% 100%;
}

.streak.med {
  animation-name: streak-anim-med;
}
@keyframes streak-anim-med {
	0% {
    height: 0%;
    width: 0%;
    left: 50%;
  clip-path: polygon(80% 0, 55% 60%, 100% 100%, 0% 100%, 45% 60%, 20% 0);
	}
  10% {
    width: 16%;
    height: 45%;
    left: 42%;
  clip-path: polygon(80% 0, 55% 60%, 100% 100%, 0% 100%, 45% 60%, 20% 0);
  }
  100% {
    width: 16%;
    height: 45%;
    left: 42%;
  clip-path: polygon(80% 0, 55% 60%, 100% 100%, 0% 100%, 45% 60%, 20% 0);
  }
}
.splat.short {
  animation-name: splat-anim-short;
  transform-origin: 50% 200%;
}
@keyframes splat-anim-short {
	0% {
    height: 0%;
    width: 0%;
    left: 50%;
    bottom: 50%;
	}
	10% {
    width: 10%;
    height: 20%;
    left: 45%;
    bottom:  70%;
	}
	100% {
    width: 10%;
    height: 20%;
    left: 45%;
    bottom:  70%;
	}
}
.blot-container .streak.short {
  animation-name: streak-anim-short;
}
@keyframes streak-anim-short {
	0% {
    height: 0%;
    width: 0%;
    left: 50%;
  clip-path: polygon(75% 0, 55% 60%, 100% 100%, 0% 100%, 45% 60%, 25% 0);
	}
  10% {
    width: 20%;
    height: 35%;
    left: 40%;
  clip-path: polygon(75% 0, 55% 60%, 100% 100%, 0% 100%, 45% 60%, 25% 0);
  }
  100% {
    width: 20%;
    height: 35%;
    left: 40%;
  clip-path: polygon(75% 0, 55% 60%, 100% 100%, 0% 100%, 45% 60%, 25% 0);
  }
}
.splat.long {
  animation-name: splat-anim-long;
  transform-origin: 50% 300%;
}
@keyframes splat-anim-long {
	0% {
    height: 0%;
    width: 0%;
    left: 50%;
    bottom: 50%;
	}
	10% {
    width: 10%;
    height: 20%;
    left: 45%;
    bottom:  90%;
	}
	100% {
    width: 10%;
    height: 20%;
    left: 45%;
    bottom:  90%;
	}
}
.blot-container .streak.long {
  animation-name: streak-anim-long;
}
@keyframes streak-anim-long {
	0% {
    height: 0%;
    width: 0%;
    left: 50%;
  clip-path: polygon(80% 0, 55% 75%, 100% 100%, 0% 100%, 45% 75%, 20% 0);
	}
  10% {
    width: 16%;
    height: 55%;
    left: 42%;
  clip-path: polygon(80% 0, 55% 75%, 100% 100%, 0% 100%, 45% 75%, 20% 0);
  }
  100% {
    width: 16%;
    height: 55%;
    left: 42%;
  clip-path: polygon(80% 0, 55% 75%, 100% 100%, 0% 100%, 45% 75%, 20% 0);
  }
}
        </style>
    </head>

    <body>
    	<!--<div
    		data-bind-for="i,splat:{{InkSplatModel.splats}}"
    	 	data-bind-html="{{splat}}">
    	</div>-->
    	<div>
    	<div class="blot-container animated" style="top: -40vh; left: 15vw;"><div class="center animated"></div><div class="splat short animated" style="transform: rotateZ(55deg);"></div><div class="streak short animated" style="transform: rotateZ(55deg);"></div><div class="splat med animated" style="transform: rotateZ(102deg);"></div><div class="streak med animated" style="transform: rotateZ(102deg);"></div><div class="splat short animated" style="transform: rotateZ(177deg);"></div><div class="streak short animated" style="transform: rotateZ(177deg);"></div><div class="splat long animated" style="transform: rotateZ(229deg);"></div><div class="streak long animated" style="transform: rotateZ(229deg);"></div><div class="splat short animated" style="transform: rotateZ(279deg);"></div><div class="streak short animated" style="transform: rotateZ(279deg);"></div><div class="splat short animated" style="transform: rotateZ(306deg);"></div><div class="streak short animated" style="transform: rotateZ(306deg);"></div></div>
    	<div class="blot-container animated" style="top: -40vh; left: 15vw;"><div class="center animated"></div><div class="splat short animated" style="transform: rotateZ(55deg);"></div><div class="streak short animated" style="transform: rotateZ(55deg);"></div><div class="splat med animated" style="transform: rotateZ(102deg);"></div><div class="streak med animated" style="transform: rotateZ(102deg);"></div><div class="splat short animated" style="transform: rotateZ(177deg);"></div><div class="streak short animated" style="transform: rotateZ(177deg);"></div><div class="splat long animated" style="transform: rotateZ(229deg);"></div><div class="streak long animated" style="transform: rotateZ(229deg);"></div><div class="splat short animated" style="transform: rotateZ(279deg);"></div><div class="streak short animated" style="transform: rotateZ(279deg);"></div><div class="splat short animated" style="transform: rotateZ(306deg);"></div><div class="streak short animated" style="transform: rotateZ(306deg);"></div></div>
		<div class="blot-container animated" style="top: -40vh; left: 15vw;"><div class="center animated"></div><div class="splat short animated" style="transform: rotateZ(55deg);"></div><div class="streak short animated" style="transform: rotateZ(55deg);"></div><div class="splat med animated" style="transform: rotateZ(102deg);"></div><div class="streak med animated" style="transform: rotateZ(102deg);"></div><div class="splat short animated" style="transform: rotateZ(177deg);"></div><div class="streak short animated" style="transform: rotateZ(177deg);"></div><div class="splat long animated" style="transform: rotateZ(229deg);"></div><div class="streak long animated" style="transform: rotateZ(229deg);"></div><div class="splat short animated" style="transform: rotateZ(279deg);"></div><div class="streak short animated" style="transform: rotateZ(279deg);"></div><div class="splat short animated" style="transform: rotateZ(306deg);"></div><div class="streak short animated" style="transform: rotateZ(306deg);"></div></div>
		</div>
        <script>
            engine.createJSModel('InkSplatModel',
            {
            	active: false,
            	splats: [],
            });

            engine.on("updateSplats", function(luaSplats) {
            	let splats = [];
            	for (let i = 0; i < luaSplats.length; i++) {
            		splats[i] = luaSplats[i];
            	}
            	InkSplatModel.splats = splats;
                engine.updateWholeModel(InkSplatModel);
                engine.synchronizeModels();
            });
        </script>
    </body>
</html>