Notes from the doodle lab
Tiny lessons, creative coding ideas, and behind-the-scenes notes on drawing characters, scenes, and playful UI with code.
New notes every week!
CSS Art for Beginners: How to Think in Shapes
Before you write a single property, see your drawing as circles, ovals, and rounded rectangles stacked together. Once the shapes click, the CSS almost writes itself.
the notebook
Browse the notes
Filter by technique, or just scroll — every post is free to copy, remix, and make weirder.
Drawing Cute Characters with Only Divs
No SVG, no canvas — just divs, border-radius, and a little patience. Here's how a boxy face turns soft and friendly.
When to Use SVG Instead of CSS
CSS is great until you need a curve that isn't a circle. Learn when to reach for SVG paths instead of forcing border-radius.
How to Build a Tiny Canvas Scene
A canvas element and a few lines of drawing code can hold a whole little world. We build it one shape at a time.
Pixel Art Basics for Front-End Developers
You already know grids and hex codes. Pixel art is just those, drawn one square at a time — no art degree needed.
Making Your First Animated Sticker
A bounce, a squish, a little life. One keyframe animation is all it takes to make a static shape feel like it's breathing.
Turning a Food Doodle into a Mascot
It started as a rice ball with a face. Here's how one snack doodle became a full mascot with its own expressions.
new here?
New to drawing with code?
No need to read in order — pick whichever one sounds fun and go make a mess.
- Start with shapes
CSS Art for Beginners: How to Think in Shapes
- Learn SVG paths slowly
From Sketch to SVG: A Simple Workflow
- Remix one small doodle first
Turning a Food Doodle into a Mascot
Get tiny doodle lessons in your inbox
One playful creative coding idea, one beginner-friendly tip, and one remix challenge.
No spam, unsubscribe any time.