Альтернативы веб-анимации svg+css для лучшей производительности

Question

Я пытаюсь найти альтернативный способ отображения анимации SVG + CSS, которую я сделал,
из-за довольно плохих результатов.

Анимация окружает <div> охватывает весь экран, поэтому он обычно отображается в высоком разрешении (я думаю, поэтому частота кадров колеблется).
Я совершенно уверен, что виноват в том, что на пути применено размытие по Гауссу, но я не могу придумать другого способа добиться того же результата, и поэтому я здесь:) .

• используя холст, я не знаю, как заставить светиться путь
• использование gif или видео не обсуждается

И это все техники, которые я знаю.
Что бы вы использовали в этой ситуации?

@keyframes top {
  0%,
  25% {
    stroke-dashoffset: 1000;
  }
  75%,
  100% {
    stroke-dashoffset: -2760;
  }
}

.blur {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  fill: none;
  stroke: #000fff;
  stroke-linecap: round;
  stroke-dasharray: 1000 2760;
  animation-name: top;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  filter: url("#blur");
  stroke-width: 7px;
}

.line {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  fill: none;
  stroke: #000fff;
  stroke-linecap: round;
  stroke-dasharray: 1000 2760;
  animation-name: top;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  stroke-width: 2px;
}

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
    <!--<style><![CDATA[]]></style>-->
    <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
    </filter>
    <defs>
        <g id="first">
            <polyline points="105 1065 105 15 1815 15"/>
            <polyline points="105 1065 1815 1065 1815 15"/>
        </g>
    </defs>

    <use class="blur" xlink:href="#first"/>
    <use class="line" xlink:href="#first"/>
</svg>