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.
the complete notebook
All notes
Browse every published post in one place, even when a filter or page is not selected.
- How to Make Code Art Feel Less RoboticBehind the Doodle · 7 min read
- Making Your First Animated StickerAnimation · 5 min read
- Drawing Cute Characters with Only DivsCSS Art · 5 min read
- Color Palettes for Cute Code DoodlesCreative Coding · 5 min read
- CSS Art for Beginners: How to Think in ShapesCSS Art · 6 min read
- Pixel Art Basics for Front-End DevelopersPixel Art · 6 min read
- Beginner Guide to p5.js Doodlesp5.js · 9 min read
- When to Use SVG Instead of CSSSVG · 7 min read
- How to Build a Tiny Canvas SceneCanvas · 8 min read
- How to Plan a Coded Illustration Before Writing CodeBeginner Guides · 6 min read
- From Sketch to SVG: A Simple WorkflowSVG · 8 min read
- Turning a Food Doodle into a MascotCreative Coding · 7 min read
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.