Showcase

An octopus on drums, built by Gemini 4 Argon

Hostedvia DaBenchOpenRouter
Running live in your browserNew tab
Speed
106tok/s
First token included
Written
40.2Ktokens
Time to build
6m 19s
Cost to build
$0.20
Show the code the model wrote
SVG46,485 characters
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 850" width="100%" height="100%">
  <defs>
    <!-- Stage & Backdrop Gradients -->
    <radialGradient id="backdropGrad" cx="50%" cy="38%" r="65%">
      <stop offset="0%" stop-color="#23193d"/>
      <stop offset="55%" stop-color="#110c21"/>
      <stop offset="100%" stop-color="#07050f"/>
    </radialGradient>

    <linearGradient id="stageWood" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2c1d30"/>
      <stop offset="35%" stop-color="#3c2638"/>
      <stop offset="75%" stop-color="#241524"/>
      <stop offset="100%" stop-color="#110914"/>
    </linearGradient>

    <radialGradient id="floorSpotPool" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffdfa0" stop-opacity="0.38"/>
      <stop offset="55%" stop-color="#f7b955" stop-opacity="0.16"/>
      <stop offset="100%" stop-color="#1a0f24" stop-opacity="0"/>
    </radialGradient>

    <linearGradient id="spotlightBeam" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-color="#fff6d6" stop-opacity="0.42"/>
      <stop offset="35%" stop-color="#ffe49e" stop-opacity="0.18"/>
      <stop offset="85%" stop-color="#ffd27d" stop-opacity="0.06"/>
      <stop offset="100%" stop-color="#ffd27d" stop-opacity="0"/>
    </linearGradient>

    <radialGradient id="kitShadowGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#040208" stop-opacity="0.88"/>
      <stop offset="70%" stop-color="#07040e" stop-opacity="0.65"/>
      <stop offset="100%" stop-color="#07040e" stop-opacity="0"/>
    </radialGradient>

    <!-- Octopus Gradients -->
    <radialGradient id="octoHeadGrad" cx="44%" cy="30%" r="62%">
      <stop offset="0%" stop-color="#ff9a62"/>
      <stop offset="32%" stop-color="#ff5e36"/>
      <stop offset="72%" stop-color="#d82b2b"/>
      <stop offset="100%" stop-color="#8a1538"/>
    </radialGradient>

    <linearGradient id="octoArmGradL" x1="20%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ff7a45"/>
      <stop offset="50%" stop-color="#ec412b"/>
      <stop offset="100%" stop-color="#9e1937"/>
    </linearGradient>

    <linearGradient id="octoArmGradR" x1="80%" y1="0%" x2="20%" y2="100%">
      <stop offset="0%" stop-color="#ff7a45"/>
      <stop offset="50%" stop-color="#ec412b"/>
      <stop offset="100%" stop-color="#9e1937"/>
    </linearGradient>

    <linearGradient id="suckerGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffe5c4"/>
      <stop offset="100%" stop-color="#f3a678"/>
    </linearGradient>

    <!-- Drum Shell & Hardware Gradients -->
    <linearGradient id="tealShell" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#083847"/>
      <stop offset="22%" stop-color="#147a8f"/>
      <stop offset="42%" stop-color="#48cae4"/>
      <stop offset="58%" stop-color="#12677a"/>
      <stop offset="85%" stop-color="#0a3e4d"/>
      <stop offset="100%" stop-color="#05222b"/>
    </linearGradient>

    <linearGradient id="bassShell" x1="15%" y1="0%" x2="85%" y2="100%">
      <stop offset="0%" stop-color="#0b4f63"/>
      <stop offset="30%" stop-color="#229ebc"/>
      <stop offset="50%" stop-color="#56cfe1"/>
      <stop offset="72%" stop-color="#0f5c70"/>
      <stop offset="100%" stop-color="#062833"/>
    </linearGradient>

    <linearGradient id="snareShell" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#6e481f"/>
      <stop offset="25%" stop-color="#d49b4b"/>
      <stop offset="48%" stop-color="#fff1c1"/>
      <stop offset="70%" stop-color="#b87d32"/>
      <stop offset="100%" stop-color="#4f3112"/>
    </linearGradient>

    <linearGradient id="chromeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#6c757d"/>
      <stop offset="30%" stop-color="#f8f9fa"/>
      <stop offset="55%" stop-color="#adb5bd"/>
      <stop offset="80%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#495057"/>
    </linearGradient>

    <radialGradient id="drumHeadGrad" cx="45%" cy="45%" r="55%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="65%" stop-color="#f1ead8"/>
      <stop offset="92%" stop-color="#d5c7ad"/>
      <stop offset="100%" stop-color="#a8987e"/>
    </radialGradient>

    <linearGradient id="cymbalGrad" x1="0%" y1="0%" x2="100%" y2="25%">
      <stop offset="0%" stop-color="#9c6a1a"/>
      <stop offset="22%" stop-color="#f5c453"/>
      <stop offset="38%" stop-color="#fff3b0"/>
      <stop offset="52%" stop-color="#d99b26"/>
      <stop offset="74%" stop-color="#ffdf78"/>
      <stop offset="100%" stop-color="#7d500d"/>
    </linearGradient>

    <linearGradient id="stickGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffe8b6"/>
      <stop offset="55%" stop-color="#deb068"/>
      <stop offset="100%" stop-color="#9c6b30"/>
    </linearGradient>

    <linearGradient id="stoolCushion" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1f1b29"/>
      <stop offset="35%" stop-color="#433b54"/>
      <stop offset="70%" stop-color="#292336"/>
      <stop offset="100%" stop-color="#120e1a"/>
    </linearGradient>

    <!-- Reusable Sucker Symbol -->
    <g id="sucker">
      <ellipse cx="0" cy="0" rx="7.5" ry="5" fill="url(#suckerGrad)" stroke="#b5342a" stroke-width="1.2"/>
      <ellipse cx="0" cy="0.5" rx="4" ry="2.4" fill="#d96b4c"/>
      <ellipse cx="-1.5" cy="-0.5" rx="1.8" ry="1" fill="#fff5e6" opacity="0.7"/>
    </g>
    <g id="suckerSm">
      <ellipse cx="0" cy="0" rx="5.2" ry="3.6" fill="url(#suckerGrad)" stroke="#b5342a" stroke-width="1"/>
      <ellipse cx="0" cy="0.3" rx="2.6" ry="1.5" fill="#d96b4c"/>
    </g>
  </defs>

  <!-- ==================== 1. DARK STAGE BACKDROP ==================== -->
  <rect x="0" y="0" width="1200" height="850" fill="url(#backdropGrad)"/>

  <!-- Subtle Stage Curtain Folds in Background -->
  <g opacity="0.35" fill="#090612">
    <path d="M0,0 L90,0 L65,620 L0,620 Z"/>
    <path d="M130,0 L210,0 L190,620 L110,620 Z"/>
    <path d="M260,0 L320,0 L305,620 L245,620 Z"/>
    <path d="M880,0 L940,0 L955,620 L895,620 Z"/>
    <path d="M990,0 L1070,0 L1090,620 L1010,620 Z"/>
    <path d="M1110,0 L1200,0 L1200,620 L1135,620 Z"/>
  </g>

  <!-- ==================== 2. STAGE FLOOR ==================== -->
  <!-- Stage Wooden Deck -->
  <path d="M0,595 Q600,575 1200,595 L1200,850 L0,850 Z" fill="url(#stageWood)"/>
  
  <!-- Stage Plank Lines -->
  <g stroke="#180d1a" stroke-width="1.5" opacity="0.55" fill="none">
    <path d="M0,630 Q600,612 1200,630"/>
    <path d="M0,672 Q600,655 1200,672"/>
    <path d="M0,722 Q600,706 1200,722"/>
    <path d="M0,780 Q600,765 1200,780"/>
    <!-- Perspective Plank Joints -->
    <line x1="180" y1="592" x2="60" y2="780"/>
    <line x1="390" y1="586" x2="310" y2="780"/>
    <line x1="600" y1="585" x2="600" y2="780"/>
    <line x1="810" y1="586" x2="890" y2="780"/>
    <line x1="1020" y1="592" x2="1140" y2="780"/>
  </g>

  <!-- Stage Front Lip / Apron -->
  <path d="M0,780 Q600,765 1200,780 L1200,802 Q600,787 0,802 Z" fill="#4f3347" stroke="#120914" stroke-width="2"/>
  <path d="M0,802 Q600,787 1200,802 L1200,850 L0,850 Z" fill="#0d0710"/>

  <!-- Spotlight Lit Pool on Stage Floor -->
  <ellipse cx="590" cy="665" rx="490" ry="85" fill="url(#floorSpotPool)"/>

  <!-- ==================== 3. SHADOW UNDER THE KIT ==================== -->
  <g>
    <!-- Main Unified Kit Shadow -->
    <ellipse cx="585" cy="676" rx="415" ry="48" fill="url(#kitShadowGrad)"/>
    <!-- Individual Grounding Contact Shadows -->
    <ellipse cx="265" cy="680" rx="70" ry="14" fill="#030106" opacity="0.8"/>
    <ellipse cx="420" cy="680" rx="68" ry="14" fill="#030106" opacity="0.8"/>
    <ellipse cx="525" cy="675" rx="62" ry="13" fill="#030106" opacity="0.85"/>
    <ellipse cx="675" cy="678" rx="115" ry="22" fill="#030106" opacity="0.88"/>
    <ellipse cx="838" cy="680" rx="82" ry="16" fill="#030106" opacity="0.82"/>
    <ellipse cx="910" cy="676" rx="58" ry="12" fill="#030106" opacity="0.75"/>
  </g>

  <!-- ==================== 4. BACKGROUND HARDWARE & DRUM STOOL ==================== -->
  <!-- Crash Cymbal Stand (Left Back) -->
  <g id="crashStand">
    <!-- Tripod Legs on Floor -->
    <path d="M335,610 L295,664" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <path d="M335,610 L335,670" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <path d="M335,610 L372,662" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <!-- Support Struts -->
    <path d="M335,638 L310,645 M335,638 L358,645" stroke="#adb5bd" stroke-width="3"/>
    <!-- Rubber Feet -->
    <ellipse cx="293" cy="665" rx="7" ry="4" fill="#1a1a1a"/>
    <ellipse cx="335" cy="672" rx="7" ry="4" fill="#1a1a1a"/>
    <ellipse cx="374" cy="663" rx="7" ry="4" fill="#1a1a1a"/>
    <!-- Vertical Chrome Tube -->
    <line x1="335" y1="285" x2="335" y2="635" stroke="url(#chromeGrad)" stroke-width="7"/>
    <rect x="329" y="450" width="12" height="16" rx="2" fill="#2b2d42" stroke="#dee2e6" stroke-width="1"/>
    <rect x="330" y="602" width="10" height="14" rx="2" fill="#2b2d42"/>
  </g>

  <!-- Ride Cymbal Stand (Right Back) -->
  <g id="rideStand">
    <!-- Tripod Legs on Floor -->
    <path d="M910,612 L868,668" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <path d="M910,612 L910,676" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <path d="M910,612 L952,668" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <!-- Support Struts -->
    <path d="M910,642 L884,648 M910,642 L936,648" stroke="#adb5bd" stroke-width="3"/>
    <!-- Rubber Feet -->
    <ellipse cx="866" cy="669" rx="7" ry="4" fill="#1a1a1a"/>
    <ellipse cx="910" cy="678" rx="7" ry="4" fill="#1a1a1a"/>
    <ellipse cx="954" cy="669" rx="7" ry="4" fill="#1a1a1a"/>
    <!-- Vertical Tube + Boom Arm -->
    <line x1="910" y1="395" x2="910" y2="638" stroke="url(#chromeGrad)" stroke-width="7"/>
    <line x1="910" y1="395" x2="885" y2="335" stroke="url(#chromeGrad)" stroke-width="5.5"/>
    <circle cx="910" cy="395" r="7" fill="#2b2d42" stroke="#f8f9fa" stroke-width="1.5"/>
    <rect x="904" y="510" width="12" height="16" rx="2" fill="#2b2d42" stroke="#dee2e6" stroke-width="1"/>
  </g>

  <!-- Drum Stool (Throne) - Center Open Channel -->
  <g id="drumStool">
    <!-- Tripod Base on Floor -->
    <path d="M525,605 L482,670" stroke="url(#chromeGrad)" stroke-width="7.5" stroke-linecap="round"/>
    <path d="M525,605 L525,678" stroke="url(#chromeGrad)" stroke-width="7.5" stroke-linecap="round"/>
    <path d="M525,605 L566,668" stroke="url(#chromeGrad)" stroke-width="7.5" stroke-linecap="round"/>
    <!-- Double-Braced Struts -->
    <path d="M525,640 L496,650 M525,640 L552,649" stroke="#ced4da" stroke-width="3.5"/>
    <!-- Rubber Feet -->
    <ellipse cx="480" cy="672" rx="8" ry="4.5" fill="#141414"/>
    <ellipse cx="525" cy="680" rx="8" ry="4.5" fill="#141414"/>
    <ellipse cx="568" cy="670" rx="8" ry="4.5" fill="#141414"/>
    <!-- Center Post -->
    <rect x="520" y="455" width="10" height="175" fill="url(#chromeGrad)" stroke="#343a40" stroke-width="1"/>
    <rect x="517" y="535" width="16" height="14" rx="2" fill="#212529" stroke="#adb5bd" stroke-width="1"/>
    <rect x="518" y="595" width="14" height="16" rx="2" fill="#212529"/>
    <!-- Padded Stool Cushion -->
    <path d="M471,442 C471,462 579,462 579,442 L579,422 C579,440 471,440 471,422 Z" fill="url(#stoolCushion)" stroke="#100c18" stroke-width="2"/>
    <ellipse cx="525" cy="422" rx="54" ry="16" fill="#373047" stroke="#6c6382" stroke-width="1.5"/>
    <path d="M474,433 C495,445 555,445 576,433" fill="none" stroke="#c9184a" stroke-width="2" opacity="0.8"/>
  </g>

  <!-- ==================== 5. THE OCTOPUS (BODY, HEAD & 8 ARMS) ==================== -->
  <!--
    Topological 4-Left / 4-Right Non-Crossing Arm Layout:
    Left Side:
      Arm 1 (Top-Left, root 470,348)    -> Grips Stick 1 -> Tip touches Tilted Crash Cymbal (342,276)
      Arm 2 (Upper-Mid-Left, root 462,372) -> Grips Stick 2 -> Tip touches Hi-Hat Cymbal (265,442)
      Arm 3 (Lower-Mid-Left, root 468,395) -> Grips Stick 3 -> Tip touches Snare Drum (420,502)
      Arm 4 (Bottom-Left, root 484,414) -> Reaches down -> Works Hi-Hat Pedal (285,663)
    Right Side:
      Arm 5 (Bottom-Center, root 518,420) -> Reaches down -> Grips Drum Stool (525,495)
      Arm 6 (Bottom-Right, root 550,415) -> Reaches down -> Presses Bass-Drum Pedal (600,655)
      Arm 7 (Mid-Right, root 578,382)    -> Grips Stick 4 -> Tip touches Floor Tom (835,510)
      Arm 8 (Top-Right, root 574,348)    -> Grips Stick 5 -> Tip touches Ride Cymbal (882,330)
  -->

  <!-- Central Body Skirt Sitting on Stool -->
  <path d="M466,342 C455,375 462,415 482,424 C508,434 545,434 570,422 C588,412 590,375 576,342 Z"
        fill="url(#octoHeadGrad)" stroke="#7a1128" stroke-width="2.5"/>

  <!-- ========== ARM 1: Upper-Left -> Swings Stick 1 at Crash Cymbal ========== -->
  <g id="arm1">
    <!-- Suckers on Underside of Arm 1 -->
    <use href="#sucker" transform="translate(442,336) rotate(-145)"/>
    <use href="#sucker" transform="translate(420,308) rotate(-130)"/>
    <use href="#sucker" transform="translate(402,276) rotate(-115)"/>
    <use href="#suckerSm" transform="translate(388,244) rotate(-95)"/>
    <use href="#suckerSm" transform="translate(384,218) rotate(-65)"/>
    <!-- Main Arm 1 Path -->
    <path d="M474,342 C448,318 424,278 412,238 C405,214 396,192 382,196 C370,200 374,222 392,226 C400,228 404,214 394,208
             C382,202 384,228 394,254 C406,288 428,328 464,362 Z"
          fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M468,344 C444,316 420,276 408,236" fill="none" stroke="#ffa679" stroke-width="3.5" stroke-linecap="round" opacity="0.7"/>
  </g>

  <!-- ========== ARM 2: Mid-Upper-Left -> Swings Stick 2 at Hi-Hat ========== -->
  <g id="arm2">
    <!-- Suckers on Underside of Arm 2 -->
    <use href="#sucker" transform="translate(432,378) rotate(172)"/>
    <use href="#sucker" transform="translate(398,370) rotate(168)"/>
    <use href="#sucker" transform="translate(364,366) rotate(160)"/>
    <use href="#suckerSm" transform="translate(332,374) rotate(135)"/>
    <use href="#suckerSm" transform="translate(308,390) rotate(95)"/>
    <!-- Main Arm 2 Path -->
    <path d="M466,364 C428,350 382,340 344,352 C318,360 296,374 302,390 C306,402 328,400 330,384 C332,374 316,372 312,382
             C308,390 326,386 350,374 C382,360 424,370 464,384 Z"
          fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M462,367 C425,354 382,346 344,356" fill="none" stroke="#ffa679" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
  </g>

  <!-- ========== ARM 3: Mid-Lower-Left -> Swings Stick 3 at Snare ========== -->
  <g id="arm3">
    <!-- Suckers on Underside of Arm 3 -->
    <use href="#sucker" transform="translate(448,412) rotate(150)"/>
    <use href="#sucker" transform="translate(422,428) rotate(145)"/>
    <use href="#suckerSm" transform="translate(396,448) rotate(135)"/>
    <use href="#suckerSm" transform="translate(374,458) rotate(165)"/>
    <!-- Main Arm 3 Path -->
    <path d="M468,386 C438,396 408,412 386,430 C372,442 364,454 374,462 C384,470 402,460 398,446 C394,436 380,438 380,448
             C380,456 398,448 416,432 C436,416 454,408 474,404 Z"
          fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M464,390 C436,400 408,415 388,432" fill="none" stroke="#ffa679" stroke-width="2.8" stroke-linecap="round" opacity="0.6"/>
  </g>

  <!-- ========== ARM 4: Bottom-Left -> Works the Hi-Hat Pedal ========== -->
  <g id="arm4">
    <!-- Suckers on Underside of Arm 4 -->
    <use href="#sucker" transform="translate(476,458) rotate(110)"/>
    <use href="#sucker" transform="translate(464,496) rotate(115)"/>
    <use href="#sucker" transform="translate(448,536) rotate(122)"/>
    <use href="#sucker" transform="translate(425,574) rotate(130)"/>
    <use href="#suckerSm" transform="translate(396,608) rotate(140)"/>
    <use href="#suckerSm" transform="translate(362,636) rotate(150)"/>
    <use href="#suckerSm" transform="translate(326,656) rotate(162)"/>
    <!-- Main Arm 4 Path (Reaches cleanly to Hi-Hat Pedal at 285,663) -->
    <path d="M474,404 C458,446 446,502 422,548 C394,600 348,638 292,654 C274,658 272,668 286,670 C306,672 344,656 382,626
             C426,590 458,536 476,476 C484,448 490,426 496,416 Z"
          fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M476,416 C460,462 444,518 416,568 C390,612 344,644 290,660" fill="none" stroke="#ffa679" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
  </g>

  <!-- ========== ARM 5: Bottom-Center -> Grips the Drum Stool ========== -->
  <g id="arm5">
    <!-- Suckers on Underside of Arm 5 -->
    <use href="#sucker" transform="translate(498,445) rotate(95)"/>
    <use href="#sucker" transform="translate(496,472) rotate(65)"/>
    <use href="#suckerSm" transform="translate(544,492) rotate(-75)"/>
    <use href="#suckerSm" transform="translate(536,518) rotate(110)"/>
    <!-- Main Arm 5 Path (Wraps around stool seat & chrome post) -->
    <path d="M506,416 C496,442 492,468 504,484 C514,498 538,496 540,508 C542,516 522,520 510,516 C502,514 500,524 512,528
             C532,534 556,522 554,502 C552,482 522,480 516,464 C512,450 520,432 528,418 Z"
          fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M514,422 C504,445 502,468 514,482 C526,494 548,496 546,512" fill="none" stroke="#ffa679" stroke-width="2.8" stroke-linecap="round" opacity="0.7"/>
  </g>

  <!-- ========== ARM 6: Bottom-Right -> Presses Bass-Drum Pedal ========== -->
  <g id="arm6">
    <!-- Suckers on Underside of Arm 6 -->
    <use href="#sucker" transform="translate(544,462) rotate(78)"/>
    <use href="#sucker" transform="translate(550,504) rotate(74)"/>
    <use href="#sucker" transform="translate(558,546) rotate(68)"/>
    <use href="#suckerSm" transform="translate(568,588) rotate(60)"/>
    <use href="#suckerSm" transform="translate(580,626) rotate(48)"/>
    <!-- Main Arm 6 Path (Reaches down to Bass-Drum Pedal footboard at 600,655) -->
    <path d="M538,418 C542,464 548,524 562,578 C572,618 584,650 598,660 C610,668 620,658 608,648 C596,638 586,608 578,568
             C568,518 564,462 562,412 Z"
          fill="url(#octoArmGradR)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M554,420 C556,468 562,524 574,576 C582,612 592,642 604,654" fill="none" stroke="#ffa679" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
  </g>

  <!-- ========== ARM 7: Mid-Right -> Swings Stick 4 at Floor Tom ========== -->
  <g id="arm7">
    <!-- Suckers on Underside of Arm 7 -->
    <use href="#sucker" transform="translate(612,386) rotate(-12)"/>
    <use href="#sucker" transform="translate(652,374) rotate(-8)"/>
    <use href="#sucker" transform="translate(694,372) rotate(8)"/>
    <use href="#sucker" transform="translate(734,382) rotate(25)"/>
    <use href="#suckerSm" transform="translate(768,404) rotate(42)"/>
    <use href="#suckerSm" transform="translate(794,432) rotate(65)"/>
    <!-- Main Arm 7 Path (Sweeps above Rack Toms to grip Stick 4 at 792,428) -->
    <path d="M572,370 C618,352 674,344 726,358 C764,368 798,394 808,420 C814,436 798,448 784,438 C774,430 782,414 794,420
             C800,424 794,404 764,386 C720,360 662,364 614,378 C594,384 580,392 568,398 Z"
          fill="url(#octoArmGradR)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M576,374 C622,356 676,350 726,363 C762,372 790,394 802,418" fill="none" stroke="#ffa679" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
  </g>

  <!-- ========== ARM 8: Upper-Right -> Swings Stick 5 at Ride Cymbal ========== -->
  <g id="arm8">
    <!-- Suckers on Underside of Arm 8 -->
    <use href="#sucker" transform="translate(612,334) rotate(-32)"/>
    <use href="#sucker" transform="translate(648,308) rotate(-28)"/>
    <use href="#sucker" transform="translate(688,286) rotate(-18)"/>
    <use href="#sucker" transform="translate(732,272) rotate(-5)"/>
    <use href="#suckerSm" transform="translate(774,268) rotate(12)"/>
    <use href="#suckerSm" transform="translate(808,274) rotate(35)"/>
    <!-- Main Arm 8 Path (Sweeps high up-right to grip Stick 5 at 818,262) -->
    <path d="M568,340 C606,304 658,266 718,252 C764,240 812,242 828,258 C838,268 824,286 808,276 C798,270 806,254 818,258
             C824,260 806,252 770,256 C716,262 660,288 614,324 C596,338 584,352 574,364 Z"
          fill="url(#octoArmGradR)" stroke="#7a1128" stroke-width="2.5" stroke-linejoin="round"/>
    <!-- Highlight -->
    <path d="M574,342 C612,308 662,272 720,257 C760,247 802,248 820,258" fill="none" stroke="#ffa679" stroke-width="3.5" stroke-linecap="round" opacity="0.75"/>
  </g>

  <!-- ========== OCTOPUS HEAD & EXPRESSIVE FACE ========== -->
  <g id="octopusHead" transform="rotate(-4, 525, 265)">
    <!-- Rounded Mantle Head -->
    <path d="M442,275 C430,205 462,135 526,135 C590,135 622,205 608,275 C602,310 588,334 576,348 C545,362 505,362 472,348 C458,334 448,310 442,275 Z"
          fill="url(#octoHeadGrad)" stroke="#7a1128" stroke-width="3"/>

    <!-- Top Specular Gloss & Textured Spots -->
    <ellipse cx="495" cy="175" rx="34" ry="18" transform="rotate(-22, 495, 175)" fill="#ffc299" opacity="0.45"/>
    <circle cx="468" cy="205" r="7" fill="#ff9e6d" opacity="0.4"/>
    <circle cx="568" cy="182" r="11" fill="#b51f38" opacity="0.35"/>
    <circle cx="585" cy="212" r="6.5" fill="#b51f38" opacity="0.35"/>
    <circle cx="552" cy="160" r="6" fill="#ff9e6d" opacity="0.35"/>

    <!-- Brow Ridges -->
    <path d="M462,258 Q488,240 514,258" fill="none" stroke="#7a1128" stroke-width="4" stroke-linecap="round"/>
    <path d="M536,258 Q562,240 588,258" fill="none" stroke="#7a1128" stroke-width="4" stroke-linecap="round"/>

    <!-- Left Eye -->
    <g id="leftEye">
      <ellipse cx="490" cy="284" rx="24" ry="27" fill="#fffdf7" stroke="#7a1128" stroke-width="2.5"/>
      <!-- Iris & Pupil -->
      <ellipse cx="493" cy="283" rx="14" ry="16" fill="#2b193d"/>
      <ellipse cx="493" cy="283" rx="9" ry="11" fill="#0d0614"/>
      <!-- Catchlights -->
      <circle cx="487" cy="275" r="5.5" fill="#ffffff"/>
      <circle cx="499" cy="290" r="2.5" fill="#ffffff"/>
      <!-- Happy Lower Eyelid Curve -->
      <path d="M465,294 Q490,278 515,294 C512,308 470,308 465,294 Z" fill="#ec412b"/>
      <path d="M464,294 Q490,278 516,294" fill="none" stroke="#7a1128" stroke-width="2.5" stroke-linecap="round"/>
    </g>

    <!-- Right Eye -->
    <g id="rightEye">
      <ellipse cx="558" cy="284" rx="24" ry="27" fill="#fffdf7" stroke="#7a1128" stroke-width="2.5"/>
      <!-- Iris & Pupil -->
      <ellipse cx="555" cy="283" rx="14" ry="16" fill="#2b193d"/>
      <ellipse cx="555" cy="283" rx="9" ry="11" fill="#0d0614"/>
      <!-- Catchlights -->
      <circle cx="549" cy="275" r="5.5" fill="#ffffff"/>
      <circle cx="561" cy="290" r="2.5" fill="#ffffff"/>
      <!-- Happy Lower Eyelid Curve -->
      <path d="M533,294 Q558,278 583,294 C580,308 538,308 533,294 Z" fill="#dd342b"/>
      <path d="M532,294 Q558,278 584,294" fill="none" stroke="#7a1128" stroke-width="2.5" stroke-linecap="round"/>
    </g>

    <!-- Joyful Singing/Grooving Mouth -->
    <path d="M502,315 Q525,308 548,315 C552,338 538,350 525,350 C512,350 498,338 502,315 Z" fill="#590d22" stroke="#7a1128" stroke-width="2.5"/>
    <path d="M509,334 Q525,323 541,334 C537,345 513,345 509,334 Z" fill="#ff758f"/>
    <!-- Cheek Dimples -->
    <path d="M494,312 Q498,318 493,323" fill="none" stroke="#7a1128" stroke-width="2" stroke-linecap="round"/>
    <path d="M556,312 Q552,318 557,323" fill="none" stroke="#7a1128" stroke-width="2" stroke-linecap="round"/>
  </g>

  <!-- Groove Vibe Sweat Drops / Energy Sparks Around Head -->
  <g fill="#72efdd" opacity="0.85">
    <path d="M418,178 C410,172 405,180 412,186 C416,189 422,184 418,178 Z"/>
    <path d="M624,168 C632,160 638,168 630,175 C625,179 620,173 624,168 Z"/>
    <path d="M642,195 C648,191 652,197 646,201 C642,204 639,198 642,195 Z"/>
  </g>

  <!-- ==================== 6. COMPLETE DRUM KIT ==================== -->

  <!-- ---------- A. BASS DRUM & PEDAL (Center-Right) ---------- -->
  <g id="bassDrum">
    <!-- Rear Bass Drum Spur (Left Leg) -->
    <line x1="635" y1="625" x2="618" y2="676" stroke="url(#chromeGrad)" stroke-width="5.5" stroke-linecap="round"/>
    <ellipse cx="617" cy="677" rx="7" ry="4" fill="#141414"/>

    <!-- Bass Drum Cylindrical Shell (Angled 3/4 View) -->
    <path d="M640,482 L718,488 C758,492 778,532 776,582 C774,630 748,668 708,666 L630,660 Z"
          fill="url(#bassShell)" stroke="#041b24" stroke-width="2.5"/>

    <!-- Shell Decorative Stripe -->
    <path d="M668,484 L684,485 C722,492 742,532 740,582 C738,630 712,665 674,663 L658,662 C696,664 722,628 724,580 C726,532 706,492 668,484 Z"
          fill="#ffbe0b" opacity="0.85"/>

    <!-- Batter Hoop (Left/Back Rim Facing Octopus) -->
    <ellipse cx="635" cy="571" rx="44" ry="89" fill="#123542" stroke="#dee2e6" stroke-width="4"/>
    <ellipse cx="638" cy="571" rx="39" ry="82" fill="url(#drumHeadGrad)"/>

    <!-- Impact Ripples on Batter Head around Beater -->
    <ellipse cx="628" cy="575" rx="14" ry="28" fill="none" stroke="#f77f00" stroke-width="2" stroke-dasharray="6,4" opacity="0.75"/>
    <ellipse cx="628" cy="575" rx="22" ry="44" fill="none" stroke="#fcbf49" stroke-width="1.5" stroke-dasharray="5,5" opacity="0.55"/>

    <!-- Resonant Front Hoop & Head (Right/Front Side) -->
    <ellipse cx="716" cy="577" rx="46" ry="89" fill="#09222c" stroke="url(#chromeGrad)" stroke-width="5"/>
    <ellipse cx="714" cy="577" rx="41" ry="82" fill="url(#drumHeadGrad)" stroke="#adb5bd" stroke-width="1.5"/>
    <!-- Resonant Head Graphic (Geometric Starburst + Port Hole, No Text) -->
    <circle cx="716" cy="577" r="28" fill="none" stroke="#147a8f" stroke-width="2.5" opacity="0.5"/>
    <polygon points="716,532 722,562 742,552 727,574 745,592 723,588 716,618 709,588 688,592 705,574 690,552 710,562" fill="#e63946" opacity="0.75"/>
    <!-- Bass Drum Port Hole -->
    <ellipse cx="732" cy="608" rx="10" ry="18" fill="#071318" stroke="#d4a373" stroke-width="2"/>

    <!-- Chrome Tension Lugs Across Shell -->
    <g stroke="url(#chromeGrad)" stroke-width="3" stroke-linecap="round">
      <line x1="628" y1="502" x2="698" y2="508"/>
      <line x1="612" y1="538" x2="682" y2="544"/>
      <line x1="610" y1="602" x2="680" y2="608"/>
      <line x1="625" y1="640" x2="695" y2="646"/>
    </g>

    <!-- Front Bass Drum Spur (Right Leg) -->
    <line x1="726" y1="622" x2="758" y2="676" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <ellipse cx="760" cy="677" rx="8" ry="4.5" fill="#141414"/>

    <!-- BASS-DRUM PEDAL ASSEMBLY (Pressed by Arm 6) -->
    <g id="bassDrumPedal">
      <!-- Baseplate on Floor -->
      <path d="M582,664 L634,672 L640,664 L588,656 Z" fill="#2b2d42" stroke="#8d99ae" stroke-width="1.5"/>
      <!-- Vertical Frame Posts -->
      <line x1="628" y1="668" x2="628" y2="612" stroke="url(#chromeGrad)" stroke-width="5"/>
      <line x1="618" y1="664" x2="618" y2="614" stroke="#6c757d" stroke-width="4"/>
      <!-- Beater Shaft & Felt Beater Head Hitting Bass Drum -->
      <line x1="623" y1="615" x2="628" y2="574" stroke="url(#chromeGrad)" stroke-width="4"/>
      <ellipse cx="628" cy="572" rx="8" ry="11" fill="#fffdf7" stroke="#adb5bd" stroke-width="2"/>
      <!-- Footboard Pressed by Arm 6 at (600, 655) -->
      <path d="M584,658 L626,626 L632,632 L590,664 Z" fill="url(#chromeGrad)" stroke="#212529" stroke-width="1.5"/>
      <!-- Rebound Motion Arc on Beater -->
      <path d="M606,565 A22,22 0 0,1 618,548" fill="none" stroke="#ffbe0b" stroke-width="2.5" stroke-linecap="round"/>
      <path d="M600,572 A28,28 0 0,1 614,542" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" opacity="0.8"/>
    </g>
  </g>

  <!-- ---------- B. TWO RACK TOMS & MOUNT (Mounted on Bass Drum) ---------- -->
  <g id="rackToms">
    <!-- Central Double-Tom Holder Post Rising from Bass Drum -->
    <ellipse cx="672" cy="486" rx="14" ry="6" fill="#2b2d42" stroke="#dee2e6" stroke-width="1.5"/>
    <line x1="672" y1="486" x2="672" y2="418" stroke="url(#chromeGrad)" stroke-width="8"/>
    <rect x="664" y="414" width="16" height="14" rx="3" fill="#212529" stroke="#dee2e6" stroke-width="1.5"/>
    <!-- Left & Right L-Arms to Rack Toms -->
    <path d="M666,420 L642,420 L638,442" fill="none" stroke="url(#chromeGrad)" stroke-width="5" stroke-linejoin="round"/>
    <path d="M678,420 L702,420 L706,445" fill="none" stroke="url(#chromeGrad)" stroke-width="5" stroke-linejoin="round"/>

    <!-- Rack Tom 1 (High Tom - Left, cx=610, cy=438) -->
    <g id="rackTom1" transform="rotate(-8, 610, 438)">
      <path d="M566,416 L654,416 L654,468 C654,480 566,480 566,468 Z" fill="url(#tealShell)" stroke="#05222b" stroke-width="2"/>
      <!-- Bottom Rim -->
      <path d="M564,466 C564,479 656,479 656,466" fill="none" stroke="url(#chromeGrad)" stroke-width="4.5"/>
      <!-- Tension Lugs -->
      <line x1="578" y1="422" x2="578" y2="470" stroke="url(#chromeGrad)" stroke-width="2.5"/>
      <line x1="610" y1="426" x2="610" y2="474" stroke="url(#chromeGrad)" stroke-width="2.5"/>
      <line x1="642" y1="422" x2="642" y2="470" stroke="url(#chromeGrad)" stroke-width="2.5"/>
      <!-- Top Batter Head & Hoop -->
      <ellipse cx="610" cy="416" rx="45" ry="13" fill="url(#drumHeadGrad)" stroke="url(#chromeGrad)" stroke-width="4.5"/>
      <ellipse cx="610" cy="416" rx="18" ry="5" fill="none" stroke="#adb5bd" stroke-width="1" opacity="0.6"/>
    </g>

    <!-- Rack Tom 2 (Mid Tom - Right, cx=726, cy=444) -->
    <g id="rackTom2" transform="rotate(6, 726, 444)">
      <path d="M676,418 L776,418 L776,478 C776,492 676,492 676,478 Z" fill="url(#tealShell)" stroke="#05222b" stroke-width="2"/>
      <!-- Bottom Rim -->
      <path d="M674,476 C674,491 778,491 778,476" fill="none" stroke="url(#chromeGrad)" stroke-width="4.5"/>
      <!-- Tension Lugs -->
      <line x1="690" y1="424" x2="690" y2="480" stroke="url(#chromeGrad)" stroke-width="2.5"/>
      <line x1="726" y1="428" x2="726" y2="484" stroke="url(#chromeGrad)" stroke-width="2.5"/>
      <line x1="762" y1="424" x2="762" y2="480" stroke="url(#chromeGrad)" stroke-width="2.5"/>
      <!-- Top Batter Head & Hoop -->
      <ellipse cx="726" cy="418" rx="51" ry="15" fill="url(#drumHeadGrad)" stroke="url(#chromeGrad)" stroke-width="4.5"/>
      <ellipse cx="726" cy="418" rx="22" ry="6" fill="none" stroke="#adb5bd" stroke-width="1" opacity="0.6"/>
    </g>
  </g>

  <!-- ---------- C. FLOOR TOM (Right Side, Standing on 3 Legs) ---------- -->
  <g id="floorTom">
    <!-- Back Leg -->
    <line x1="782" y1="565" x2="774" y2="674" stroke="url(#chromeGrad)" stroke-width="5" stroke-linecap="round"/>
    <ellipse cx="774" cy="676" rx="7" ry="4" fill="#141414"/>

    <!-- Floor Tom Shell -->
    <path d="M772,510 L898,510 L898,616 C898,636 772,636 772,616 Z" fill="url(#tealShell)" stroke="#05222b" stroke-width="2.2"/>
    <!-- Decorative Band -->
    <path d="M772,555 C772,572 898,572 898,555 L898,566 C898,583 772,583 772,566 Z" fill="#ffbe0b" opacity="0.8"/>

    <!-- Bottom Rim -->
    <path d="M770,614 C770,636 900,636 900,614" fill="none" stroke="url(#chromeGrad)" stroke-width="5"/>

    <!-- Tension Lugs -->
    <line x1="788" y1="518" x2="788" y2="620" stroke="url(#chromeGrad)" stroke-width="3"/>
    <line x1="818" y1="524" x2="818" y2="626" stroke="url(#chromeGrad)" stroke-width="3"/>
    <line x1="852" y1="524" x2="852" y2="626" stroke="url(#chromeGrad)" stroke-width="3"/>
    <line x1="882" y1="518" x2="882" y2="620" stroke="url(#chromeGrad)" stroke-width="3"/>

    <!-- Top Batter Head & Hoop -->
    <ellipse cx="835" cy="510" rx="64" ry="19" fill="url(#drumHeadGrad)" stroke="url(#chromeGrad)" stroke-width="5"/>
    <!-- Impact Ring at Stick 4 Tip (835, 510) -->
    <ellipse cx="835" cy="510" rx="22" ry="7" fill="none" stroke="#f77f00" stroke-width="2" stroke-dasharray="6,4" opacity="0.85"/>
    <ellipse cx="835" cy="510" rx="36" ry="11" fill="none" stroke="#fcbf49" stroke-width="1.5" stroke-dasharray="5,5" opacity="0.6"/>

    <!-- Front & Right Floor Tom Legs + Brackets -->
    <rect x="830" y="572" width="10" height="18" rx="2" fill="url(#chromeGrad)" stroke="#212529" stroke-width="1"/>
    <line x1="835" y1="585" x2="835" y2="684" stroke="url(#chromeGrad)" stroke-width="5.5" stroke-linecap="round"/>
    <ellipse cx="835" cy="686" rx="7.5" ry="4" fill="#141414"/>

    <rect x="890" y="562" width="9" height="18" rx="2" fill="url(#chromeGrad)" stroke="#212529" stroke-width="1"/>
    <line x1="895" y1="575" x2="902" y2="674" stroke="url(#chromeGrad)" stroke-width="5.5" stroke-linecap="round"/>
    <ellipse cx="902" cy="676" rx="7.5" ry="4" fill="#141414"/>
  </g>

  <!-- ---------- D. SNARE DRUM ON STAND (Left Center) ---------- -->
  <g id="snareDrum">
    <!-- Snare Stand Tripod Base on Floor -->
    <path d="M420,612 L374,674" stroke="url(#chromeGrad)" stroke-width="6.5" stroke-linecap="round"/>
    <path d="M420,612 L420,682" stroke="url(#chromeGrad)" stroke-width="6.5" stroke-linecap="round"/>
    <path d="M420,612 L466,674" stroke="url(#chromeGrad)" stroke-width="6.5" stroke-linecap="round"/>
    <path d="M420,645 L390,654 M420,645 L450,654" stroke="#adb5bd" stroke-width="3"/>
    <!-- Rubber Feet -->
    <ellipse cx="372" cy="676" rx="7.5" ry="4" fill="#141414"/>
    <ellipse cx="420" cy="684" rx="7.5" ry="4" fill="#141414"/>
    <ellipse cx="468" cy="676" rx="7.5" ry="4" fill="#141414"/>
    <!-- Stand Center Tube & Basket -->
    <line x1="420" y1="555" x2="420" y2="635" stroke="url(#chromeGrad)" stroke-width="7.5"/>
    <rect x="414" y="585" width="12" height="14" rx="2" fill="#212529" stroke="#dee2e6" stroke-width="1"/>
    <path d="M420,562 L365,542 M420,562 L420,552 M420,562 L475,542" stroke="url(#chromeGrad)" stroke-width="5" stroke-linecap="round"/>

    <!-- Snare Shell -->
    <path d="M358,502 L482,502 L482,542 C482,558 358,558 358,542 Z" fill="url(#snareShell)" stroke="#3d250c" stroke-width="2"/>
    <!-- Bottom Rim -->
    <path d="M356,540 C356,558 484,558 484,540" fill="none" stroke="url(#chromeGrad)" stroke-width="5"/>
    <!-- Tension Lugs & Strainer -->
    <line x1="372" y1="506" x2="372" y2="544" stroke="url(#chromeGrad)" stroke-width="3"/>
    <line x1="396" y1="510" x2="396" y2="548" stroke="url(#chromeGrad)" stroke-width="3"/>
    <line x1="420" y1="512" x2="420" y2="550" stroke="url(#chromeGrad)" stroke-width="3"/>
    <line x1="444" y1="510" x2="444" y2="548" stroke="url(#chromeGrad)" stroke-width="3"/>
    <line x1="468" y1="506" x2="468" y2="544" stroke="url(#chromeGrad)" stroke-width="3"/>

    <!-- Top Batter Head & Hoop -->
    <ellipse cx="420" cy="502" rx="63" ry="18" fill="url(#drumHeadGrad)" stroke="url(#chromeGrad)" stroke-width="5"/>
    <!-- Impact Ripples at Stick 3 Tip (420, 502) -->
    <ellipse cx="420" cy="502" rx="20" ry="6" fill="none" stroke="#e63946" stroke-width="2" stroke-dasharray="5,4" opacity="0.85"/>
    <ellipse cx="420" cy="502" rx="36" ry="10.5" fill="none" stroke="#f77f00" stroke-width="1.5" stroke-dasharray="6,5" opacity="0.65"/>
  </g>

  <!-- ---------- E. HI-HAT STAND, PEDAL & CYMBALS (Far Left) ---------- -->
  <g id="hiHat">
    <!-- Tripod Legs on Floor -->
    <path d="M260,610 L214,676" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <path d="M260,610 L256,684" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <path d="M260,610 L308,672" stroke="url(#chromeGrad)" stroke-width="6" stroke-linecap="round"/>
    <path d="M260,645 L230,653 M260,645 L292,652" stroke="#adb5bd" stroke-width="3"/>
    <!-- Rubber Feet -->
    <ellipse cx="212" cy="677" rx="7" ry="4" fill="#141414"/>
    <ellipse cx="256" cy="686" rx="7" ry="4" fill="#141414"/>
    <ellipse cx="310" cy="673" rx="7" ry="4" fill="#141414"/>

    <!-- Hi-Hat Pedal Footboard (Worked by Arm 4 at 285, 663) -->
    <path d="M256,676 L305,650 L312,658 L262,682 Z" fill="url(#chromeGrad)" stroke="#212529" stroke-width="1.5"/>
    <line x1="260" y1="676" x2="260" y2="635" stroke="#495057" stroke-width="3"/>
    <!-- Pedal Motion Arcs -->
    <path d="M294,640 Q306,645 304,656" fill="none" stroke="#ffbe0b" stroke-width="2.2" stroke-linecap="round"/>
    <path d="M302,636 Q315,643 313,656" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.75"/>

    <!-- Vertical Chrome Tube -->
    <line x1="260" y1="455" x2="260" y2="668" stroke="url(#chromeGrad)" stroke-width="6.5"/>
    <rect x="254" y="535" width="12" height="15" rx="2" fill="#212529" stroke="#dee2e6" stroke-width="1"/>

    <!-- Bottom Hi-Hat Cymbal -->
    <ellipse cx="260" cy="456" rx="64" ry="15" fill="url(#cymbalGrad)" stroke="#5c3a08" stroke-width="1.8"/>
    <!-- Dark Gap Between Cymbals -->
    <ellipse cx="260" cy="451" rx="58" ry="11" fill="#110c1d"/>
    <!-- Top Hi-Hat Cymbal -->
    <ellipse cx="260" cy="446" rx="64" ry="15" fill="url(#cymbalGrad)" stroke="#5c3a08" stroke-width="1.8"/>
    <!-- Cymbal Bell & Lathing Lines -->
    <ellipse cx="260" cy="444" rx="44" ry="9.5" fill="none" stroke="#8a5a12" stroke-width="1" opacity="0.6"/>
    <path d="M242,445 C242,436 278,436 278,445 Z" fill="url(#cymbalGrad)" stroke="#6e470b" stroke-width="1.5"/>
    <!-- Pull Rod & Clutch -->
    <line x1="260" y1="412" x2="260" y2="440" stroke="url(#chromeGrad)" stroke-width="3.5"/>
    <rect x="255" y="432" width="10" height="8" rx="2" fill="#212529" stroke="#dee2e6" stroke-width="1"/>
  </g>

  <!-- ---------- F. TILTED CRASH CYMBAL (Upper Left, cx=335, cy=285) ---------- -->
  <g id="crashCymbal" transform="translate(335, 285) rotate(-22)">
    <!-- Cymbal Disc -->
    <ellipse cx="0" cy="0" rx="82" ry="23" fill="url(#cymbalGrad)" stroke="#5c3a08" stroke-width="2"/>
    <!-- Concentric Lathing Grooves -->
    <ellipse cx="0" cy="0" rx="64" ry="17.5" fill="none" stroke="#8a5a12" stroke-width="1" opacity="0.65"/>
    <ellipse cx="0" cy="0" rx="44" ry="12" fill="none" stroke="#8a5a12" stroke-width="1" opacity="0.65"/>
    <!-- Raised Bell Dome -->
    <path d="M-22,-1 C-22,-14 22,-14 22,-1 C14,4 -14,4 -22,-1 Z" fill="url(#cymbalGrad)" stroke="#6e470b" stroke-width="1.5"/>
    <!-- Felt & Wingnut -->
    <ellipse cx="0" cy="-8" rx="6" ry="3" fill="#212529"/>
    <path d="M-7,-13 L7,-13 M0,-16 L0,-8" stroke="url(#chromeGrad)" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- ---------- G. RIDE CYMBAL (Upper Right, cx=885, cy=335) ---------- -->
  <g id="rideCymbal" transform="translate(885, 335) rotate(14)">
    <!-- Cymbal Disc -->
    <ellipse cx="0" cy="0" rx="92" ry="26" fill="url(#cymbalGrad)" stroke="#5c3a08" stroke-width="2"/>
    <!-- Concentric Lathing Grooves -->
    <ellipse cx="0" cy="0" rx="72" ry="20" fill="none" stroke="#8a5a12" stroke-width="1" opacity="0.65"/>
    <ellipse cx="0" cy="0" rx="50" ry="14" fill="none" stroke="#8a5a12" stroke-width="1" opacity="0.65"/>
    <!-- Raised Bell Dome -->
    <path d="M-24,-1 C-24,-15 24,-15 24,-1 C15,4 -15,4 -24,-1 Z" fill="url(#cymbalGrad)" stroke="#6e470b" stroke-width="1.5"/>
    <!-- Felt & Wingnut -->
    <ellipse cx="0" cy="-9" rx="6" ry="3" fill="#212529"/>
    <path d="M-7,-14 L7,-14 M0,-17 L0,-9" stroke="url(#chromeGrad)" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- ==================== 7. DRUMSTICKS & TENTACLE GRIP OVERLAYS ==================== -->
  <!--
    Every drumstick is gripped at one end by an arm, and its tip touches the drum or cymbal it is hitting:
      Stick 1: Butt at (400,200), gripped by Arm 1 at (390,210), tip at (342,276) on Crash Cymbal
      Stick 2: Butt at (326,372), gripped by Arm 2 at (316,380), tip at (265,442) on Hi-Hat Cymbal
      Stick 3: Butt at (378,438), gripped by Arm 3 at (385,446), tip at (420,502) on Snare Drum
      Stick 4: Butt at (784,418), gripped by Arm 7 at (792,428), tip at (835,510) on Floor Tom
      Stick 5: Butt at (808,252), gripped by Arm 8 at (818,262), tip at (882,330) on Ride Cymbal
  -->

  <!-- STICK 1 (Arm 1 -> Crash Cymbal at 342, 276) -->
  <g id="stick1">
    <path d="M401,197 L344,274 L340,272 L395,193 Z" fill="url(#stickGrad)" stroke="#5c3a08" stroke-width="1.5"/>
    <ellipse cx="342" cy="275" rx="4.5" ry="3.2" transform="rotate(-52, 342, 275)" fill="#ffe8b6" stroke="#5c3a08" stroke-width="1.5"/>
    <!-- Tentacle Tip Wrapping Over Stick Handle -->
    <path d="M380,202 C386,194 402,202 396,214 C392,222 376,214 380,202 Z" fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2"/>
  </g>

  <!-- STICK 2 (Arm 2 -> Hi-Hat Cymbal at 265, 442) -->
  <g id="stick2">
    <path d="M328,370 L267,441 L263,439 L322,366 Z" fill="url(#stickGrad)" stroke="#5c3a08" stroke-width="1.5"/>
    <ellipse cx="265" cy="442" rx="4.5" ry="3.2" transform="rotate(-48, 265, 442)" fill="#ffe8b6" stroke="#5c3a08" stroke-width="1.5"/>
    <!-- Tentacle Tip Wrapping Over Stick Handle -->
    <path d="M306,376 C312,368 328,376 322,388 C316,396 302,388 306,376 Z" fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2"/>
  </g>

  <!-- STICK 3 (Arm 3 -> Snare Drum at 420, 502) -->
  <g id="stick3">
    <path d="M376,435 L421,500 L417,503 L370,439 Z" fill="url(#stickGrad)" stroke="#5c3a08" stroke-width="1.5"/>
    <ellipse cx="420" cy="502" rx="4.5" ry="3.2" transform="rotate(55, 420, 502)" fill="#ffe8b6" stroke="#5c3a08" stroke-width="1.5"/>
    <!-- Tentacle Tip Wrapping Over Stick Handle -->
    <path d="M374,448 C370,438 386,434 394,444 C398,452 382,458 374,448 Z" fill="url(#octoArmGradL)" stroke="#7a1128" stroke-width="2"/>
  </g>

  <!-- STICK 4 (Arm 7 -> Floor Tom at 835, 510) -->
  <g id="stick4">
    <path d="M785,414 L837,508 L833,510 L779,418 Z" fill="url(#stickGrad)" stroke="#5c3a08" stroke-width="1.5"/>
    <ellipse cx="835" cy="510" rx="4.5" ry="3.2" transform="rotate(60, 835, 510)" fill="#ffe8b6" stroke="#5c3a08" stroke-width="1.5"/>
    <!-- Tentacle Tip Wrapping Over Stick Handle -->
    <path d="M782,428 C778,418 794,414 802,424 C806,434 790,438 782,428 Z" fill="url(#octoArmGradR)" stroke="#7a1128" stroke-width="2"/>
  </g>

  <!-- STICK 5 (Arm 8 -> Ride Cymbal at 882, 330) -->
  <g id="stick5">
    <path d="M808,248 L883,328 L879,331 L802,252 Z" fill="url(#stickGrad)" stroke="#5c3a08" stroke-width="1.5"/>
    <ellipse cx="882" cy="330" rx="4.5" ry="3.2" transform="rotate(46, 882, 330)" fill="#ffe8b6" stroke="#5c3a08" stroke-width="1.5"/>
    <!-- Tentacle Tip Wrapping Over Stick Handle -->
    <path d="M806,262 C804,252 820,248 826,258 C830,268 814,272 806,262 Z" fill="url(#octoArmGradR)" stroke="#7a1128" stroke-width="2"/>
  </g>

  <!-- ==================== 8. MOTION ARCS & BEAT EFFECTS ==================== -->
  <g id="motionArcs" fill="none" stroke-linecap="round">
    <!-- Tilted Crash Cymbal Vibration & Stick Swing Arcs -->
    <path d="M356,210 Q328,232 332,265" stroke="#ffbe0b" stroke-width="3" opacity="0.9"/>
    <path d="M344,204 Q314,228 320,262" stroke="#ffffff" stroke-width="2" stroke-dasharray="6,5" opacity="0.8"/>
    <path d="M242,302 Q232,324 252,334" stroke="#ffbe0b" stroke-width="2.5" opacity="0.85"/>
    <path d="M230,298 Q218,326 242,340" stroke="#ffffff" stroke-width="1.8" opacity="0.7"/>
    <path d="M412,232 Q428,246 416,266" stroke="#ffbe0b" stroke-width="2.5" opacity="0.85"/>
    <!-- Crash Impact Starburst -->
    <path d="M332,264 L322,250 M342,260 L344,244 M352,266 L364,256" stroke="#fff3b0" stroke-width="2.2"/>

    <!-- Hi-Hat Stick Motion Arc & Sizzle -->
    <path d="M286,386 Q262,404 260,432" stroke="#ffbe0b" stroke-width="2.5" opacity="0.85"/>
    <path d="M182,442 Q172,452 184,462" stroke="#fff3b0" stroke-width="2" opacity="0.8"/>
    <path d="M172,438 Q160,452 174,466" stroke="#ffbe0b" stroke-width="1.5" opacity="0.65"/>

    <!-- Snare Stick Rebound Arc -->
    <path d="M414,452 Q434,468 426,492" stroke="#ffbe0b" stroke-width="2.8" opacity="0.9"/>
    <path d="M424,446 Q446,464 436,490" stroke="#ffffff" stroke-width="1.8" stroke-dasharray="5,4" opacity="0.8"/>

    <!-- Floor Tom Stick Rebound Arc -->
    <path d="M832,442 Q856,466 844,498" stroke="#ffbe0b" stroke-width="2.8" opacity="0.9"/>
    <path d="M844,438 Q868,464 854,496" stroke="#ffffff" stroke-width="1.8" stroke-dasharray="5,4" opacity="0.8"/>

    <!-- Ride Cymbal Stick Arc & Shimmer -->
    <path d="M862,264 Q892,286 886,318" stroke="#ffbe0b" stroke-width="2.8" opacity="0.9"/>
    <path d="M976,348 Q990,364 972,376" stroke="#ffbe0b" stroke-width="2.2" opacity="0.85"/>
    <path d="M986,344 Q1002,364 982,382" stroke="#ffffff" stroke-width="1.5" opacity="0.7"/>
  </g>

  <!-- ==================== 9. OVERHEAD SPOTLIGHT & BEAM ==================== -->
  <g id="spotlight">
    <!-- Conical Light Beam from Above -->
    <polygon points="564,42 636,42 1085,730 115,730" fill="url(#spotlightBeam)" style="mix-blend-mode: screen;"/>

    <!-- Floating Stage Dust Motes in Spotlight -->
    <g fill="#fff3b0" opacity="0.55">
      <circle cx="520" cy="110" r="2.2"/>
      <circle cx="645" cy="95" r="1.8"/>
      <circle cx="580" cy="145" r="1.5"/>
      <circle cx="465" cy="195" r="2.4"/>
      <circle cx="670" cy="180" r="2"/>
      <circle cx="385" cy="280" r="1.8"/>
      <circle cx="745" cy="240" r="2.2"/>
      <circle cx="715" cy="315" r="1.6"/>
      <circle cx="495" cy="380" r="1.8"/>
    </g>

    <!-- Spotlight Rig & Housing at Top Center -->
    <line x1="480" y1="6" x2="720" y2="6" stroke="#2b2d42" stroke-width="6" stroke-linecap="round"/>
    <line x1="600" y1="6" x2="600" y2="20" stroke="#495057" stroke-width="5"/>
    <path d="M572,18 L628,18 L642,44 L558,44 Z" fill="#1f2421" stroke="#6c757d" stroke-width="2"/>
    <ellipse cx="600" cy="44" rx="40" ry="8" fill="#fff8d6" stroke="#ffbe0b" stroke-width="2"/>
    <ellipse cx="600" cy="44" rx="28" ry="4.5" fill="#ffffff"/>
  </g>
</svg>

One email when a new model lands on the board or in the showcase. Unsubscribe anytime.