Mandala

A mandala is a geometric configuration of symbols.

Component

mandala.jsx

mandala.css

const Mandala = () => {
  return (
    <div className="mandala-wrapper bg-gray-900">
      <div className="mandala-container animate-colors" aria-hidden="true">
        <div className="mandala-translate">
          <svg
            width="675"
            height="675"
            viewBox="0 0 675 675"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="mandala"
          >
            <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"
              ></path>
              <path
                d="M337.5,337.5 m-280,0 a280,280 0 1,1 560,0 a280,280 0 1,1 -560,0"

Credits

Adapted from Mozilla MDN (opens in a new tab) hero backround animation

Intro State Machine