Vibe Svgs

Mascot Animation Packs

The library includes 66 physics-driven pixel mascot animations across reactions, work, systems, security, growth, celebration, daily scenes, and hybrid sprite stories.

Browse the complete pack catalog and usage guide

🎨 Asset Gallery & Categories

Claude Family

Claude Code Motion Collection

Twenty physics-driven animated stories built around the supplied Claude Code mascot path.

View all 20 Claude Code animations

Claude Stories

Codex Family

Cursor Family

Gemini Family

DeepSeek Family

Copilot Family

🏷️ Badges

Banners

Platform and Tool Logos

The gallery uses the supplied platform and tool logo files directly. No replacement mascot or invented mark is used for these categories.

Browse the complete supplied logo catalog

System Architecture and Quality Gates

Every migrated animated asset satisfies contractVersion: 1. Supplied platform logos remain source artwork and are registered separately:

• Physics-driven mascot rig: One transform owner per motion concern, sampled ballistic arcs, damped arrivals, velocity-linked squash and synchronized contact shadows.
• Accessibility Gate: Root <svg role="img" aria-labelledby="..."> with <title id="..."> and <desc id="...">.
• DOM ID Safety: Reusable IDs are scoped with <filename-stem>- prefixes to eliminate ID collisions when inlining multiple SVGs.
• Motion Accessibility: @media (prefers-reduced-motion: reduce) fallbacks present on all animated SVGs.
• Motion Bounds Gate: Playwright samples each Claude Code animation across its full loop and fails when a visible animated component crosses the viewBox or the mascot remains static.
• Repository SVGO Engine: Custom svgo.config.js preserving viewBox, keyframes, title/desc, and accessibility attributes.

Development and Verification

Requires Bun 1.3.14 or later.

Run Quality Gate & Tests

# Run full suite (SVG contracts, schema validation, typecheck, SVGO check)
bun run check

# Run Playwright visual regression snapshots
bun run snapshots

# Run SVGO optimization write mode (maintainers)
bun run svgo:write

Inline SVG Namespacing

When embedding raw SVG markup directly into HTML, use namespaceSvg() to avoid ID collisions:

import { namespaceSvg } from "./scripts/svg-contracts";

const firstCard = namespaceSvg(svgSource, "card-1");
const secondCard = namespaceSvg(svgSource, "card-2");

📜 Trademark and Endorsement Notice

This repository contains original community artwork inspired by developer tools and AI products. Product names, logos, and trademarks belong to their respective owners.

Fan-made mascots and scenes in this repository are not endorsed by Anthropic, OpenAI, Cursor, Google, DeepSeek, GitHub, or other referenced companies. The MIT license applies to original repository code and artwork; it does not grant rights to third-party trademarks.

📄 License

Code and original artwork are released under the MIT License.