<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}%`)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.