// Original comic / urban-neon illustrations for clip tiles // All hand-built SVG — no IP, no AI-image vibes. Halftone dots, splatters, // speed lines, ben-day texture, sound-effect type. // ── Shared SVG defs ──────────────────────────────────────────────────────── function ArtDefs({ id }) { return ( {/* Ben-day halftone dot pattern */} {/* Speed line pattern */} {/* Radial vignette */} ); } // ── Art 1: Neon skyline at dusk ──────────────────────────────────────────── function ArtSkyline() { return ( {/* Sky gradient */} {/* Sun */} {/* Halftone over sky */} {/* Background buildings — silhouette */} {/* Foreground buildings — taller, darker */} {/* Building windows */} {[ [22, 76], [25, 79], [28, 76], [38, 90], [41, 93], [44, 90], [70, 80], [73, 83], [76, 80], [100, 92], [103, 95], [120, 76], [123, 79], [126, 76], [155, 92], [158, 95], [173, 86], [176, 89], ].map(([x, y], i) => ( ))} {/* Speed lines */} {/* Vignette */} ); } // ── Art 2: Splatter burst ───────────────────────────────────────────────── function ArtSplatter() { return ( {/* Big splatter blobs */} {/* Drips & tails */} {/* Small dots */} {[ [20, 30, 3, '#ffe066'], [180, 60, 2, '#ff2d8c'], [50, 110, 2.5, '#3ad6ff'], [115, 105, 2, '#9d3aff'], [85, 18, 2.5, '#3ad6ff'], [25, 70, 1.8, '#ff2d8c'], [195, 22, 2, '#ffe066'], [10, 105, 2, '#9d3aff'], [165, 110, 2.5, '#ffe066'], ].map(([x, y, r, c], i) => ( ))} {/* Halftone overlay on big blobs */} {/* Sound effect */} POW! ); } // ── Art 3: Speed lines / motion ──────────────────────────────────────────── function ArtSpeed() { return ( {/* Radial speed lines from right side */} {Array.from({ length: 22 }).map((_, i) => { const angle = (i / 22) * Math.PI * 2; const r1 = 30 + (i % 3) * 8; const r2 = 80 + (i % 4) * 12; const cx = 160, cy = 60; const x1 = cx + Math.cos(angle) * r1; const y1 = cy + Math.sin(angle) * r1; const x2 = cx + Math.cos(angle) * r2; const y2 = cy + Math.sin(angle) * r2; return ; })} {/* Center burst */} {/* Halftone */} {/* Diagonal accents */} {/* Small SFX */} ZOOM ); } // ── Art 4: Glitch / chromatic ────────────────────────────────────────────── function ArtGlitch() { return ( {/* Grid floor (synthwave perspective) */} {/* Horizontal lines */} {[60, 68, 78, 90, 105].map((y, i) => ( ))} {/* Perspective verticals */} {Array.from({ length: 13 }).map((_, i) => { const x = (i - 6) * 30 + 100; return ; })} {/* Sun with bands */} {/* Chromatic offset duplicates */} {/* Glitch bars */} {/* Stars */} {[[20, 18], [180, 14], [30, 40], [170, 28], [10, 30]].map(([x, y], i) => ( ))} ); } // ── Art 5: Halftone alley ────────────────────────────────────────────────── function ArtAlley() { return ( {/* Alley walls — perspective */} {/* Wall windows / signs */} {[ [10, 25, '#ff2d8c'], [22, 50, '#3ad6ff'], [10, 75, '#ffe066'], [165, 25, '#3ad6ff'], [180, 55, '#ff2d8c'], [168, 80, '#ffe066'], ].map(([x, y, c], i) => ( ))} {/* Far end glow */} {/* Far buildings */} {/* Windows in far buildings */} {/* Ground reflection */} {/* Halftone over walls */} {/* Speed lines down the alley */} ); } // ── Art 6: Comic panel BOOM ──────────────────────────────────────────────── function ArtBoom() { return ( {/* Star burst shape */} { const angle = (i / 24) * Math.PI * 2; const r = i % 2 === 0 ? 60 : 30; return `${Math.cos(angle) * r},${Math.sin(angle) * r}`; }).join(' ') } fill="#ffe066" stroke="#0a0418" strokeWidth="2" /> { const angle = (i / 16) * Math.PI * 2 + 0.1; const r = i % 2 === 0 ? 40 : 22; return `${Math.cos(angle) * r},${Math.sin(angle) * r}`; }).join(' ') } fill="#fff" /> {/* Halftone on burst edges */} { const angle = (i / 24) * Math.PI * 2; const r = i % 2 === 0 ? 60 : 30; return `${Math.cos(angle) * r},${Math.sin(angle) * r}`; }).join(' ') } fill={`url(#halftone-bm)`} opacity="0.4" /> {/* BOOM text */} BOOM ); } const ART_COMPONENTS = [ ArtSkyline, ArtSplatter, ArtSpeed, ArtGlitch, ArtAlley, ArtBoom, ]; // Pick art by index (cycles) function ClipArt({ idx }) { const Art = ART_COMPONENTS[idx % ART_COMPONENTS.length]; return ; } Object.assign(window, { ClipArt, ART_COMPONENTS });