Skip to content
CoDdleCoDoodle home
CoDdle
Share your art

learn

Learn to draw with code, one tiny shape at a time.

Start with simple shapes, add color, layer details, then bring your doodles to life with small animations.

Start with shapesOpen Playground

new here?

Start here

No formal curriculum — just four things worth learning in roughly this order.

  1. Learn shapes

    Start with circles, rectangles, and rounded corners — almost every doodle on this site is a few basic shapes layered together.

  2. Add color

    Pick 4-5 colors on purpose before you touch a single hex code, then reuse them everywhere for a cohesive look.

  3. Layer details

    Stack small shapes — eyes, highlights, little marks — on top of your base form to give it personality.

  4. Animate one tiny thing

    Don't animate everything at once — pick one part (a blink, a wiggle, a bounce) and bring just that to life.

where to start

Choose your level

Pick the starting point that matches where you are right now.

  1. Beginner

    New to code

    First, draw one friendly shape.

    Best for learning shapes, colors, and simple CSS doodles.

    recommended start: Happy Onigiri

    Start beginner path
  2. Intermediate

    Comfortable with HTML/CSS

    Then give it a face, layers, and motion.

    Best for CSS characters, SVG icons, and small animations.

    recommended start: Pixel Potion

    Try CSS doodles
  3. Advanced

    Ready to experiment

    Finally, place it in a tiny world.

    Best for Canvas scenes, p5.js, React components, and interactive doodles.

    recommended start: Rainy Window

    Explore advanced experiments

the toolbox

Browse the toolbox

Starter files, snippets, and references for when you need a tiny shortcut.

toolbox/starter-files

  • CSS Character StarterStart with a round face, eyes, and one tiny animation.Starter kitSoon
  • SVG Scene StarterBuild a tiny scene with sky, ground, and doodle details.Starter kitSoon
  • Pixel Pet StarterEdit a small grid map to redraw a pixel friend.Starter kitSoon

off you go

Ready to make your first doodle?

Four friendly ways to begin — pick whichever sounds fun.

Follow the trail — every stop is just one small doodle away.

  1. 1

    Follow a tutorial

    Start with a step-by-step doodle that runs live.

    Browse tutorials
  2. 2

    Practice in Playground

    Tweak the code and watch it change in real time.

    Open Playground
  3. 3

    Try a challenge

    Pick a tiny coding quest with rules and a starter hint.

    View Challenges
  4. 4

    Browse the Gallery

    See finished coded doodles, then pick one to remix in your own style.

    Explore Gallery

one tiny doodle is enough to start →