<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg">
        <path d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" class="line" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg">
        <path d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" class="line line2" />
    </svg>
</div>

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    background: linear-gradient(#1a0f19, #16121c);
}

svg {
    position: absolute;
    width: 600px;
    height: 600px;
}

.container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: auto;
}


.line {
    --colorA: #f24983;
    fill: none;
    stroke-width: 10;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: #fff;
    stroke-dasharray: 328 600;
    animation: rotate 2s infinite linear;   
    filter:
        drop-shadow(0 0 2px var(--colorA))
        drop-shadow(0 0 5px var(--colorA))
        drop-shadow(0 0 10px var(--colorA))
        drop-shadow(0 0 15px var(--colorA))
        drop-shadow(0 0 25px var(--colorA));
}

.line2 {
    animation: rotate 2s infinite -1s linear;   
    --colorA: #37c1ff;
}


@keyframes rotate {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 928;
  }
}
View Compiled
var obj = document.querySelector("path");
var length = obj.getTotalLength();
 
console.log(length); 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.