extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879/** * Cumulus clouds for the generated cards. * * The shapes are overlapping circles sharing one `userSpaceOnUse` gradient, so * the silhouette reads as a single lit volume rather than a pile of discs: lit * from above, duskier along the flat base. Each puff also carries a glow that * fades to nothing, which is what keeps the silhouette soft at its edges. * * No blur filter, deliberately: resvg silently drops what it cannot render, and * a missing cloud is worse than a crisp one. */export function cloudSvg(options: { /** Unique per SVG document, so gradients do not collide. */ uid: string; x: number; y: number; /** 1 draws a cloud about 200x120. */ scale?: number; opacity?: number;}): string { const { uid, x, y, scale = 1, opacity = 1 } = options;
const puffs = [ { cx: 50, cy: 68, r: 38 }, { cx: 104, cy: 48, r: 46 }, { cx: 152, cy: 64, r: 34 }, { cx: 28, cy: 86, r: 28 }, { cx: 176, cy: 88, r: 24 }, { cx: 100, cy: 92, r: 42 }, ];
const circles = () => puffs.map((p) => `<circle cx="${p.cx}" cy="${p.cy}" r="${p.r}"/>`).join('');
// A soft glow per puff, fading to nothing: two sized-up passes would read as // hard concentric outlines instead. const halo = puffs .map( (p, i) => ` <radialGradient id="cloudHalo-${uid}-${i}" gradientUnits="userSpaceOnUse" cx="${p.cx}" cy="${p.cy}" r="${p.r * 1.5}"> <stop offset="52%" stop-color="#ffffff" stop-opacity="0.26"/> <stop offset="78%" stop-color="#ffffff" stop-opacity="0.10"/> <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> </radialGradient>` ) .join('');
const halos = puffs .map( (p, i) => `<circle cx="${p.cx}" cy="${p.cy}" r="${p.r * 1.5}" fill="url(#cloudHalo-${uid}-${i})"/>` ) .join('');
return ` <g transform="translate(${x} ${y}) scale(${scale})" opacity="${opacity}"> <defs> ${halo} <linearGradient id="cloudBody-${uid}" gradientUnits="userSpaceOnUse" x1="0" y1="4" x2="0" y2="134"> <stop offset="0%" stop-color="#ffffff"/> <stop offset="58%" stop-color="#f6fafe"/> <stop offset="100%" stop-color="#d2dfec"/> </linearGradient> <linearGradient id="cloudBase-${uid}" gradientUnits="userSpaceOnUse" x1="0" y1="74" x2="0" y2="134"> <stop offset="0%" stop-color="#9cb3ca" stop-opacity="0"/> <stop offset="100%" stop-color="#8ea6bf" stop-opacity="0.5"/> </linearGradient> </defs>
<!-- Halo: a fading glow per puff, so the edge stays soft without depending on a filter resvg might not implement. --> ${halos}
<!-- Body, lit from above, with the underside in shade. --> <g fill="url(#cloudBody-${uid})">${circles()}</g> <g fill="url(#cloudBase-${uid})">${circles()}</g> </g>`;}