About CoDoodle

Code can draw too.

CoDoodle is a playful creative-coding space for learning how to draw characters, scenes, icons, and tiny animations using HTML, CSS, SVG, Canvas, p5.js, React, and more.

Browse the gallery Open the playground

yes, with code.

.face {
  border-radius: 48% 52% 55% 45%;
  background: #ffd9c2;
}

drawing…

why this exists

It started with a notebook

Learning to code should feel less like setup and more like sketching.

code = crayon

<div></div>

.box {
  width: 100px;
}

just a box, for now.

CoDoodle started from a simple thought: a few shapes, a few colors, and suddenly a <div> can become a face, a snack, or a tiny scene.

No setup wizard. No boilerplate maze. Just small visual wins that teach real front-end ideas.

a tiny world

A tiny world of coded doodles

Pick a corner of the sketchbook — characters, scenes, icons, food, fan-art studies, or tiny UI experiments.

Characters

Faces, buddies, and little mascots from divs and border-radius.

Good for: HTML · CSS · animation

Food Doodles

Cute bites, snacks, and cozy treats in div form.

Good for: HTML · CSS · SVG

Tiny Scenes

Mini moments and tiny worlds built with code.

Good for: SVG · Canvas · animation

SVG Icons

Crisp, scalable icons for every project.

Good for: SVG · CSS

Pixel Art

Tiny pixels, big personality.

Good for: HTML · CSS

Fan-Art Studies

Tributes, mashups, and practice sketches.

Good for: SVG · CSS · animation

good forBeginnersKids & studentsDesignersFront-end devsCreative codersHobbyists

how it works

The CoDoodle loop

Pick something small, follow the recipe, remix one detail, then share it if you want.

Pick

Browse until something makes you smile.

principle:

Start small.

Follow the steps and code along at your own pace.

principle:

Learn by playing.

Remix

Change one detail, try a new idea, make it yours.

principle:

Code can be cute, expressive, and personal.

Share it with the community or keep it in your sketchbook.

principle:

Make code visual.

1234

Tiny steps.
Big doodles.

Pick
Browse until something makes you smile.
principle:
Start small.
1
Follow
Follow the steps and code along at your own pace.
principle:
Learn by playing.
2
Remix
Change one detail, try a new idea, make it yours.
principle:
Code can be cute, expressive, and personal.
3
Share
Share it with the community or keep it in your sketchbook.
principle:
Make code visual.
4

Tiny steps.
Big doodles.

we doodle by:Make code visualLearn by playingCode can be cute, expressive, and personal

made by you

Better when you share

Tape your doodle to the fridge, remix someone else's idea, or start a tiny thing of your own.

Share your art Open Playground

@aina · first doodle ever

@dev_harith · remix of Blinking Cat

@pixelpayung · remix of Pixel Potion

your doodle here —
no, really