Skip to content
CoDdleCoDoodle home
CoDdle
Share your art

coding challenges

Tiny coding quests for playful doodles.

Practice CSS, SVG, Canvas, and animation through small creative prompts with clear rules, starter hints, and remix goals.

Pick a challengeOpen Playground
~/codoodleprompt›draw{ draw: "cute" }// tiny quests
challenge_01featured

Create a simple face using basic shapes, then animate only the eyes.

difficulty:
Beginner
code:
CSS Animation
time:
15 min
skill:
keyframes

// constraint: animate only one small part

// hint: use @keyframes blink

Open in Playground

the board

Choose a tiny coding quest

Filter by difficulty, code type, or what you feel like practicing.

difficulty:

  • challenge_01.ts

    Make one shape blink

    Create a simple face using basic shapes, then animate only the eyes.

    BeginnerCSS Animation15 min

    // skill: keyframes

    View hint

    // constraint: animate only one small part

    // hint: use `@keyframes blink`

    animationfacesbeginner
    Start in Playground for Make one shape blink

  • challenge_02.ts

    Turn a circle into a food mascot

    Start from a single circle and shape it into a friendly food mascot.

    BeginnerHTML/CSS20 min

    // skill: border-radius

    View hint

    // constraint: start from one circle

    // hint: stack divs + border-radius

    foodcss-shapesbeginner
    Start in Playground for Turn a circle into a food mascot

  • challenge_03.ts

    Draw a tiny rainy window

    Paint a single-frame rainy window scene on a canvas.

    EasyCanvas25 min

    // skill: canvas drawing

    View hint

    // constraint: one frame only

    // hint: ctx.fillRect for rain

    canvasscenes
    Start in Playground for Draw a tiny rainy window

  • challenge_04.ts

    Create a 5-color SVG sticker

    Design a sticker using exactly five fill colors in SVG.

    EasySVG20 min

    // skill: SVG shapes

    View hint

    // constraint: exactly 5 fills

    // hint: `<circle>` / `<rect>` / `<path>`

    svgstickers
    Start in Playground for Create a 5-color SVG sticker

  • challenge_05.ts

    Make a pixel pet

    Draw a 16×16 pixel pet from a string map.

    MediumPixel Art30 min

    // skill: grid drawing

    View hint

    // constraint: 16×16 grid

    // hint: box-shadow grid

    pixelgrid
    Start in Playground for Make a pixel pet

  • challenge_06.ts

    Animate a sleepy cloud

    Make a cloud float gently, like it's dozing.

    EasyCSS Animation20 min

    // skill: transform

    View hint

    // constraint: float gently, no bounce

    // hint: use `@keyframes float`

    animationfloat
    Start in Playground for Animate a sleepy cloud
coDoodle.js

Not sure what to build?

Roll a quest and let CoDoodle hand you a tiny prompt to code.

$ waiting for a quest

// how it works

  • 1choose prompt
  • 2remix in playground
  • 3submit your doodle

Ship your tiny doodle.

Finished a challenge? Share your coded version with the CoDoodle gallery.

Share your artBrowse Gallery