/** Encode an SVG string to a CSS-usable data URI */ export function svgDataUri(svg: string): string { return `url("data:image/svg+xml,${encodeURIComponent(svg)}")` } /** Generate a pixel art fish SVG */ export function fishSvg(opts: { w: number h: number body: string accent: string eye?: string facing?: 'left' | 'right' }): string { const { w, h, body, accent, facing = 'right' } = opts const eye = opts.eye ?? '#000' // Build a generic pixel fish: body rect, tail, eye const hw = Math.floor(w / 2) const hh = Math.floor(h / 2) const tailW = Math.floor(w * 0.2) const bodyW = w - tailW const eyeX = facing === 'right' ? bodyW - 3 : tailW + 1 const tailX = facing === 'right' ? 0 : bodyW return `` // Tail + `` + `` // Body + `` // Stripe + `` // Eye + `` + `` + `` } /** Generate a coral SVG of a given type */ export function coralSvg(type: 'branching' | 'brain' | 'fan', color: string, accent: string): string { if (type === 'branching') { return `` + `` + `` + `` + `` + `` + `` + `` + `` + `` + `` } if (type === 'brain') { return `` + `` + `` + `` + `` + `` + `` + `` } // fan return `` + `` + `` + `` + `` + `` + `` + `` + `` } /** Generate a seaweed stalk SVG */ export function seaweedSvg(height: number, color: string, accent: string): string { const segments: string[] = [] for (let y = 0; y < height; y += 4) { const xOff = (y / 4) % 2 === 0 ? 0 : 1 const c = y % 8 === 0 ? color : accent const op = 0.3 + (y / height) * 0.25 segments.push(``) } // Leaf accents every 12px for (let y = 6; y < height - 4; y += 12) { const side = (y / 12) % 2 === 0 ? 0 : 3 segments.push(``) } return `` + segments.join('') + `` } /** Generate a jellyfish SVG */ export function jellyfishSvg(bell: string, tentacle: string): string { return `` // Bell + `` + `` + `` + `` // Inner glow + `` // Tentacles + `` + `` + `` + `` // Tentacle wiggles + `` + `` + `` + `` } /** Generate a starfish SVG */ export function starfishSvg(color: string): string { return `` + `` + `` + `` + `` + `` + `` + `` + `` } /** Generate a small shell SVG */ export function shellSvg(color: string): string { return `` + `` + `` + `` + `` + `` + `` }