Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/opossum.md Secret

Created April 22, 2026 17:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save simonw/95735fe5e76e6fdf1753e6dcce360699 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save simonw/95735fe5e76e6fdf1753e6dcce360699 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
opossum.md

Qwen3.6-27B-GGUF:Q4_K_M

Prompt

Generate an SVG of a NORTH VIRGINIA OPOSSUM ON AN E-SCOOTER

Reasoning

  1. Analyze the Request:

    • Subject: Fluffy grey North American Opossum riding a futuristic neon-blue electric scooter.
    • Setting: Busy city street at night.
    • Style: Vibrant cartoon style, bold outlines, glowing effects.
    • Format: Valid SVG code only, enclosed in an XML codeblock.

  2. Deconstruct the Scene:

    • Background: Night sky, stars, a glowing purple/pink moon, and a cityscape with dark buildings and glowing yellow windows.
    • Street: Dark asphalt with perspective lines and neon reflections.
    • Scooter: Cyberpunk aesthetic, neon-blue glowing wheels, sleek futuristic frame, glowing headlights and taillights.
    • Opossum: Fluffy grey fur (using overlapping circles), white face mask, black eyes and nose, pink ears and tail, wearing cool futuristic sunglasses and a tiny scarf for extra character.
    • Effects: SVG <filter> for neon glows, motion lines to show speed, and bold black outlines on all main elements.

  3. Plan the SVG Structure:

    • <svg> with viewBox="0 0 800 600".
    • <defs> containing:
      • neonBlue glow filter.
      • neonPink glow filter.
      • neonYellow glow filter.
      • fluffy filter for the opossum's fur.
      • Gradients for the sky and street.
    • Layer 1: Environment (Sky, Stars, Moon, Cityscape, Street).
    • Layer 2: Background Motion (Speed lines).
    • Layer 3: Scooter Back Elements (Back wheel, back fender, back leg).
    • Layer 4: Opossum Body (Fluffy back, tail).
    • Layer 5: Scooter Middle Elements (Deck, seat, front fork, front wheel).
    • Layer 6: Opossum Front Elements (Chest, arms, head, sunglasses, scarf).
    • Layer 7: Foreground Motion & Highlights (Glowing wheel spokes, exhaust/spark effects).

  4. Drafting the Code (Mental Check of Coordinates):

    • Center: Scooter around x=400, y=350.
    • Wheels: Back wheel at (300, 450), Front wheel at (550, 450). Radius 50.
    • Opossum: Sitting on the seat at (380, 320). Head around (380, 200).
    • Glow Filters: Use feGaussianBlur and feMerge to create authentic neon effects.
    • Fluffy Fur: Group of circles with the fluffy filter applied, outlined in bold black.

  5. Refining Details:

    • Ensure all major elements have stroke="#000" stroke-width="4" to fulfill the "bold outlines" requirement.
    • Add a glowing cyan exhaust trail from the back of the scooter.
    • Make the opossum's tail wrap around the scooter deck for dynamic composition.
    • Add a glowing visor to the opossum's sunglasses.

  6. Final Code Assembly: Put everything together, ensuring valid XML syntax, proper closing tags, and no markdown outside the requested block.

Response

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
  <defs>
    <!-- Sky Gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0b001a"/>
      <stop offset="50%" stop-color="#2a003b"/>
      <stop offset="100%" stop-color="#4a0059"/>
    </linearGradient>

    <!-- Street Gradient -->
    <linearGradient id="streetGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#111122"/>
      <stop offset="100%" stop-color="#050510"/>
    </linearGradient>

    <!-- Neon Blue Glow Filter -->
    <filter id="neonBlue" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur1"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur2"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur3"/>
      <feMerge>
        <feMergeNode in="blur3"/>
        <feMergeNode in="blur2"/>
        <feMergeNode in="blur1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Neon Pink Glow Filter -->
    <filter id="neonPink" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur1"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur2"/>
      <feMerge>
        <feMergeNode in="blur2"/>
        <feMergeNode in="blur1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Neon Yellow Glow Filter -->
    <filter id="neonYellow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur1"/>
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur2"/>
      <feMerge>
        <feMergeNode in="blur2"/>
        <feMergeNode in="blur1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Fluffy Fur Filter -->
    <filter id="fluffy" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="3" result="noise"/>
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G"/>
    </filter>

    <!-- Window Pattern -->
    <pattern id="windows" x="0" y="0" width="20" height="30" patternUnits="userSpaceOnUse">
      <rect x="2" y="2" width="6" height="10" fill="#ffcc00" opacity="0.7" filter="url(#neonYellow)"/>
      <rect x="12" y="15" width="6" height="10" fill="#ffcc00" opacity="0.4"/>
    </pattern>
  </defs>

  <!-- ================= BACKGROUND ================= -->
  <!-- Sky -->
  <rect width="800" height="600" fill="url(#skyGrad)"/>

  <!-- Stars -->
  <g fill="#ffffff">
    <circle cx="100" cy="50" r="1.5" opacity="0.8"/>
    <circle cx="250" cy="80" r="2" opacity="0.5"/>
    <circle cx="400" cy="40" r="1" opacity="0.9"/>
    <circle cx="600" cy="90" r="2.5" opacity="0.6"/>
    <circle cx="750" cy="60" r="1.5" opacity="0.7"/>
    <circle cx="50" cy="150" r="2" opacity="0.4"/>
    <circle cx="680" cy="120" r="1" opacity="0.8"/>
  </g>

  <!-- Glowing Moon -->
  <circle cx="650" cy="150" r="60" fill="#ff00ff" filter="url(#neonPink)" opacity="0.8"/>
  <circle cx="650" cy="150" r="50" fill="#ffffff" opacity="0.2"/>

  <!-- Cityscape Silhouettes -->
  <g stroke="#000" stroke-width="3">
    <!-- Back Layer -->
    <rect x="20" y="180" width="80" height="220" fill="#150025"/>
    <rect x="120" y="120" width="100" height="280" fill="#1a0030"/>
    <rect x="240" y="200" width="70" height="200" fill="#120020"/>
    <rect x="330" y="150" width="90" height="250" fill="#180028"/>
    <rect x="450" y="100" width="120" height="300" fill="#1c0035"/>
    <rect x="600" y="170" width="80" height="230" fill="#140022"/>
    <rect x="710" y="130" width="90" height="270" fill="#160026"/>

    <!-- Front Layer -->
    <rect x="-10" y="250" width="110" height="150" fill="#0a0015"/>
    <rect x="100" y="280" width="130" height="120" fill="#0d001a"/>
    <rect x="250" y="230" width="100" height="170" fill="#0b0016"/>
    <rect x="380" y="270" width="140" height="130" fill="#0e001c"/>
    <rect x="550" y="240" width="110" height="160" fill="#0c0018"/>
    <rect x="680" y="290" width="130" height="110" fill="#0f001d"/>
  </g>

  <!-- Glowing Windows -->
  <rect x="20" y="180" width="80" height="220" fill="url(#windows)" opacity="0.6"/>
  <rect x="120" y="120" width="100" height="280" fill="url(#windows)" opacity="0.6"/>
  <rect x="450" y="100" width="120" height="300" fill="url(#windows)" opacity="0.6"/>
  <rect x="710" y="130" width="90" height="270" fill="url(#windows)" opacity="0.6"/>
  <rect x="100" y="280" width="130" height="120" fill="url(#windows)" opacity="0.6"/>
  <rect x="380" y="270" width="140" height="130" fill="url(#windows)" opacity="0.6"/>

  <!-- Street -->
  <rect x="0" y="400" width="800" height="200" fill="url(#streetGrad)"/>
  <line x1="0" y1="400" x2="800" y2="400" stroke="#000" stroke-width="6"/>
  
  <!-- Street Perspective Lines -->
  <path d="M 400 400 L 100 600" stroke="#ff00ff" stroke-width="4" opacity="0.3" filter="url(#neonPink)"/>
  <path d="M 400 400 L 700 600" stroke="#00ffff" stroke-width="4" opacity="0.3" filter="url(#neonBlue)"/>
  <line x1="0" y1="450" x2="800" y2="450" stroke="#ffffff" stroke-width="3" stroke-dasharray="40 40" opacity="0.2"/>
  <line x1="0" y1="520" x2="800" y2="520" stroke="#ffffff" stroke-width="3" stroke-dasharray="40 40" opacity="0.1"/>

  <!-- ================= SCOOTER & OPOSSUM ================= -->
  
  <!-- Background Motion Lines -->
  <g stroke="#ffffff" stroke-width="3" opacity="0.3" stroke-linecap="round">
    <line x1="50" y1="200" x2="150" y2="200"/>
    <line x1="120" y1="300" x2="250" y2="300"/>
    <line x1="600" y1="150" x2="750" y2="150"/>
    <line x1="650" y1="250" x2="780" y2="250"/>
    <line x1="80" y1="450" x2="180" y2="450"/>
    <line x1="620" y1="480" x2="750" y2="480"/>
  </g>

  <!-- Scooter Back Wheel -->
  <g>
    <circle cx="300" cy="450" r="50" fill="#111" stroke="#000" stroke-width="5"/>
    <circle cx="300" cy="450" r="35" fill="none" stroke="#00ffff" stroke-width="6" filter="url(#neonBlue)"/>
    <!-- Spokes -->
    <line x1="300" y1="400" x2="300" y2="500" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <line x1="250" y1="450" x2="350" y2="450" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <line x1="265" y1="415" x2="335" y2="485" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <line x1="265" y1="485" x2="335" y2="415" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <circle cx="300" cy="450" r="12" fill="#222" stroke="#000" stroke-width="3"/>
  </g>

  <!-- Scooter Back Fender & Exhaust -->
  <path d="M 240 450 A 60 60 0 0 1 360 450" fill="none" stroke="#00ffff" stroke-width="8" filter="url(#neonBlue)" stroke-linecap="round"/>
  <!-- Neon Exhaust Trail -->
  <path d="M 250 450 Q 150 450 50 420" fill="none" stroke="#00ffff" stroke-width="12" filter="url(#neonBlue)" opacity="0.6" stroke-linecap="round"/>
  <path d="M 250 450 Q 150 450 50 420" fill="none" stroke="#ffffff" stroke-width="4" opacity="0.8" stroke-linecap="round"/>

  <!-- Opossum Tail (Wrapping around deck) -->
  <path d="M 350 300 C 280 350, 200 420, 250 460 C 300 500, 350 480, 380 450" fill="none" stroke="#000" stroke-width="22" stroke-linecap="round"/>
  <path d="M 350 300 C 280 350, 200 420, 250 460 C 300 500, 350 480, 380 450" fill="none" stroke="#cccccc" stroke-width="16" stroke-linecap="round"/>
  <path d="M 350 300 C 280 350, 200 420, 250 460 C 300 500, 350 480, 380 450" fill="none" stroke="#ffffff" stroke-width="6" stroke-dasharray="8 12" stroke-linecap="round"/>

  <!-- Opossum Back Leg -->
  <path d="M 360 320 L 330 400 L 360 420" fill="none" stroke="#000" stroke-width="22" stroke-linejoin="round"/>
  <path d="M 360 320 L 330 400 L 360 420" fill="none" stroke="#888888" stroke-width="16" stroke-linejoin="round"/>

  <!-- Opossum Fluffy Body -->
  <g filter="url(#fluffy)">
    <ellipse cx="380" cy="280" rx="65" ry="70" fill="#888888" stroke="#000" stroke-width="4"/>
  </g>
  <!-- Fluffy Highlights -->
  <g filter="url(#fluffy)">
    <circle cx="350" cy="250" r="25" fill="#aaaaaa" stroke="#000" stroke-width="3"/>
    <circle cx="400" cy="260" r="30" fill="#777777" stroke="#000" stroke-width="3"/>
    <circle cx="370" cy="310" r="20" fill="#999999" stroke="#000" stroke-width="3"/>
  </g>

  <!-- Scooter Deck & Seat -->
  <path d="M 280 400 L 520 400 L 540 430 L 260 430 Z" fill="#1a1a2e" stroke="#000" stroke-width="4"/>
  <path d="M 280 400 L 520 400 L 530 410 L 270 410 Z" fill="#00ffff" filter="url(#neonBlue)"/>
  <path d="M 340 400 L 380 320 L 420 320 L 440 400 Z" fill="#222233" stroke="#000" stroke-width="4"/>
  <path d="M 350 320 L 410 320 L 400 340 L 360 340 Z" fill="#00ffff" filter="url(#neonBlue)"/>

  <!-- Scooter Front Fork -->
  <line x1="550" y1="450" x2="500" y2="320" stroke="#000" stroke-width="16"/>
  <line x1="550" y1="450" x2="500" y2="320" stroke="#00ffff" stroke-width="10" filter="url(#neonBlue)"/>

  <!-- Scooter Front Wheel -->
  <g>
    <circle cx="550" cy="450" r="50" fill="#111" stroke="#000" stroke-width="5"/>
    <circle cx="550" cy="450" r="35" fill="none" stroke="#00ffff" stroke-width="6" filter="url(#neonBlue)"/>
    <!-- Spokes -->
    <line x1="550" y1="400" x2="550" y2="500" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <line x1="500" y1="450" x2="600" y2="450" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <line x1="515" y1="415" x2="585" y2="485" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <line x1="515" y1="485" x2="585" y2="415" stroke="#00ffff" stroke-width="4" filter="url(#neonBlue)"/>
    <circle cx="550" cy="450" r="12" fill="#222" stroke="#000" stroke-width="3"/>
  </g>

  <!-- Scooter Headlight & Taillight -->
  <circle cx="510" cy="310" r="10" fill="#ffffff" filter="url(#neonBlue)"/>
  <circle cx="510" cy="310" r="5" fill="#ffffff"/>
  <circle cx="270" cy="415" r="8" fill="#ff00ff" filter="url(#neonPink)"/>

  <!-- Opossum Front Leg -->
  <path d="M 400 320 L 460 380 L 490 360" fill="none" stroke="#000" stroke-width="22" stroke-linejoin="round"/>
  <path d="M 400 320 L 460 380 L 490 360" fill="none" stroke="#888888" stroke-width="16" stroke-linejoin="round"/>

  <!-- Opossum Head -->
  <g>
    <!-- Fluffy Head Base -->
    <circle cx="380" cy="200" r="55" fill="#888888" stroke="#000" stroke-width="4" filter="url(#fluffy)"/>
    
    <!-- White Face Mask -->
    <path d="M 330 200 Q 380 140 430 200 Q 440 260 380 270 Q 320 260 330 200 Z" fill="#ffffff" stroke="#000" stroke-width="4"/>
    
    <!-- Pink Ears -->
    <path d="M 335 160 Q 310 130 320 150 Q 330 170 345 170 Z" fill="#ff9999" stroke="#000" stroke-width="3"/>
    <path d="M 425 160 Q 450 130 440 150 Q 430 170 415 170 Z" fill="#ff9999" stroke="#000" stroke-width="3"/>
    
    <!-- Black Nose -->
    <ellipse cx="380" cy="255" rx="12" ry="8" fill="#000000"/>
    <ellipse cx="380" cy="253" rx="4" ry="2" fill="#ffffff" opacity="0.6"/>
    
    <!-- Black Eyes -->
    <circle cx="355" cy="215" r="8" fill="#000000"/>
    <circle cx="405" cy="215" r="8" fill="#000000"/>
    <circle cx="352" cy="212" r="3" fill="#ffffff"/>
    <circle cx="402" cy="212" r="3" fill="#ffffff"/>

    <!-- Futuristic Sunglasses -->
    <path d="M 335 205 L 425 205 L 415 235 L 345 235 Z" fill="#111111" stroke="#000" stroke-width="4"/>
    <path d="M 340 208 L 420 208 L 412 230 L 348 230 Z" fill="#00ffff" filter="url(#neonBlue)"/>
    <!-- Sunglasses Reflection -->
    <path d="M 350 210 L 380 210 L 370 225 L 355 225 Z" fill="#ffffff" opacity="0.6"/>
  </g>

  <!-- Opossum Scarf (Flying in the wind) -->
  <path d="M 340 260 Q 380 290 420 260 Q 380 270 340 260 Z" fill="#ff00ff" stroke="#000" stroke-width="3"/>
  <path d="M 340 260 Q 280 280 240 250 Q 290 290 340 260 Z" fill="#ff00ff" stroke="#000" stroke-width="3"/>

  <!-- Foreground Motion Sparks / Energy -->
  <g fill="#00ffff" filter="url(#neonBlue)">
    <polygon points="580,430 590,425 595,435 585,440"/>
    <polygon points="600,460 615,455 610,470 595,465"/>
    <polygon points="570,480 580,475 585,490 575,485"/>
  </g>
  <g fill="#ff00ff" filter="url(#neonPink)">
    <polygon points="220,440 230,435 235,445 225,450"/>
    <polygon points="200,470 215,465 210,480 195,475"/>
  </g>

</svg>

Timing

Generating: 6,575 tokens, 4min 25s, 24.74 t/s

@simonw
Copy link
Copy Markdown
Author

simonw commented Apr 22, 2026

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment