<svg class="number" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800">
<defs>
<linearGradient id="linear-gradient" x1="427.16" y1="717.19" x2="427.16" y2="82.81" gradientTransform="matrix(-1, 0, 0, 1, 740.71, 0)" gradientUnits="userSpaceOnUse">
<stop offset="0.11" stop-color="#3947ff" />
<stop offset="0.49" stop-color="#50a0ff" />
<stop offset="0.82" stop-color="#281471" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="149.45" y1="564.1" x2="477.65" y2="235.9" gradientUnits="userSpaceOnUse">
<stop offset="0.19" stop-color="#3947ff" />
<stop offset="0.59" stop-color="#9970c9" />
<stop offset="0.82" stop-color="#281471" />
</linearGradient>
<linearGradient id="linear-gradient-3" x1="321.01" y1="717.19" x2="321.01" y2="82.81" gradientTransform="matrix(-1, 0, 0, 1, 740.71, 0)" gradientUnits="userSpaceOnUse">
<stop offset="0.11" stop-color="#505fff" />
<stop offset="0.49" stop-color="#50bdff" />
<stop offset="0.82" stop-color="#282271" />
</linearGradient>
<linearGradient id="linear-gradient-4" x1="255.61" y1="564.1" x2="583.8" y2="235.9" gradientUnits="userSpaceOnUse">
<stop offset="0.19" stop-color="#575fff" />
<stop offset="0.59" stop-color="#ca6db4" />
<stop offset="0.82" stop-color="#282271" />
</linearGradient>
<linearGradient id="linear-gradient-5" x1="214.85" y1="717.19" x2="214.85" y2="82.81" gradientTransform="matrix(-1, 0, 0, 1, 740.71, 0)" gradientUnits="userSpaceOnUse">
<stop offset="0.11" stop-color="#5089ff" />
<stop offset="0.49" stop-color="#50e5d9" />
<stop offset="0.82" stop-color="#2e2578" />
</linearGradient>
<linearGradient id="linear-gradient-6" x1="361.76" y1="564.1" x2="689.96" y2="235.9" gradientUnits="userSpaceOnUse">
<stop offset="0.19" stop-color="#5089ff" />
<stop offset="0.59" stop-color="#ff7698" />
<stop offset="0.92" stop-color="#2e2578" />
</linearGradient>
</defs>
<g class="group" style="--group: 1">
<path class="cls-1 path path-1" d="M313.55,109.37A106.15,106.15,0,0,1,419.71,215.52v78.32A106.16,106.16,0,0,1,313.55,400h0A106.15,106.15,0,0,0,207.4,506.16v78.32A106.14,106.14,0,0,0,313.55,690.63" />
<path class="cls-2 path path-2" d="M313.55,109.37A106.14,106.14,0,0,0,207.4,215.52v78.32A106.15,106.15,0,0,0,313.55,400h0A106.16,106.16,0,0,1,419.71,506.16v78.32A106.15,106.15,0,0,1,313.55,690.63" />
</g>
<g class="group" style="--group: 2">
<path class="cls-3 path path-1" d="M419.71,109.37A106.15,106.15,0,0,1,525.86,215.52v78.32A106.16,106.16,0,0,1,419.71,400h0A106.16,106.16,0,0,0,313.55,506.16v78.32A106.15,106.15,0,0,0,419.71,690.63" />
<path class="cls-4 path path-2" d="M419.71,109.37A106.15,106.15,0,0,0,313.55,215.52v78.32A106.16,106.16,0,0,0,419.71,400h0A106.16,106.16,0,0,1,525.86,506.16v78.32A106.15,106.15,0,0,1,419.71,690.63" />
</g>
<g class="group" style="--group: 3">
<path class="cls-5 path path-2" d="M525.86,109.37A106.15,106.15,0,0,1,632,215.52v78.32A106.16,106.16,0,0,1,525.86,400h0A106.15,106.15,0,0,0,419.71,506.16v78.32A106.14,106.14,0,0,0,525.86,690.63" />
<path class="cls-6 path path-1" d="M525.86,109.37A106.14,106.14,0,0,0,419.71,215.52v78.32A106.15,106.15,0,0,0,525.86,400h0A106.16,106.16,0,0,1,632,506.16v78.32A106.15,106.15,0,0,1,525.86,690.63" />
</g>
</svg>
body
background-color: #1c0045
display: flex
height: 100vh
justify-content: center
align-items: center
$d: 5s
.number
width: 75vmin
height: 75vmin
animation: number $d infinite .65s
.group
$group-delay: calc(var(--group) * .2s)
animation: group $d infinite .65s
.path
stroke-dasharray: var(--length) var(--double-length)
stroke-dashoffset: var(--double-length)
animation: path $d infinite $group-delay linear
.path-2
animation: path $d infinite calc(#{$group-delay} + #{$d * .13}) linear
@keyframes path
25%, 50%
stroke-dashoffset: 0
100%
stroke-dashoffset: var(--negative-length)
@keyframes number
0%, 60%
filter: blur(0)
100%
filter: blur(30px)
@keyframes group
0%
transform: translateX(var(--displace)) translateY(calc(var(--displace)))
10%
transform: translateX(calc(var(--displace) * -1)) translateY(calc(var(--displace)))
50%
transform: translateX(0) translateY(0)
.path
fill: none
stroke-linecap: round
stroke-miterlimit: 10
.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-6
stroke-width: 53.12px
.cls-1
stroke: url(#linear-gradient)
.cls-2
stroke: url(#linear-gradient-2)
.cls-3
stroke: url(#linear-gradient-3)
.cls-4
stroke: url(#linear-gradient-4)
.cls-5
stroke-width: 53.12px
stroke: url(#linear-gradient-5)
.cls-6
stroke: url(#linear-gradient-6)
View Compiled
const paths = document.querySelectorAll(".path-1, .path-2");
const groups = document.querySelectorAll(".group");
paths.forEach((path, index) => {
const length = Math.ceil(path.getTotalLength())
path.style.setProperty("--length", length)
path.style.setProperty("--double-length", length * 2)
path.style.setProperty("--negative-length", length * -2)
})
groups.forEach((group, index) => {
// const length = Math.ceil(group.getTotalLength())
const percentage = Math.round(Math.random() * 14) - 7
group.style.setProperty("--displace", `${(index + 1) * percentage}%`)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.