Model: openrouter/z-ai/glm-5.1
Generate an SVG of a NORTH VIRGINIA OPOSSUM ON AN E-SCOOTER
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>North Virginia Opossum on an E-Scooter</title>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<style>
:root {
--bg: #1a1125;
--fg: #f0e6d3;
--accent: #ff6b3d;
--muted: #3d2e50;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
font-family: 'Fredoka One', cursive;
}
.scene-container {
position: relative;
width: 100%;
max-width: 900px;
}
svg {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 40px rgba(255, 107, 61, 0.15));
}
.title {
color: var(--fg);
font-size: clamp(1.2rem, 3vw, 2rem);
text-align: center;
margin-top: 1.5rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.9;
}
.subtitle {
color: var(--accent);
font-size: clamp(0.7rem, 1.5vw, 0.95rem);
text-align: center;
margin-top: 0.4rem;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.7;
}
/* Wheel spin animation */
@keyframes wheelSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.wheel-spokes {
animation: wheelSpin 0.6s linear infinite;
transform-origin: center;
}
/* Opossum bob animation */
@keyframes opossumBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.opossum-group {
animation: opossumBob 0.8s ease-in-out infinite;
}
/* Tail sway */
@keyframes tailSway {
0%, 100% { transform: rotate(0deg); }
30% { transform: rotate(4deg); }
70% { transform: rotate(-3deg); }
}
.tail-group {
animation: tailSway 1.2s ease-in-out infinite;
transform-origin: 340px 340px;
}
/* Wind lines */
@keyframes windDash {
from { stroke-dashoffset: 40; }
to { stroke-dashoffset: 0; }
}
.wind-line {
stroke-dasharray: 10 30;
animation: windDash 0.8s linear infinite;
}
/* Scooter light glow pulse */
@keyframes lightPulse {
0%, 100% { opacity: 0.7; r: 8; }
50% { opacity: 1; r: 12; }
}
.headlight-glow {
animation: lightPulse 1.5s ease-in-out infinite;
}
/* Cloud drift */
@keyframes cloudDrift1 {
from { transform: translateX(0); }
to { transform: translateX(-900px); }
}
@keyframes cloudDrift2 {
from { transform: translateX(0); }
to { transform: translateX(-900px); }
}
.cloud1 { animation: cloudDrift1 20s linear infinite; }
.cloud2 { animation: cloudDrift2 28s linear infinite; }
/* Road lines moving */
@keyframes roadLineMove {
from { transform: translateX(0); }
to { transform: translateX(-120px); }
}
.road-lines {
animation: roadLineMove 0.5s linear infinite;
}
/* Star twinkle */
@keyframes twinkle {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.star {
animation: twinkle 2s ease-in-out infinite;
}
/* Eye blink */
@keyframes blink {
0%, 90%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.1); }
}
.opossum-eyes {
animation: blink 4s ease-in-out infinite;
transform-origin: center;
}
/* Earring sparkle */
@keyframes sparkle {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.sparkle {
animation: sparkle 1.5s ease-in-out infinite;
}
/* Scarf flutter */
@keyframes scarfFlutter {
0%, 100% { transform: rotate(0deg) scaleX(1); }
25% { transform: rotate(-2deg) scaleX(1.02); }
75% { transform: rotate(1deg) scaleX(0.98); }
}
.scarf-group {
animation: scarfFlutter 1s ease-in-out infinite;
transform-origin: 415px 265px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
</style>
</head>
<body>
<div class="scene-container">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Illustration of a North Virginia Opossum riding an electric scooter at dusk">
<defs>
<!-- Sky gradient - Virginia dusk -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0d0b2e"/>
<stop offset="30%" stop-color="#2d1b4e"/>
<stop offset="60%" stop-color="#6b2f5f"/>
<stop offset="80%" stop-color="#c74e3f"/>
<stop offset="95%" stop-color="#f0a030"/>
<stop offset="100%" stop-color="#f5c842"/>
</linearGradient>
<!-- Road gradient -->
<linearGradient id="roadGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#2a2a35"/>
<stop offset="100%" stop-color="#1a1a22"/>
</linearGradient>
<!-- Scooter metal gradient -->
<linearGradient id="scooterMetal" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#3a3a42"/>
<stop offset="50%" stop-color="#5a5a65"/>
<stop offset="100%" stop-color="#3a3a42"/>
</linearGradient>
<!-- Opossum fur gradient -->
<linearGradient id="furGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#b0a89a"/>
<stop offset="50%" stop-color="#8a8278"/>
<stop offset="100%" stop-color="#6a6258"/>
</linearGradient>
<!-- Opossum white face -->
<radialGradient id="faceWhite" cx="0.5" cy="0.4" r="0.5">
<stop offset="0%" stop-color="#f5f0e8"/>
<stop offset="70%" stop-color="#e8e0d4"/>
<stop offset="100%" stop-color="#d0c8b8"/>
</radialGradient>
<!-- Headlight beam -->
<radialGradient id="headlightBeam" cx="0" cy="0.5" r="1">
<stop offset="0%" stop-color="rgba(255,240,180,0.4)"/>
<stop offset="100%" stop-color="rgba(255,240,180,0)"/>
</radialGradient>
<!-- Tire rubber -->
<radialGradient id="tireGrad" cx="0.5" cy="0.5" r="0.5">
<stop offset="60%" stop-color="#1a1a1a"/>
<stop offset="85%" stop-color="#2a2a2a"/>
<stop offset="100%" stop-color="#1a1a1a"/>
</radialGradient>
<!-- Ground reflection -->
<linearGradient id="groundReflect" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="rgba(240,160,48,0.15)"/>
<stop offset="100%" stop-color="rgba(240,160,48,0)"/>
</linearGradient>
<!-- Tail gradient -->
<linearGradient id="tailGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#c0a89a"/>
<stop offset="50%" stop-color="#d4b8a8"/>
<stop offset="100%" stop-color="#e0c8b8"/>
</linearGradient>
<!-- Wheel spin centers -->
<clipPath id="frontWheelClip">
<circle cx="560" cy="430" r="32"/>
</clipPath>
<clipPath id="rearWheelClip">
<circle cx="340" cy="430" r="32"/>
</clipPath>
</defs>
<!-- ==================== SKY ==================== -->
<rect x="0" y="0" width="800" height="600" fill="url(#skyGrad)"/>
<!-- Stars -->
<circle class="star" cx="120" cy="60" r="1.5" fill="#fff" style="animation-delay: 0s"/>
<circle class="star" cx="250" cy="40" r="1" fill="#fff" style="animation-delay: 0.5s"/>
<circle class="star" cx="380" cy="75" r="1.2" fill="#fff" style="animation-delay: 1s"/>
<circle class="star" cx="500" cy="30" r="1.5" fill="#fff" style="animation-delay: 1.5s"/>
<circle class="star" cx="620" cy="55" r="1" fill="#fff" style="animation-delay: 0.3s"/>
<circle class="star" cx="700" cy="80" r="1.3" fill="#fff" style="animation-delay: 0.8s"/>
<circle class="star" cx="150" cy="100" r="1" fill="#fff" style="animation-delay: 1.2s"/>
<circle class="star" cx="450" cy="50" r="0.8" fill="#fff" style="animation-delay: 0.7s"/>
<circle class="star" cx="680" cy="25" r="1.2" fill="#fff" style="animation-delay: 1.8s"/>
<circle class="star" cx="55" cy="85" r="0.9" fill="#fff" style="animation-delay: 2.1s"/>
<circle class="star" cx="760" cy="60" r="1.1" fill="#fff" style="animation-delay: 0.2s"/>
<!-- Clouds -->
<g class="cloud1" opacity="0.15">
<ellipse cx="200" cy="130" rx="60" ry="18" fill="#c8a0d0"/>
<ellipse cx="230" cy="125" rx="40" ry="14" fill="#c8a0d0"/>
<ellipse cx="1100" cy="140" rx="55" ry="16" fill="#c8a0d0"/>
<ellipse cx="1130" cy="135" rx="35" ry="12" fill="#c8a0d0"/>
</g>
<g class="cloud2" opacity="0.1">
<ellipse cx="600" cy="100" rx="50" ry="15" fill="#d0a8c0"/>
<ellipse cx="630" cy="95" rx="35" ry="12" fill="#d0a8c0"/>
<ellipse cx="1500" cy="110" rx="45" ry="14" fill="#d0a8c0"/>
</g>
<!-- Distant treeline silhouette - Virginia pines -->
<path d="M0,380 L20,360 L35,370 L50,340 L65,365 L80,350 L95,375 L110,330 L125,360 L140,345 L155,370 L170,335 L185,365 L200,355 L215,380 L230,340 L245,360 L260,350 L275,375 L290,330 L305,355 L320,340 L335,370 L350,345 L365,375 L380,335 L395,360 L410,350 L425,380 L440,340 L455,365 L470,350 L485,375 L500,335 L515,360 L530,345 L545,370 L560,340 L575,365 L590,355 L605,380 L620,345 L635,360 L650,340 L665,370 L680,350 L695,375 L710,335 L725,355 L740,345 L755,370 L770,340 L785,360 L800,380 L800,420 L0,420 Z" fill="#1a0e28" opacity="0.8"/>
<!-- ==================== GROUND / ROAD ==================== -->
<rect x="0" y="410" width="800" height="190" fill="url(#roadGrad)"/>
<!-- Road surface highlight -->
<rect x="0" y="410" width="800" height="3" fill="rgba(255,255,255,0.05)"/>
<!-- Road center lines (moving) -->
<g class="road-lines">
<rect x="0" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
<rect x="120" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
<rect x="240" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
<rect x="360" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
<rect x="480" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
<rect x="600" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
<rect x="720" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
<rect x="840" y="490" width="40" height="3" rx="1.5" fill="rgba(240,200,80,0.4)"/>
</g>
<!-- Road edge line -->
<rect x="0" y="460" width="800" height="2" fill="rgba(255,255,255,0.08)"/>
<rect x="0" y="530" width="800" height="2" fill="rgba(255,255,255,0.06)"/>
<!-- Ground light reflection from scooter -->
<ellipse cx="450" cy="470" rx="120" ry="30" fill="url(#groundReflect)"/>
<!-- Sidewalk bottom -->
<rect x="0" y="560" width="800" height="40" fill="#252530"/>
<!-- ==================== HEADLIGHT BEAM ==================== -->
<ellipse cx="620" cy="420" rx="150" ry="30" fill="url(#headlightBeam)" opacity="0.5"/>
<!-- ==================== E-SCOOTER ==================== -->
<g class="scooter-group">
<!-- Rear wheel -->
<g>
<circle cx="340" cy="430" r="34" fill="url(#tireGrad)"/>
<circle cx="340" cy="430" r="28" fill="#222" stroke="#333" stroke-width="1"/>
<!-- Rear wheel spokes -->
<g class="wheel-spokes" style="transform-origin: 340px 430px;">
<line x1="340" y1="404" x2="340" y2="456" stroke="#555" stroke-width="1.5"/>
<line x1="314" y1="430" x2="366" y2="430" stroke="#555" stroke-width="1.5"/>
<line x1="322" y1="412" x2="358" y2="448" stroke="#555" stroke-width="1.5"/>
<line x1="358" y1="412" x2="322" y2="448" stroke="#555" stroke-width="1.5"/>
</g>
<circle cx="340" cy="430" r="6" fill="#444" stroke="#555" stroke-width="1"/>
<circle cx="340" cy="430" r="2" fill="#666"/>
</g>
<!-- Front wheel -->
<g>
<circle cx="560" cy="430" r="34" fill="url(#tireGrad)"/>
<circle cx="560" cy="430" r="28" fill="#222" stroke="#333" stroke-width="1"/>
<!-- Front wheel spokes -->
<g class="wheel-spokes" style="transform-origin: 560px 430px;">
<line x1="560" y1="404" x2="560" y2="456" stroke="#555" stroke-width="1.5"/>
<line x1="534" y1="430" x2="586" y2="430" stroke="#555" stroke-width="1.5"/>
<line x1="542" y1="412" x2="578" y2="448" stroke="#555" stroke-width="1.5"/>
<line x1="578" y1="412" x2="542" y2="448" stroke="#555" stroke-width="1.5"/>
</g>
<circle cx="560" cy="430" r="6" fill="#444" stroke="#555" stroke-width="1"/>
<circle cx="560" cy="430" r="2" fill="#666"/>
</g>
<!-- Deck / Platform -->
<path d="M330,418 L330,412 Q330,408 340,408 L540,408 Q550,408 550,412 L550,418 Q550,422 540,422 L340,422 Q330,422 330,418 Z" fill="url(#scooterMetal)" stroke="#666" stroke-width="0.5"/>
<!-- Deck grip tape texture -->
<rect x="345" y="410" width="195" height="10" rx="2" fill="#2a2a32"/>
<!-- Grip tape lines -->
<line x1="360" y1="410" x2="360" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="380" y1="410" x2="380" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="400" y1="410" x2="400" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="420" y1="410" x2="420" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="440" y1="410" x2="440" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="460" y1="410" x2="460" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="480" y1="410" x2="480" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="500" y1="410" x2="500" y2="420" stroke="#333" stroke-width="0.5"/>
<line x1="520" y1="410" x2="520" y2="420" stroke="#333" stroke-width="0.5"/>
<!-- Rear fender -->
<path d="M320,410 Q340,395 360,410" fill="none" stroke="#4a4a52" stroke-width="3" stroke-linecap="round"/>
<!-- Front fender -->
<path d="M540,410 Q560,395 580,410" fill="none" stroke="#4a4a52" stroke-width="3" stroke-linecap="round"/>
<!-- Steering column -->
<path d="M540,412 L545,350 Q546,340 548,335 L550,310" fill="none" stroke="url(#scooterMetal)" stroke-width="6" stroke-linecap="round"/>
<!-- Handlebar stem -->
<rect x="544" y="305" width="12" height="10" rx="3" fill="#5a5a65"/>
<!-- Handlebars -->
<path d="M520,305 L530,300 Q540,298 550,300 L560,298 Q570,296 580,300 L590,305" fill="none" stroke="#5a5a65" stroke-width="5" stroke-linecap="round"/>
<!-- Handlebar grips -->
<rect x="516" y="302" width="16" height="8" rx="4" fill="#222"/>
<rect x="578" y="302" width="16" height="8" rx="4" fill="#222"/>
<!-- Battery housing (on deck) -->
<rect x="380" y="398" width="80" height="12" rx="3" fill="#2d2d35" stroke="#444" stroke-width="0.5"/>
<!-- Battery indicator lights -->
<circle cx="392" cy="404" r="2" fill="#4cff4c" opacity="0.9"/>
<circle cx="400" cy="404" r="2" fill="#4cff4c" opacity="0.9"/>
<circle cx="408" cy="404" r="2" fill="#4cff4c" opacity="0.7"/>
<circle cx="416" cy="404" r="2" fill="#ffaa00" opacity="0.8"/>
<circle cx="424" cy="404" r="2" fill="#333"/>
<!-- Headlight -->
<circle cx="570" cy="415" r="5" fill="#fff8d0"/>
<circle class="headlight-glow" cx="570" cy="415" r="10" fill="rgba(255,248,200,0.3)"/>
<!-- Rear light -->
<rect x="325" y="412" width="6" height="4" rx="1" fill="#ff3333" opacity="0.9"/>
<rect x="323" y="412" width="3" height="4" rx="1" fill="rgba(255,50,50,0.3)"/>
<!-- Brand text on stem -->
<text x="548" y="370" fill="#666" font-size="6" font-family="sans-serif" transform="rotate(-85, 548, 370)" text-anchor="middle">VIRGINIA MOTORS</text>
</g>
<!-- ==================== WIND EFFECT LINES ==================== -->
<line class="wind-line" x1="280" y1="280" x2="220" y2="278" stroke="rgba(255,255,255,0.15)" stroke-width="1.5" stroke-linecap="round"/>
<line class="wind-line" x1="290" y1="310" x2="215" y2="308" stroke="rgba(255,255,255,0.12)" stroke-width="1.5" stroke-linecap="round" style="animation-delay: 0.2s"/>
<line class="wind-line" x1="275" y1="340" x2="210" y2="338" stroke="rgba(255,255,255,0.1)" stroke-width="1.5" stroke-linecap="round" style="animation-delay: 0.4s"/>
<line class="wind-line" x1="285" y1="365" x2="225" y2="363" stroke="rgba(255,255,255,0.08)" stroke-width="1" stroke-linecap="round" style="animation-delay: 0.6s"/>
<!-- ==================== OPOSSUM ==================== -->
<g class="opossum-group">
<!-- TAIL (behind body) -->
<g class="tail-group">
<path d="M340,340 Q310,345 285,360 Q260,380 240,395 Q225,408 210,415 Q195,420 185,415 Q178,410 180,400 Q185,390 195,385"
fill="none" stroke="url(#tailGrad)" stroke-width="8" stroke-linecap="round"/>
<!-- Tail rings (prehensile opossum tail) -->
<path d="M330,342 Q325,344 320,348" fill="none" stroke="#b09888" stroke-width="8" stroke-linecap="round"/>
<path d="M305,355 Q298,360 292,367" fill="none" stroke="#c0a89a" stroke-width="7" stroke-linecap="round"/>
<path d="M278,375 Q270,382 264,390" fill="none" stroke="#b09888" stroke-width="6" stroke-linecap="round"/>
<path d="M250,395 Q242,402 236,408" fill="none" stroke="#c0a89a" stroke-width="5" stroke-linecap="round"/>
<path d="M225,408 Q218,412 212,414" fill="none" stroke="#b09888" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- BACK LEFT LEG -->
<path d="M370,380 Q365,395 360,405 Q358,408 355,408 L350,408" fill="none" stroke="#8a8278" stroke-width="8" stroke-linecap="round"/>
<!-- Back foot on deck -->
<ellipse cx="355" cy="408" rx="10" ry="5" fill="#9a9288"/>
<!-- BODY -->
<ellipse cx="420" cy="330" rx="70" ry="55" fill="url(#furGrad)"/>
<!-- Fur texture highlights -->
<ellipse cx="410" cy="315" rx="45" ry="30" fill="rgba(200,190,175,0.3)"/>
<!-- Belly lighter area -->
<ellipse cx="425" cy="350" rx="35" ry="25" fill="rgba(210,200,185,0.4)"/>
<!-- FRONT RIGHT LEG (on handlebar) -->
<path d="M460,310 Q480,295 500,290 Q520,285 535,295" fill="none" stroke="#9a9288" stroke-width="7" stroke-linecap="round"/>
<!-- Front paw on handlebar -->
<ellipse cx="537" cy="296" rx="8" ry="5" fill="#d4b8a0" transform="rotate(-15, 537, 296)"/>
<!-- Paw toes -->
<circle cx="543" cy="293" r="2" fill="#c8a890"/>
<circle cx="545" cy="296" r="2" fill="#c8a890"/>
<circle cx="544" cy="299" r="2" fill="#c8a890"/>
<!-- FRONT LEFT LEG (other handlebar) -->
<path d="M450,320 Q470,300 495,295 Q515,290 535,295 L545,300" fill="none" stroke="#8a8278" stroke-width="7" stroke-linecap="round"/>
<!-- Front paw -->
<ellipse cx="545" cy="300" rx="7" ry="5" fill="#d4b8a0" transform="rotate(5, 545, 300)"/>
<circle cx="550" cy="298" r="2" fill="#c8a890"/>
<circle cx="551" cy="301" r="2" fill="#c8a890"/>
<!-- BACK RIGHT LEG (pushing back) -->
<path d="M390,375 Q395,390 400,400 Q402,407 400,408 L395,408" fill="none" stroke="#7a7268" stroke-width="8" stroke-linecap="round"/>
<ellipse cx="398" cy="408" rx="10" ry="5" fill="#8a8278"/>
<!-- SCARF fluttering in wind -->
<g class="scarf-group">
<path d="M415,268 Q405,272 395,270 Q380,268 370,275 Q358,282 345,278 Q335,275 325,280"
fill="none" stroke="#ff6b3d" stroke-width="7" stroke-linecap="round"/>
<path d="M415,268 Q400,265 388,262 Q375,258 362,263 Q350,268 338,264"
fill="none" stroke="#ff8855" stroke-width="5" stroke-linecap="round"/>
<!-- Scarf knot -->
<ellipse cx="418" cy="268" rx="8" ry="6" fill="#ff6b3d"/>
<ellipse cx="416" cy="266" rx="4" ry="3" fill="#ff8855"/>
</g>
<!-- HEAD -->
<g>
<!-- Head shape -->
<ellipse cx="465" cy="270" rx="38" ry="32" fill="url(#furGrad)"/>
<!-- White face (distinctive opossum feature) -->
<ellipse cx="468" cy="262" rx="28" ry="22" fill="url(#faceWhite)"/>
<!-- Snout -->
<ellipse cx="498" cy="272" rx="16" ry="10" fill="#f0e8d8"/>
<ellipse cx="498" cy="270" rx="14" ry="8" fill="#f5f0e8"/>
<!-- Nose -->
<ellipse cx="511" cy="268" rx="5" ry="4" fill="#ff8888"/>
<ellipse cx="511" cy="267" rx="3.5" ry="2.5" fill="#ff6b6b"/>
<!-- Nose highlight -->
<ellipse cx="510" cy="266" rx="1.5" ry="1" fill="rgba(255,255,255,0.5)"/>
<!-- Nostrils -->
<circle cx="509" cy="268" r="1" fill="#cc5555"/>
<circle cx="513" cy="268" r="1" fill="#cc5555"/>
<!-- Whiskers -->
<line x1="510" y1="272" x2="540" y2="268" stroke="#ddd" stroke-width="0.7"/>
<line x1="510" y1="274" x2="542" y2="274" stroke="#ddd" stroke-width="0.7"/>
<line x1="510" y1="276" x2="538" y2="280" stroke="#ddd" stroke-width="0.7"/>
<line x1="510" y1="272" x2="535" y2="264" stroke="#ddd" stroke-width="0.5"/>
<line x1="510" y1="276" x2="533" y2="284" stroke="#ddd" stroke-width="0.5"/>
<!-- Left whiskers -->
<line x1="495" y1="272" x2="470" y2="266" stroke="#ddd" stroke-width="0.5"/>
<line x1="495" y1="275" x2="468" y2="275" stroke="#ddd" stroke-width="0.5"/>
<!-- Eyes -->
<g class="opossum-eyes">
<!-- Left eye -->
<circle cx="455" cy="258" r="7" fill="#1a1a1a"/>
<circle cx="455" cy="258" r="5.5" fill="#2a2020"/>
<circle cx="455" cy="258" r="4" fill="#111"/>
<!-- Eye shine -->
<circle cx="453" cy="256" r="2" fill="rgba(255,255,255,0.8)"/>
<circle cx="457" cy="260" r="0.8" fill="rgba(255,255,255,0.4)"/>
<!-- Right eye -->
<circle cx="478" cy="256" r="7" fill="#1a1a1a"/>
<circle cx="478" cy="256" r="5.5" fill="#2a2020"/>
<circle cx="478" cy="256" r="4" fill="#111"/>
<!-- Eye shine -->
<circle cx="476" cy="254" r="2" fill="rgba(255,255,255,0.8)"/>
<circle cx="480" cy="258" r="0.8" fill="rgba(255,255,255,0.4)"/>
</g>
<!-- Ears -->
<!-- Left ear -->
<ellipse cx="440" cy="244" rx="10" ry="14" fill="#8a8278" transform="rotate(-15, 440, 244)"/>
<ellipse cx="440" cy="245" rx="6" ry="9" fill="#ffb0b0" transform="rotate(-15, 440, 245)"/>
<ellipse cx="440" cy="244" rx="4" ry="6" fill="#ff9090" transform="rotate(-15, 440, 244)"/>
<!-- Right ear -->
<ellipse cx="478" cy="240" rx="10" ry="14" fill="#9a9288" transform="rotate(10, 478, 240)"/>
<ellipse cx="478" cy="241" rx="6" ry="9" fill="#ffb0b0" transform="rotate(10, 478, 241)"/>
<ellipse cx="478" cy="240" rx="4" ry="6" fill="#ff9090" transform="rotate(10, 478, 240)"/>
<!-- Earring on left ear (Virginia flair) -->
<circle cx="434" cy="257" r="2.5" fill="#ffd700" class="sparkle"/>
<circle cx="434" cy="257" r="1.2" fill="#ffee88" class="sparkle" style="animation-delay: 0.5s"/>
<!-- Mouth - slight grin -->
<path d="M500,278 Q504,282 508,280" fill="none" stroke="#aa7788" stroke-width="1" stroke-linecap="round"/>
<path d="M496,280 Q500,284 506,282" fill="none" stroke="#996677" stroke-width="0.8" stroke-linecap="round"/>
<!-- Cheek tuft -->
<ellipse cx="448" cy="270" rx="6" ry="4" fill="rgba(255,255,255,0.2)"/>
</g>
</g>
<!-- ==================== FOREGROUND DETAILS ==================== -->
<!-- Speed lines on ground -->
<line class="wind-line" x1="250" y1="450" x2="180" y2="450" stroke="rgba(255,255,255,0.06)" stroke-width="2" stroke-linecap="round" style="animation-delay: 0.1s"/>
<line class="wind-line" x1="270" y1="470" x2="190" y2="470" stroke="rgba(255,255,255,0.05)" stroke-width="2" stroke-linecap="round" style="animation-delay: 0.3s"/>
<line class="wind-line" x1="260" y1="500" x2="200" y2="500" stroke="rgba(255,255,255,0.04)" stroke-width="1.5" stroke-linecap="round" style="animation-delay: 0.5s"/>
<!-- Scattered leaves in wind -->
<g opacity="0.4">
<ellipse cx="230" cy="320" rx="4" ry="2" fill="#8b5a3a" transform="rotate(30, 230, 320)">
<animateTransform attributeName="transform" type="translate" values="0,0;-60,20;-120,10" dur="3s" repeatCount="indefinite"/>
</ellipse>
<ellipse cx="260" cy="350" rx="3" ry="1.5" fill="#6b4a2a" transform="rotate(-20, 260, 350)">
<animateTransform attributeName="transform" type="translate" values="0,0;-80,30;-160,15" dur="4s" repeatCount="indefinite"/>
</ellipse>
</g>
<!-- Small dust particles behind scooter -->
<g opacity="0.3">
<circle cx="300" cy="440" r="2" fill="#8a8278">
<animate attributeName="cx" values="300;220;140" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.3;0.15;0" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="310" cy="435" r="1.5" fill="#9a9288">
<animate attributeName="cx" values="310;240;170" dur="2.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.25;0.1;0" dur="2.5s" repeatCount="indefinite"/>
</circle>
<circle cx="295" cy="445" r="1" fill="#7a7268">
<animate attributeName="cx" values="295;230;165" dur="1.8s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.2;0.1;0" dur="1.8s" repeatCount="indefinite"/>
</circle>
</g>
<!-- ==================== VIRGINIA STATE OUTLINE SILHOUETTE (subtle, in sky) -->
<g opacity="0.04" transform="translate(580, 50) scale(0.4)">
<path d="M50,10 L80,0 L120,5 L140,20 L135,40 L145,60 L130,80 L140,100 L120,110 L100,100 L80,120 L60,110 L40,120 L20,100 L30,80 L10,60 L20,40 L10,20 Z" fill="#fff"/>
</g>
<!-- ==================== AMBIENT OVERLAY ==================== -->
<!-- Warm light from below on opossum -->
<ellipse cx="450" cy="380" rx="100" ry="50" fill="rgba(240,160,48,0.05)"/>
<!-- Vignette -->
<rect x="0" y="0" width="800" height="600" fill="url(#vignetteGrad)" opacity="0"/>
</svg>
<p class="title">North Virginia Opossum</p>
<p class="subtitle">Cruising the Commonwealth since dusk</p>
</div>
<script>
// Add a subtle parallax/mousemove effect to the whole scene
const container = document.querySelector('.scene-container');
const svg = container.querySelector('svg');
document.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
// Calculate offset from center, normalized
const offsetX = (e.clientX - centerX) / rect.width;
const offsetY = (e.clientY - centerY) / rect.height;
// Subtle transform on the SVG
svg.style.transform = `perspective(1000px) rotateY(${offsetX * 2}deg) rotateX(${-offsetY * 1.5}deg)`;
});
// Reset on mouse leave
container.addEventListener('mouseleave', () => {
svg.style.transition = 'transform 0.5s ease-out';
svg.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
setTimeout(() => {
svg.style.transition = '';
}, 500);
});
</script>
</body>
</html>This illustration features a North Virginia Opossum confidently cruising on an e-scooter against a beautiful Virginia dusk skyline. Here's what's packed in:
The Opossum — Grey-white fur with the distinctive white face, pink nose, beady black eyes with reflective highlights, whiskers, pink inner ears, a gold earring for Virginia flair, and a prehensile bare tail curling behind. Wearing an orange scarf fluttering in the wind. Front paws grip the handlebars.
The E-Scooter — Detailed with a metal frame, grip-taped deck, spinning spoked wheels, battery housing with LED charge indicators (3 green, 1 yellow, 1 dead), a glowing headlight, red taillight, and fenders. Branded "VIRGINIA MOTORS" on the stem.
The Scene — A gradient dusk sky (deep purple to warm orange), twinkling stars, drifting clouds, a silhouette treeline of Virginia pines, a dark road with moving center lines, and dust particles kicked up behind the scooter.
Animations — Spinning wheels, opossum bobbing, tail swaying, scarf fluttering, wind lines streaming, headlight pulsing, eye blinking, road lines scrolling, leaves drifting, and dust particles trailing. The whole scene also responds subtly to mouse movement with a parallax tilt effect.
25 input, 10,921 output, {"completion_tokens_details": {"reasoning_tokens": 787}, "cost": 0.0349722, "cost_details": {"upstream_inference_cost": 0.0349722, "upstream_inference_prompt_cost": 2.5e-05, "upstream_inference_completions_cost": 0.0349472}}