Alternatives to svg+css web animation for better performances

Question

I'm trying to find an alternative way to display this svg+css animation I made,
due to it's rather poor performances.

The animation surronds a <div> covering about the entire screen, so it's rendered usually at high resolutions (I think that's why the framerate is truggling).
I am quite sure the guilty is the gaussian blur applied on the path, but I can't think of any other way to achieve the same result, and that's why I'm here :) .

• by using a canvas, I wouldn't know how to make the path glow
• using a gif, or a video, is out of discussion

And those are all the techniques I know.
What would you use in this situation?

@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>