public/assets/injectly.svg

<svg width="100" height="100" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" style="--main-color:#4759e1; --secondary-color:#26103c;">
            <defs>
              <!-- Linear Gradient for the Main Circle -->
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:var(--main-color);stop-opacity:1" />
                <stop offset="100%" style="stop-color:var(--secondary-color);stop-opacity:1" />
              </linearGradient>
          
              <!-- Radial Gradient for Inner Shading -->
              <radialGradient id="inner-shading" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:black; stop-opacity:0.1" />
                <stop offset="100%" style="stop-color:black; stop-opacity:0" />
              </radialGradient>
          
              <!-- Denser Noise Texture Pattern -->
              <pattern id="texture" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
                <circle cx="1" cy="1" r="0.6" fill="black" opacity="0.1" />
                <circle cx="3" cy="2" r="0.6" fill="black" opacity="0.1" />
                <circle cx="4" cy="4" r="0.6" fill="black" opacity="0.1" />
                <circle cx="2" cy="3" r="0.6" fill="black" opacity="0.1" />
              </pattern>
            </defs>
          
            <!-- Main Breathing Circle -->
            <circle cx="60" cy="60" r="30" fill="url(#gradient)">
              <animate
                attributeName="r"
                values="30;35;30"
                dur="3s"
                repeatCount="indefinite"
                keyTimes="0;0.5;1"
                keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
                calcMode="spline"
              />
              <animate
                attributeName="cx"
                values="60;62;60"
                dur="4s"
                repeatCount="indefinite"
                keyTimes="0;0.5;1"
                keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
                calcMode="spline"
              />
            </circle>
          
            <!-- Inner Shading -->
            <circle cx="60" cy="60" r="30" fill="url(#inner-shading)">
              <animate
                attributeName="r"
                values="30;35;30"
                dur="3s"
                repeatCount="indefinite"
                keyTimes="0;0.5;1"
                keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
                calcMode="spline"
              />
              <animate
                attributeName="cx"
                values="60;62;60"
                dur="4s"
                repeatCount="indefinite"
                keyTimes="0;0.5;1"
                keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
                calcMode="spline"
              />
            </circle>
          
            <!-- Denser Texture -->
            <circle cx="60" cy="60" r="30" fill="url(#texture)" opacity="0.5">
              <animate
                attributeName="r"
                values="30;35;30"
                dur="3s"
                repeatCount="indefinite"
                keyTimes="0;0.5;1"
                keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
                calcMode="spline"
              />
              <animate
                attributeName="cx"
                values="60;62;60"
                dur="4s"
                repeatCount="indefinite"
                keyTimes="0;0.5;1"
                keySplines="0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
                calcMode="spline"
              />
            </circle>
          </svg>