Skip to content
alexgreenshPublic

About

Art and animation, written as code. Illustrations, loops, interactive web art, launch-videos and scored films in dozens of styles, identical on every render.

Topics

Resources

Stars

903 stars

Watchers

3 watching

Forks

Repository files navigation

anidoodle: an artist's table of code-drawn doodles, with the name writing itself in calligraphy

anidoodle-launch-github.mp4

The launch film, 77 seconds. Every frame and every sound in it was made with anidoodle, in code.

anidoodle

Hand-drawn art, written as code.

Illustrations, drawing timelapses, films, explainers and interactive web art in 32 styles.
Every mark is a function and every score is written, so the same source
redraws the same picture on every machine, at every size, for good.

Latest release Apache 2.0 Made of pure code Every render identical

Works in Claude Code · Codex · Grok Build · and any agent that reads skills. Install

English · 日本語 · 简体中文 · 한국어 · Français · Español

Styles · Drawing films · Music · What you can make · What it packs · Motion · Get started

32 styles to choose from

32 illustrations, each in its own style, from pencil and watercolour, marker comic and risograph to pixel art, toy brick, woodcut, sumi-e, scratchboard, embroidery, painted oil and a folk-tale storybook

Each style is its own way of making a mark: the taper of a nib, the bleed of a wash, the scumble of chalk on slate, the torn edge of cut paper, the halftone of a risograph drum, one engraved line spiralling out to become a moon. The subject changes shape in each hand, the way it would for 32 different illustrators. Every style also ships a film of its picture being drawn, mark by mark, in the order an artist in that medium works. Pick one for your brand and every picture after it arrives in the same hand. Every plate above, and the contact sheet itself, is drawn by code in this repo.

All 32 styles, and how each one is made
Style How it's made
Ballpoint One biro; tone from where hatching sits
Broken colour Separate dabs of unmixed colour, impressionist
Chalkboard Side-of-chalk scumble with dust
Charcoal erasure Charcoal drawn, erased and redrawn, ghosts kept
Coloured pencil Directional pencil hatching on toothy cream paper
Crayon Waxy scribble fills that skip the paper's valleys
Cut-paper collage Torn and cut paper, no drawn lines
Cyanotype blueprint Ruling-pen drafting on a cyanotype sheet
Dream glaze Thin resin-oil glazes, no visible stroke, every edge hard
Embroidery Thread stitched through linen in a hoop
Flat vector Crisp geometric shapes with grain and long shadows
Folk-tale storybook Painted foreground dissolving into pencil line on cream paper
Ink & line-wash Washes first, then a flexible nib
Isometric A 2:1 isometric cutaway in flat-shaded planes
Low-poly 3D Flat-shaded triangles, drawn in code
Marker comic Flat cel fills and one heavy contour
Mid-century gouache Opaque matte shapes, dry-brush edges, loose line
Newsprint halftone One black screen plus a spot colour on newsprint
Painted oil Bristle strokes and impasto on a toned canvas
Paper-craft Layered cut paper and painted cut-outs, on twos
Pencil & watercolour Washes that never quite fill their pencil line
Pixel art A fixed 16-colour palette on a low-res grid
Risograph Ink drums overprinting through registration
Rubber-hose 1930s cartoon ink with bendy limbs and film grain
Scratchboard White lines scratched out of black clay
Single-line engraving One unbroken spiral whose width is the tone
Stipple Pen dots whose density is the tone
Storybook Pencil and watercolour for characters
Sumi-e One loaded brush on absorbent paper
Toy brick Studded plastic bricks, built layer by layer
Vintage scrapbook Engravings, cut-letter titles and taped cards on aged paper
Woodcut / ukiyo-e A carved keyblock and colour blocks on washi

Every style draws itself

Four pictures drawing themselves at once: a coloured-pencil robot at a workbench, a woodblock print of herons on a bridge in the rain, a pixel-art cat leaping for fireflies, and sumi-e bamboo with a sparrow

Every style ships the finished picture and, from the same source, a film of it being made in the order an artist in that medium works. Watercolour lays in pencil, then washes light to dark. A woodblock prints the keyblock, then each colour block. Pixel art blocks in flat shapes, then shades clusters. Nothing fades in: every stroke grows, every wash spreads from where the brush touched, and the film's last frame is the still, pixel for pixel. It is the timelapse, the making-of and the explainer diagram in one.

Music, composed in code

The notes are written as data and the engine makes the sound. Nothing in this repository is a recording. A music style is a vocabulary the model composes from, never a preset: 21 of them, from lo-fi electronic, house and synthwave to orchestral, jazz, folk and solo piano. Each gives the sound, the grooves and the harmony language; the chords, the motif and the form are written new, so every film gets its own score.

Install the optional sound pack and eight acoustic instruments play recordings of real ones: a Steinway grand and an upright, concert harp, marimba, vibraphone, glockenspiel, tubular bells and timpani, in three recorded rooms. Synths, lo-fi colour, electronic drums and sound effects stay in code. Without the pack every score still plays, unchanged.

node <skill>/engine/tools/soundfetch.mjs list    # the install directory and what is installed
node <skill>/engine/tools/soundfetch.mjs get all # download (373 MB), verify by hash, unpack; your agent asks you first
  • Keys: a piano modelled on a real Steinway grand, Rhodes and Wurlitzer electric pianos, tonewheel and pipe organs, mallets and bells.
  • Ensemble: string sections of separate players, brass, flute and clarinet, a choir that sings its vowels, nylon, steel and electric guitars, harp and four kinds of bass.
  • Drums: real kits in code (acoustic, 808, 909, dusty, brushes, orchestral with timpani), every hit a little different.
  • Real lo-fi: a 12-bit sampler, tape wobble and hiss, vinyl crackle and a kick that makes the mix breathe.
  • Mix and room: per-part EQ, a drum bus, hall, plate and convolution reverbs, and a master at streaming loudness.

node tools/music.mjs check clears a score before anyone listens: key and mode, loudness, masking, the balance of every part, and novelty, which fails a score that sounds like a known one or quotes it.

Listen
A nocturne in A-flat 45 s, piano: it builds, peaks, then falls to a hush
The piano, played · the same notes, played flat the difference is the performance: voicing, phrasing, pedal
Cinematic, awe · Lo-fi · Marimba · Electronic more moods and instruments
The nocturne's theme in 15 seconds the composer picks the form that fits the length

Also in the box: a sound-effects kit, fourteen layered, seeded effects cued to the exact frame, the score ducking under each one (sound design). How a score is composed: compose.md · every vocabulary.

Web pages that notice you

A sign-up form with a hand-drawn robot beside it that watches the typing, covers its eyes at the password field, and cheers on success

Interactive illustrations for real sites: a mascot that follows the cursor and reacts to buttons, a hero that draws itself as the page scrolls, a form companion that covers its eyes at the password field. One small ES module and a <ani-doodle> element, no framework, with reduced-motion and keyboard paths. Each frame is still a fact, given the input that led to it.

Launch your product, drawn in code

The film at the top of this page was made with anidoodle, and the kit it was made with ships with it. launch.mjs new <name> gives you a spec to fill: your product's name, the prompts a user would type, the answers (a drawn picture, your product's own screens, or a film), a few words and your install lines. It cuts a launch film on the beat: a chat that types itself, answers that bloom open, full-frame lettering, and an end card that holds your install lines long enough to copy.

  • Four shapes, one timeline: 16:9, 1:1, 4:5 and 9:16, each re-composed for its frame with type that stays legible on a phone.
  • Your product on screen: its interface drawn from data, items springing from the before state to the after.
  • Sound from the picture: every key, press and landing gets its own effect, placed where it happens on screen, over a score composed for the film.
  • Ready to post: launch.mjs ship <name> renders every shape with its poster frame and captions (.srt and .vtt), checks audio-to-video sync and peak level on the file you deliver, and fails any frame whose edge cuts off text.

Two looks (drawn ink, or clean for a UI-first product), at 30 or 60 fps, with motion blur matched to each frame's speed.

The rules come from four cuts of our own launch and from the craft of the best ones out there: say what it is within five seconds, never put words over the art, cut on the downbeat, make the first frame the thumbnail. → launch-video.md · the kit

Bring your own image

  • Match a style. Show it a picture you love and it studies the hand (the marks, the edges, the palette, the paper) and draws something new in it. It borrows the style, never the picture.
  • Recreate a photo. A photo becomes a scratchboard, a woodblock print or a single engraved line: the photo is measured for tone and fur or fabric direction, and every visible mark is drawn in code.
  • Keep a character. Build a character once and every shot, pose and style uses the same one, from woodcut to toy bricks.

Learn to draw

How to draw an owl in nine steps: from two circles through construction, outline, eyes, shadows and feathers, to the rest of the owl The owl drawing itself, step by step, with captions

Watch the full lesson with captions (mp4, 95 s)

Ask how to draw something, or bring a drawing, and anidoodle rebuilds it as a lesson: a step sheet and a captioned timelapse, each step with what to look for, how to do it, and the common mistake.

What you can make

For You get
Your website A hero illustration, spot art for each feature, empty states and a 404, all in one hand. Transparent PNGs at any size from one source, so retina and print come free.
Explainers and reports How-it-works diagrams, cutaways and animated infographics, labelled in drafted lettering. Chalkboard, blueprint and ballpoint suit the serious ones.
Your brand A logo that draws itself on, a title sequence, a social card template that stays on brand for every post.
Social and chat Endless loops, GIFs and transparent animated stickers, sized for the feed.
Decks and docs A family of section illustrations from one program. A new seed gives a sister image in the same style.
Stories Storyboards and animatics that grow into a finished film of any length, with an original score.
Your own image Bring a picture and get its style on a new subject, or bring a photo and get it recreated in any of the 32 hands, every mark drawn in code.
Web pages Interactive illustrations that watch the cursor, react to clicks and forms, or draw themselves as the page scrolls.
Learning Drawing lessons: step sheets and timelapses that teach how a picture is built, with what to look for and the common mistakes.
Characters One character, built once and kept identical across shots, poses and styles.
Your launch A launch film for your product from a template: your prompts, your pictures, your words and your install lines, cut to a score.

Ask in plain words, "a risograph lighthouse for our careers page, 1600×900" or "a chalkboard explainer of how our pricing tiers stack up", and anidoodle routes it to the right workflow and style recipe, asking only for what the request leaves open.

What it packs

The engine is the easy half. The craft is the part anidoodle carries for you, six lessons, each one earned by getting a piece wrong first and written down so you start where the last project ended:

  • Story gives every piece a point. One idea and one focal subject for a still; one transformation, one payoff and one returning token for a film. → storytelling.md
  • Realism comes from naming it. The anatomy, the view and the reference you opened, so a butterfly reads as a creature with a body and veins. → realism-and-craft.md
  • Style lives in the mark. Thirty-one full recipes, a guide for picking one per job, and the steps for inventing your own. → styles.md
  • Music is composed for each piece from a genre's vocabulary and played by modelled and recorded instruments: 21 genres, a full band and orchestra, every major and minor mode, moods per section, and a theme that fits any length. → music/README.md
  • Determinism is the guarantee. Pure functions and a seeded random, so anyone with the source rebuilds the exact same piece. → determinism-and-contract.md
  • Method keeps you fast. Prove the look on one still, build straight through, and spend approval where being wrong is expensive. → working-method.md

Every format ships from the same source: PNG, MP4 with its score, GIF, WebM and animated PNG with transparency, and one self-contained HTML file. → formats.md

It draws, then it moves

A cyanotype blueprint plate drawing itself, line by line A clockwork butterfly comes to life in watercolour and flits between ranunculus
Marks are made, in the order a hand would make them. The blueprint wakes in watercolour and flies off into its meadow.

▶ The full 47-second film, sound on. 1080×1080 with an original score, every frame and sample generated in code:

mechanical-lepidoptera.mp4

One pure function paints each frame, so a finished illustration is that function called once, a sticker is the same function on a loop, and a film is it with a story and a score. The same guarantees hold for all three.

Pay once, draw forever

A picture model spends tokens and compute on every frame of every render, and it draws something new each time. Code spends them once. The 47-second film is a single program: written one time, it renders all 1,410 frames and a full stereo score, at any size, on any machine, free every time it runs. That works out to about sixty tokens of code per frame on the first pass, and zero on every pass after. A still is a few hundred lines. A whole family of images is a list of seeds.

Get started

Claude Code:

/plugin marketplace add alexgreensh/anidoodle
/plugin install anidoodle@alexgreensh-anidoodle

Codex:

codex plugin marketplace add alexgreensh/anidoodle

Then in the Codex TUI: /plugins and install anidoodle.

Grok Build:

grok plugin marketplace add alexgreensh/anidoodle
grok plugin install anidoodle --trust

--trust confirms the install; without it, Grok shows what the plugin can run and stops. You can also install it from the Marketplace tab in /plugins.

Any other agent: anidoodle is a standard skill folder (skills/anidoodle/SKILL.md), so it can be copied into any harness that reads skills.

Then ask for what you want: "draw a pencil & watercolour pear for our recipes page". To drive the engine yourself:

node <anidoodle>/engine/tools/scaffold.mjs ~/art --still hero --film intro --format 9x16 --duration 60
cd ~/art && npm install && npx playwright-core install chromium

node tools/still.mjs  hero  --out out/hero.png --scale 2   # a finished illustration, print size
node tools/render.mjs intro --out out/intro.gif            # a loop; also .mp4 with score, .webm with alpha
node tools/emit.mjs   intro --out out/intro.html           # the whole piece as one offline file
node tools/gate.mjs   hero                                 # determinism, contract and dead air in one pass
node tools/verify-export.mjs intro --file out/intro.mp4   # the file you ship, decoded and checked
node tools/music.mjs check score.ts#myScore                # your score: key, loudness, balance, novelty
node tools/launch.mjs new myLaunch                         # a launch film spec; then: launch.mjs ship myLaunch

Node 20 or newer. Stills need only the browser above; anything that moves also uses ffmpeg.

emit writes one HTML file, around 100 KB, that plays the piece with sound on a double-click, offline. It carries the recipe and draws everything again from scratch every time you open it. Attach it to an email and you have shipped a studio.

Four backends share one art core, and the core stays blissfully unaware of which one is drawing: playwright, html-player, remotion, hyperframes.

The example film

skills/anidoodle/example/ holds Mechanical Lepidoptera: 1,410 frames, 47 seconds, a clockwork butterfly that drafts itself, comes alive in watercolour, and leaves its blueprint in the grass. It is the whole engine in one piece: control points placed by hand over real anatomy, a cache key that names every input a pixel depends on, a score composed for it, and one unbroken move from built to alive. The style plates sit beside the engine in skills/anidoodle/engine/src/canvas-core/, each with its recipe written at the top. Open any of them, change a number, and watch what moves.

Honest by design

Sound and motion earn their claims. Every statement about the score or the movement carries a measurement or a human's eye behind it, and a green checkmark counts once it has been re-run. That discipline is why the same piece comes back byte for byte, every time, on every machine.


Licensed under the Apache License 2.0. Copyright 2026 Alex Greenshpun.

Built with anidoodle, which learned everything it knows by drawing the butterfly a few honest times.

About

Art and animation, written as code. Illustrations, loops, interactive web art, launch-videos and scored films in dozens of styles, identical on every render.

Topics

Resources

Stars

903 stars

Watchers

3 watching

Forks

Releases

Packages

Contributors

Languages