MDN Mandala

index.html

<div aria-hidden="true" class="mandala-container animate-colors">
  <div class="mandala-svg-container"><svg width="675" height="675" viewBox="0 0 675 675" fill="none" xmlns="http://www.w3.org/2000/svg" class="mandala">
      <title>Mandala</title>
      <defs>
        <path d="M337.5,337.5 m-320,0 a320,320 0 1,1 640,0 a320,320 0 1,1 -640,0" id="circle1">
          <animateTransform attributeName="transform" begin="0s" dur="500s" type="rotate" from="0 337.5 337.5" to="360 337.5 337.5" repeatCount="indefinite"></animateTransform>
        </path>
        <path d="M337.5,337.5 m-280,0 a280,280 0 1,1 560,0 a280,280 0 1,1 -560,0" id="circle2">
          <animateTransform attributeName="transform" begin="0s" dur="500s" type="rotate" from="360 337.5 337.5" to="0 337.5 337.5" repeatCount="indefinite"></animateTransform>
        </path>
        <path d="M337.5,337.5 m-240,0 a240,240 0 1,1 480,0 a240,240 0 1,1 -480,0" id="circle3">
          <animateTransform attributeName="transform" begin="0s" dur="500s" type="rotate" from="0 337.5 337.5" to="360 337.5 337.5" repeatCount="indefinite"></animateTransform>
        </path>
        <path d="M337.5,337.5 m-200,0 a200,200 0 1,1 400,0 a200,200 0 1,1 -400,0" id="circle4">
          <animateTransform attributeName="transform" begin="0s" dur="500s" type="rotate" from="360 337.5 337.5" to="0 337.5 337.5" repeatCount="indefinite"></animateTransform>
        </path>
        <path d="M337.5,337.5 m-160,0 a160,160 0 1,1 320,0 a160,160 0 1,1 -320,0" id="circle5">
          <animateTransform attributeName="transform" begin="0s" dur="500s" type="rotate" from="0 337.5 337.5" to="360 337.5 337.5" repeatCount="indefinite"></animateTransform>
        </path>
      </defs><text dy="70" textLength="2010">
        <textPath textLength="2010" href="#circle1">&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>&nbsp;&nbsp;&nbsp;/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>/<tspan>/</tspan>
        </textPath>
      </text><text dy="70" textLength="1760">
        <textPath textLength="1760" href="#circle2">&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>&nbsp;&nbsp;+<tspan>+</tspan>+<tspan>+</tspan>+<tspan>+</tspan>
        </textPath>
      </text><text dy="70" textLength="1507">
        <textPath textLength="1507" href="#circle3">
          <tspan>{</tspan>{<tspan>{</tspan>{&nbsp;<tspan>}</tspan>}<tspan>}</tspan>}&nbsp;&nbsp;<tspan>{</tspan>{<tspan>{</tspan>{&nbsp;<tspan>}</tspan>}<tspan>}</tspan>}&nbsp;&nbsp;<tspan>{</tspan>{<tspan>{</tspan>{&nbsp;<tspan>}</tspan>}<tspan>}</tspan>}&nbsp;&nbsp;<tspan>{</tspan>{<tspan>{</tspan>{&nbsp;<tspan>}</tspan>}<tspan>}</tspan>}&nbsp;&nbsp;<tspan>{</tspan>{<tspan>{</tspan>{&nbsp;<tspan>}</tspan>}<tspan>}</tspan>}&nbsp;&nbsp;<tspan>{</tspan>{<tspan>{</tspan>{&nbsp;<tspan>}</tspan>}<tspan>}</tspan>}&nbsp;&nbsp;
        </textPath>
      </text><text dy="70" textLength="1257">
        <textPath textLength="1257" href="#circle4">&nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../</textPath>
      </text><text dy="70" textLength="1005">
        <textPath textLength="1005" href="#circle5">
          <tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;<tspan>&lt;&gt;</tspan>&lt;/&gt;
        </textPath>
      </text>
    </svg></div>
</div>

mdn-mandala.markdown

MDN Mandala

A Pen by Aakash Singh on CodePen.

License.

style.scss

body {
  margin: 0;
}

.mandala-container {
  --mandala-accent-1: #ff707f;
  --mandala-accent-2: #00b755;
  --mandala-accent-3: #afa100;
  --mandala-accent-4: #b3b3b3;
  --mandala-primary: #858585;
  background: rgba(1, 1, 1, 0.9);
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;

  .mandala-rotate > .mandala-svg-container {
    animation: rotation 500s linear infinite;
  }

  svg {
    font-size: 1.5rem;
    font-weight: 300;
    user-select: none;
  }

  svg > text {
    fill: var(--mandala-primary);
  }

  textPath[href="#circle1"] {
    font-size: 1.5rem;
  }

  textPath[href="#circle2"] {
    font-size: 1.3rem;
  }

  textPath[href="#circle3"] {
    font-size: 1.2rem;
  }

  textPath[href="#circle4"] {
    font-size: 1.1rem;
  }

  textPath[href="#circle5"] {
    font-size: 1rem;
  }

  &.animate-colors {
    svg > text > textPath > tspan {
      animation: mandala-color-change 50s infinite;
      animation-timing-function: ease-in-out;
      fill: var(--mandala-primary);
    }

    textPath[href="#circle1"] > tspan {
      animation-delay: -15s;
      fill: var(--mandala-accent-1);
    }

    textPath[href="#circle2"] > tspan {
      animation-delay: -20s;
      fill: var(--mandala-accent-2);
    }

    textPath[href="#circle3"] > tspan {
      animation-delay: -30s;
      fill: var(--mandala-accent-3);
    }

    textPath[href="#circle5"] > tspan {
      animation-delay: -40s;
      fill: var(--mandala-accent-4);
    }
  }
  
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes mandala-color-change {
    0% {
      fill: var(--mandala-primary);
    }

    10% {
      fill: var(--mandala-primary);
    }

    15% {
      fill: var(--mandala-accent-1);
    }

    20% {
      fill: var(--mandala-primary);
    }

    25% {
      fill: var(--mandala-primary);
    }

    30% {
      fill: var(--mandala-accent-2);
    }

    35% {
      fill: var(--mandala-primary);
    }

    40% {
      fill: var(--mandala-primary);
    }

    50% {
      fill: var(--mandala-accent-3);
    }

    55% {
      fill: var(--mandala-primary);
    }

    60% {
      fill: var(--mandala-primary);
    }

    65% {
      fill: var(--mandala-accent-4);
    }

    70% {
      fill: var(--mandala-primary);
    }

    100% {
      fill: var(--mandala-primary);
    }
  }
}