# Animated SVG Figure

Draws an animated diagram as one self-contained SVG for READMEs and posts.

- Repository: https://github.com/vectorize-io/hindsight (57678 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add vectorize-io/hindsight --skill figure -g -a claude-code -y`
Codex: `npx skills add vectorize-io/hindsight --skill figure -g -a codex -y`
Cursor: `npx skills add vectorize-io/hindsight --skill figure -g -a cursor -y`
Gemini CLI: `npx skills add vectorize-io/hindsight --skill figure -g -a gemini-cli -y`

## Description

Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post. Use when a change or an explanation needs a diagram, how a request flows, what a background job does, what a feature changed, or when the user asks for a diagram, figure, animation or "show it visually". The docs site's own pages use the interactive player instead (see step 4).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Figure

One animated SVG, no scripts, no upload: it renders and plays anywhere markdown does, GitHub
README, PR and issue comments, blog posts, Notion. Sharp at any size, and it follows the reader's
light or dark theme.

Figures are [Giotto](https://github.com/nicoloboschi/giotto) diagrams: one JSON document, the same
format the docs site's interactive figures use (`hindsight-docs/figures/*.json`).

**You write the diagram JSON, never SVG.** One command renders it. No build, no browser.

## 1. Write the diagram

**Do not save it as a file in the repo.** It is an input, not a deliverable, pipe it in (step 2),
and the rendered SVG keeps a copy of it for you.

The rest: https://github.com/vectorize-io/hindsight/blob/HEAD/.claude/skills/figure/SKILL.md