Draw with code.
A sketchbook for people who type. Learn to make characters, icons, food, animals and tiny worlds out of CSS, SVG, Canvas and p5.js — one friendly recipe at a time.
/* the star of the show */
.rice {
border-radius:
50% 50% 46% 46% /
76% 76% 30% 30%;
}
/* instant smile */
.mouth {
border-radius:
0 0 26px 26px;
}
@keyframes bob {
50% { transform:
translateY(-7px); }
}the gallery
Fresh from the sketchbook
New doodles, fully explained — every one opens into its recipe.
Happy Onigiri
Ramen Shop Bowl
Pikachu
Charmander
Squirtle Fan-Art Code Study
Snow White Fairytale Code Study
Blink Bean
Moonlit Cat Window
start here
Start with one tiny doodle
Pick a shelf, open a recipe, then change the code until it feels like yours.
Pick a shelf
Start with a stocked row that matches the thing you feel like drawing.
Step 2 · Open the recipe
Every doodle comes with plain-word steps, tiny code notes, and remix ideas.
- shapes
- colors
- layers
- motion
border-radius: 50%;.bean {
background: #ffe38a;
border-radius: 50%;
}
.eye { animation: blink 2s; }change one color first
skill levels
Choose your pencil
Honest levels. No “easy” that secretly needs a CS degree.
Beginner
New to code
Copy, paste, tweak. Your first win in under 30 minutes — no experience needed.
Best for: first doodles, CSS faces, simple animation
Start beginnermade by you
Tape it to our fridge
Made something with a CoDoodle recipe — or from scratch? We feature community doodles right here, with your name on them. Wobbly is welcome. First doodles get the biggest cheers.
your doodle here —
no, really
the board
Join the next doodle
Try this month's prompt, or get one tiny doodle idea in your inbox.
Draw something that loops.
A walk cycle, a bouncing ball, rain on a window — anything where the end is the beginning. Any code, any style, 60 lines or 6,000.
The Weekly Doodle
One doodle, one technique, once a week. No spam, no growth hacks — unsubscribe in one click and we'll still like you.