icon.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="glowTeal" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="14" result="blur"/>
      <feColorMatrix in="blur" type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0.831
                0 0 1 0 0.667
                0 0 0 0.55 0"/>
    </filter>
    <filter id="glowBlue" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="14" result="blur"/>
      <feColorMatrix in="blur" type="matrix"
        values="1 0 0 0 0.20
                0 1 0 0 0.58
                0 0 1 0  1
                0 0 0 0.42 0"/>
    </filter>
    <filter id="glowPurple" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="14" result="blur"/>
      <feColorMatrix in="blur" type="matrix"
        values="1 0 0 0 0.424
                0 1 0 0 0.361
                0 0 1 0 0.906
                0 0 0 0.42 0"/>
    </filter>
    <filter id="glowPink" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="14" result="blur"/>
      <feColorMatrix in="blur" type="matrix"
        values="1 0 0 0 1
                0 1 0 0 0.42
                0 0 1 0 0.54
                0 0 0 0.42 0"/>
    </filter>
    <filter id="glowOrange" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="14" result="blur"/>
      <feColorMatrix in="blur" type="matrix"
        values="1 0 0 0 1
                0 1 0 0 0.624
                0 0 1 0 0.263
                0 0 0 0.42 0"/>
    </filter>

    <linearGradient id="gradTealBlue" x1="292" y1="250" x2="292" y2="774" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#3CE6C8"/>
      <stop offset="55%" stop-color="#43D7C7"/>
      <stop offset="100%" stop-color="#3B82F6"/>
    </linearGradient>

    <linearGradient id="gradBluePurple" x1="392" y1="314" x2="392" y2="736" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#61D0F5"/>
      <stop offset="45%" stop-color="#8C8CF5"/>
      <stop offset="100%" stop-color="#6C5CE7"/>
    </linearGradient>

    <linearGradient id="gradCross" x1="452" y1="512" x2="614" y2="512" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#8B6EF3"/>
      <stop offset="35%" stop-color="#B45CF0"/>
      <stop offset="68%" stop-color="#FF6B8A"/>
      <stop offset="100%" stop-color="#FF9F43"/>
    </linearGradient>

    <linearGradient id="gradWarm" x1="614" y1="314" x2="614" y2="736" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#FF7AA6"/>
      <stop offset="52%" stop-color="#FF8C55"/>
      <stop offset="100%" stop-color="#F25A3D"/>
    </linearGradient>

    <linearGradient id="gradOrange" x1="714" y1="250" x2="714" y2="774" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#FFC145"/>
      <stop offset="100%" stop-color="#FF7F3E"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="1024" height="1024" fill="#08090C"/>

  <!-- subtle ambient dots -->
  <circle cx="255" cy="275" r="8" fill="#00D4AA" opacity="0.9"/>
  <circle cx="383" cy="275" r="7" fill="#43D7C7" opacity="0.9"/>
  <circle cx="638" cy="284" r="8" fill="#FF9F43" opacity="0.95"/>
  <circle cx="771" cy="266" r="6" fill="#FF9F43" opacity="0.9"/>
  <circle cx="262" cy="560" r="10" fill="#43D7C7" opacity="0.9"/>
  <circle cx="763" cy="536" r="7" fill="#FF9F43" opacity="0.9"/>
  <circle cx="448" cy="602" r="5" fill="#8C8CF5" opacity="0.8"/>

  <!-- left main column -->
  <g>
    <circle cx="292" cy="282" r="31" fill="url(#gradTealBlue)" filter="url(#glowTeal)"/>
    <circle cx="292" cy="282" r="31" fill="url(#gradTealBlue)"/>
    <circle cx="292" cy="351" r="31" fill="url(#gradTealBlue)" filter="url(#glowTeal)"/>
    <circle cx="292" cy="351" r="31" fill="url(#gradTealBlue)"/>
    <circle cx="292" cy="420" r="31" fill="url(#gradTealBlue)" filter="url(#glowTeal)"/>
    <circle cx="292" cy="420" r="31" fill="url(#gradTealBlue)"/>
    <circle cx="292" cy="489" r="31" fill="url(#gradTealBlue)" filter="url(#glowTeal)"/>
    <circle cx="292" cy="489" r="31" fill="url(#gradTealBlue)"/>
    <circle cx="292" cy="558" r="31" fill="url(#gradTealBlue)" filter="url(#glowTeal)"/>
    <circle cx="292" cy="558" r="31" fill="url(#gradTealBlue)"/>
    <circle cx="292" cy="627" r="31" fill="url(#gradTealBlue)" filter="url(#glowTeal)"/>
    <circle cx="292" cy="627" r="31" fill="url(#gradTealBlue)"/>
    <circle cx="292" cy="696" r="31" fill="url(#gradTealBlue)" filter="url(#glowBlue)"/>
    <circle cx="292" cy="696" r="31" fill="url(#gradTealBlue)"/>
    <circle cx="292" cy="765" r="28" fill="url(#gradTealBlue)" filter="url(#glowBlue)"/>
    <circle cx="292" cy="765" r="28" fill="url(#gradTealBlue)"/>
  </g>

  <!-- left inner rhythm column -->
  <g>
    <circle cx="392" cy="338" r="27" fill="url(#gradBluePurple)" filter="url(#glowBlue)"/>
    <circle cx="392" cy="338" r="27" fill="url(#gradBluePurple)"/>
    <circle cx="392" cy="408" r="31" fill="url(#gradBluePurple)" filter="url(#glowBlue)"/>
    <circle cx="392" cy="408" r="31" fill="url(#gradBluePurple)"/>
    <circle cx="392" cy="478" r="31" fill="url(#gradBluePurple)" filter="url(#glowBlue)"/>
    <circle cx="392" cy="478" r="31" fill="url(#gradBluePurple)"/>
    <circle cx="392" cy="548" r="31" fill="url(#gradBluePurple)" filter="url(#glowPurple)"/>
    <circle cx="392" cy="548" r="31" fill="url(#gradBluePurple)"/>
    <circle cx="392" cy="618" r="31" fill="url(#gradBluePurple)" filter="url(#glowPurple)"/>
    <circle cx="392" cy="618" r="31" fill="url(#gradBluePurple)"/>
    <circle cx="392" cy="688" r="28" fill="url(#gradBluePurple)" filter="url(#glowPurple)"/>
    <circle cx="392" cy="688" r="28" fill="url(#gradBluePurple)"/>
    <circle cx="392" cy="754" r="24" fill="url(#gradBluePurple)" filter="url(#glowPurple)"/>
    <circle cx="392" cy="754" r="24" fill="url(#gradBluePurple)"/>
  </g>

  <!-- crossbar -->
  <g>
    <circle cx="454" cy="510" r="29" fill="url(#gradCross)" filter="url(#glowPurple)"/>
    <circle cx="454" cy="510" r="29" fill="url(#gradCross)"/>
    <circle cx="514" cy="526" r="29" fill="url(#gradCross)" filter="url(#glowPurple)"/>
    <circle cx="514" cy="526" r="29" fill="url(#gradCross)"/>
    <circle cx="574" cy="478" r="26" fill="url(#gradCross)" filter="url(#glowPink)"/>
    <circle cx="574" cy="478" r="26" fill="url(#gradCross)"/>
    <circle cx="574" cy="542" r="24" fill="url(#gradCross)" filter="url(#glowPink)"/>
    <circle cx="574" cy="542" r="24" fill="url(#gradCross)"/>
  </g>

  <!-- right inner rhythm column -->
  <g>
    <circle cx="634" cy="338" r="30" fill="url(#gradWarm)" filter="url(#glowPink)"/>
    <circle cx="634" cy="338" r="30" fill="url(#gradWarm)"/>
    <circle cx="634" cy="407" r="29" fill="url(#gradWarm)" filter="url(#glowPink)"/>
    <circle cx="634" cy="407" r="29" fill="url(#gradWarm)"/>
    <circle cx="634" cy="476" r="29" fill="url(#gradWarm)" filter="url(#glowPink)"/>
    <circle cx="634" cy="476" r="29" fill="url(#gradWarm)"/>
    <circle cx="634" cy="545" r="31" fill="url(#gradWarm)" filter="url(#glowPink)"/>
    <circle cx="634" cy="545" r="31" fill="url(#gradWarm)"/>
    <circle cx="634" cy="614" r="31" fill="url(#gradWarm)" filter="url(#glowOrange)"/>
    <circle cx="634" cy="614" r="31" fill="url(#gradWarm)"/>
    <circle cx="634" cy="683" r="29" fill="url(#gradWarm)" filter="url(#glowOrange)"/>
    <circle cx="634" cy="683" r="29" fill="url(#gradWarm)"/>
    <circle cx="634" cy="752" r="26" fill="url(#gradWarm)" filter="url(#glowOrange)"/>
    <circle cx="634" cy="752" r="26" fill="url(#gradWarm)"/>
  </g>

  <!-- right main column -->
  <g>
    <circle cx="714" cy="282" r="31" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="282" r="31" fill="url(#gradOrange)"/>
    <circle cx="714" cy="351" r="31" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="351" r="31" fill="url(#gradOrange)"/>
    <circle cx="714" cy="420" r="31" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="420" r="31" fill="url(#gradOrange)"/>
    <circle cx="714" cy="489" r="31" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="489" r="31" fill="url(#gradOrange)"/>
    <circle cx="714" cy="558" r="31" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="558" r="31" fill="url(#gradOrange)"/>
    <circle cx="714" cy="627" r="31" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="627" r="31" fill="url(#gradOrange)"/>
    <circle cx="714" cy="696" r="31" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="696" r="31" fill="url(#gradOrange)"/>
    <circle cx="714" cy="765" r="28" fill="url(#gradOrange)" filter="url(#glowOrange)"/>
    <circle cx="714" cy="765" r="28" fill="url(#gradOrange)"/>
  </g>
</svg>