<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.