Skip to content
CoDdleCoDoodle home
CoDdle
Share your art
Fan Art PracticeIntermediateSVG + CSS

Sailor Mercury

A chibi water guardian poses on a scrapbook card with drifting mint water ribbons and floating bubbles. The doodle keeps the fan-art shapes soft, simplified, and framed in CoDoodle's navy-ink hand-drawn style.

This coded drawing is a fan-art practice example created for educational purposes only. Sailor Moon and its characters are trademarks and copyrighted properties of Naoko Takeuchi, PNP, Kodansha, and Toei Animation. CoDoodle is not affiliated with, endorsed by, or sponsored by Naoko Takeuchi, PNP, Kodansha, or Toei Animation.

A tiny water guardian floats into the scrapbook page with soft ribbons and bright bubbles.

what you'll build

Here's the plan

You will build a chibi Sailor Mercury fan-art doodle from a torn-paper SVG card, simple character shapes, and calm CSS motion. The final piece uses a restricted CoDoodle palette so the fan-art details stay readable and sweet.

You’ll learn

  • Framing an SVG scene with a torn-paper scrapbook card
  • Drawing water ribbons with rounded mint strokes
  • Blocking a chibi magical-girl pose from simple circles and paths
  • Adding tiny facial, sailor-collar, pleat, and book details
  • Animating bubbles and ribbons with reduced-motion support
Skill level
Intermediate
Time
~35 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~152

the steps

Build it, one change at a time

  1. Frame the scrapbook stage

    Start with the cream rounded card, then place a torn white paper shape inside it with a tiny rotation. The mint ribbons, white bubbles, and sunshine stars create the watery scene before the character arrives.

    <svg class="mc" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cream scrapbook page with torn paper, coral tape, water ribbons, bubbles, and tiny stars">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g transform="rotate(2 100 102)">
      <polygon points="32,32 58,28 80,32 105,28 132,33 166,30 170,56 166,82 171,108 166,135 170,167 142,170 114,166 88,171 60,166 31,169 35,138 30,110 34,82 30,56" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <rect x="67" y="22" width="64" height="16" rx="4" fill="#FF6B5E" opacity="0.9" transform="rotate(-8 99 30)"/>
    <g fill="none" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="mc-ribbon-a" d="M36 122 C58 94 82 102 95 120 C111 144 139 139 164 108" stroke="#5ECBB4" stroke-width="8" opacity="0.7"/>
      <path class="mc-ribbon-b" d="M44 83 C70 67 86 82 100 99 C120 123 143 111 158 88" stroke="#5ECBB4" stroke-width="6" opacity="0.7"/>
      <circle class="mc-bubble-a" cx="52" cy="67" r="6" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-b" cx="153" cy="68" r="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-c" cx="42" cy="146" r="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <path class="mc-star-a" d="M62 48 L66 56 L74 58 L67 63 L68 71 L62 66 L55 71 L56 63 L50 58 L58 56 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-b" d="M139 44 L142 50 L148 52 L143 56 L144 63 L139 59 L134 63 L135 56 L130 52 L136 50 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-c" d="M154 137 L157 143 L164 145 L158 149 L159 156 L154 152 L148 156 L150 149 L144 145 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
  </svg>

    scrapbook water stage.

  2. Block in the chibi pose

    Add the guardian as flat silhouette shapes: bobbed hair, a round face, tiny body, skirt, limbs, and boots. The head is intentionally large so the figure reads as chibi even before the face appears.

    <svg class="mc" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A scrapbook card with a blocked-in chibi water guardian silhouette among bubbles and ribbons">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g transform="rotate(2 100 102)">
      <polygon points="32,32 58,28 80,32 105,28 132,33 166,30 170,56 166,82 171,108 166,135 170,167 142,170 114,166 88,171 60,166 31,169 35,138 30,110 34,82 30,56" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <rect x="67" y="22" width="64" height="16" rx="4" fill="#FF6B5E" opacity="0.9" transform="rotate(-8 99 30)"/>
    <g fill="none" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="mc-ribbon-a" d="M36 122 C58 94 82 102 95 120 C111 144 139 139 164 108" stroke="#5ECBB4" stroke-width="8" opacity="0.7"/>
      <path class="mc-ribbon-b" d="M44 83 C70 67 86 82 100 99 C120 123 143 111 158 88" stroke="#5ECBB4" stroke-width="6" opacity="0.7"/>
      <circle class="mc-bubble-a" cx="52" cy="67" r="6" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-b" cx="153" cy="68" r="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-c" cx="42" cy="146" r="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <path class="mc-star-a" d="M62 48 L66 56 L74 58 L67 63 L68 71 L62 66 L55 71 L56 63 L50 58 L58 56 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-b" d="M139 44 L142 50 L148 52 L143 56 L144 63 L139 59 L134 63 L135 56 L130 52 L136 50 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-c" d="M154 137 L157 143 L164 145 L158 149 L159 156 L154 152 L148 156 L150 149 L144 145 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
    <g class="mc-guardian" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <ellipse cx="101" cy="153" rx="31" ry="7" fill="#2B3A55" opacity="0.14" stroke="none"/>
      <path d="M68 78 C68 47 83 35 101 35 C119 35 134 47 134 78 C134 86 129 91 123 91 C118 91 114 88 110 86 C104 89 98 89 92 86 C88 88 84 91 79 91 C73 91 68 86 68 78 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.8"/>
      <circle cx="101" cy="75" r="25" fill="#FBF2E5" stroke="#2B3A55" stroke-width="2.6"/>
      <path d="M76 65 C86 49 107 46 126 61 C121 50 111 43 98 42 C84 42 73 52 76 65 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M84 100 L117 100 L122 126 C111 132 91 132 80 126 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M82 102 L120 102 L113 117 L90 117 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.2"/>
      <path d="M79 126 L123 126 L116 145 L86 145 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M85 107 C72 112 67 123 65 132" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M116 106 C130 110 135 121 136 130" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M90 144 L87 160" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M112 144 L116 160" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M83 148 L97 149 L96 161 Q89 165 82 160 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.3"/>
      <path d="M107 149 L121 148 L122 160 Q114 165 107 161 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.3"/>
    </g>
  </svg>

    the chibi shape appears.

  3. Add face and book details

    Finish the static artwork with dot eyes, a tiny smile, a plain navy tiara line, sailor collar, bow, pleats, and the open book. The book uses tan for the cover and white for the pages so it stays clear at small size.

    <svg class="mc" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A complete chibi Sailor Mercury fan art scrapbook card with water ribbons, bubbles, stars, and a tiny open book">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g transform="rotate(2 100 102)">
      <polygon points="32,32 58,28 80,32 105,28 132,33 166,30 170,56 166,82 171,108 166,135 170,167 142,170 114,166 88,171 60,166 31,169 35,138 30,110 34,82 30,56" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <rect x="67" y="22" width="64" height="16" rx="4" fill="#FF6B5E" opacity="0.9" transform="rotate(-8 99 30)"/>
    <g fill="none" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="mc-ribbon-a" d="M36 122 C58 94 82 102 95 120 C111 144 139 139 164 108" stroke="#5ECBB4" stroke-width="8" opacity="0.7"/>
      <path class="mc-ribbon-b" d="M44 83 C70 67 86 82 100 99 C120 123 143 111 158 88" stroke="#5ECBB4" stroke-width="6" opacity="0.7"/>
      <circle class="mc-bubble-a" cx="52" cy="67" r="6" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-b" cx="153" cy="68" r="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-c" cx="42" cy="146" r="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <path class="mc-star-a" d="M62 48 L66 56 L74 58 L67 63 L68 71 L62 66 L55 71 L56 63 L50 58 L58 56 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-b" d="M139 44 L142 50 L148 52 L143 56 L144 63 L139 59 L134 63 L135 56 L130 52 L136 50 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-c" d="M154 137 L157 143 L164 145 L158 149 L159 156 L154 152 L148 156 L150 149 L144 145 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
    <g class="mc-guardian" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <ellipse cx="101" cy="153" rx="31" ry="7" fill="#2B3A55" opacity="0.14" stroke="none"/>
      <path d="M68 78 C68 47 83 35 101 35 C119 35 134 47 134 78 C134 86 129 91 123 91 C118 91 114 88 110 86 C104 89 98 89 92 86 C88 88 84 91 79 91 C73 91 68 86 68 78 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.8"/>
      <circle cx="101" cy="75" r="25" fill="#FBF2E5" stroke="#2B3A55" stroke-width="2.6"/>
      <path d="M76 65 C86 49 107 46 126 61 C121 50 111 43 98 42 C84 42 73 52 76 65 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M88 66 Q101 61 115 66" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <circle cx="92" cy="77" r="2.2" fill="#2B3A55" stroke="none"/>
      <circle cx="110" cy="77" r="2.2" fill="#2B3A55" stroke="none"/>
      <path d="M97 87 Q101 90 106 87" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <path d="M84 100 L117 100 L122 126 C111 132 91 132 80 126 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M82 102 L120 102 L113 117 L90 117 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.2"/>
      <path d="M96 117 L101 123 L106 117 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5"/>
      <path d="M79 126 L123 126 L116 145 L86 145 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M91 128 L88 143 M101 127 L101 145 M112 128 L115 143" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M85 107 C72 112 67 123 65 132" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M116 106 C130 110 135 121 136 130" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M90 144 L87 160" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M112 144 L116 160" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M83 148 L97 149 L96 161 Q89 165 82 160 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.3"/>
      <path d="M107 149 L121 148 L122 160 Q114 165 107 161 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.3"/>
      <path d="M50 126 L67 120 L70 134 L54 140 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M67 120 L84 126 L81 140 L70 134 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M58 128 L56 136 M67 125 L67 133 M76 131 L74 138" fill="none" stroke="#2B3A55" stroke-width="1.1"/>
    </g>
  </svg>

    Mercury is ready to read.

  4. Float the water magic

    Set transform origins outside the media query so the animated pieces know how to move. Then keep every animation declaration inside the no-preference media query, with negative delays on the bubbles so the scene is already alive when it loads.

    .mc .mc-ribbon-a,
  .mc .mc-ribbon-b {
    transform-box: view-box;
    transform-origin: 100px 100px;
  }

  .mc .mc-bubble-a,
  .mc .mc-bubble-b,
  .mc .mc-bubble-c {
    transform-box: fill-box;
    transform-origin: center;
  }

  .mc .mc-star-a,
  .mc .mc-star-b,
  .mc .mc-star-c {
    transform-box: fill-box;
    transform-origin: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    .mc .mc-ribbon-a {
      animation: mc-ribbon-drift-a 4s ease-in-out infinite alternate;
    }

    .mc .mc-ribbon-b {
      animation: mc-ribbon-drift-b 4.4s ease-in-out infinite alternate;
      animation-delay: -2s;
    }

    .mc .mc-bubble-a {
      animation: mc-bubble-float 5s ease-in-out infinite;
      animation-delay: -0.8s;
    }

    .mc .mc-bubble-b {
      animation: mc-bubble-float 5.8s ease-in-out infinite;
      animation-delay: -2.4s;
    }

    .mc .mc-bubble-c {
      animation: mc-bubble-float 4.6s ease-in-out infinite;
      animation-delay: -1.6s;
    }

    .mc .mc-star-a,
    .mc .mc-star-b,
    .mc .mc-star-c {
      animation: mc-star-twinkle 2.6s ease-in-out infinite;
    }

    .mc .mc-star-b {
      animation-delay: 0.7s;
    }

    .mc .mc-star-c {
      animation-delay: 1.3s;
    }
  }

  @keyframes mc-ribbon-drift-a {
    0% {
      transform: translate(-1px, 1px) rotate(-1deg);
    }

    100% {
      transform: translate(2px, -2px) rotate(1deg);
    }
  }

  @keyframes mc-ribbon-drift-b {
    0% {
      transform: translate(2px, -1px) rotate(1deg);
    }

    100% {
      transform: translate(-2px, 2px) rotate(-1deg);
    }
  }

  @keyframes mc-bubble-float {
    0% {
      opacity: 0;
      transform: translateY(8px) scale(0.88);
    }

    20% {
      opacity: 0.8;
    }

    70% {
      opacity: 0.72;
    }

    100% {
      opacity: 0;
      transform: translateY(-14px) scale(1.06);
    }
  }

  @keyframes mc-star-twinkle {
    0%, 100% {
      opacity: 0.5;
      transform: scale(0.9);
    }

    50% {
      opacity: 1;
      transform: scale(1.12);
    }
  }

    gentle water motion.

the complete code

Everything, in one place

Skipped straight to the end? Welcome. Copy the whole thing, download it, or open it in the Playground to start remixing.

<svg class="mc" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A complete chibi Sailor Mercury fan art scrapbook card with water ribbons, bubbles, stars, and a tiny open book">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g transform="rotate(2 100 102)">
      <polygon points="32,32 58,28 80,32 105,28 132,33 166,30 170,56 166,82 171,108 166,135 170,167 142,170 114,166 88,171 60,166 31,169 35,138 30,110 34,82 30,56" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <rect x="67" y="22" width="64" height="16" rx="4" fill="#FF6B5E" opacity="0.9" transform="rotate(-8 99 30)"/>
    <g fill="none" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="mc-ribbon-a" d="M36 122 C58 94 82 102 95 120 C111 144 139 139 164 108" stroke="#5ECBB4" stroke-width="8" opacity="0.7"/>
      <path class="mc-ribbon-b" d="M44 83 C70 67 86 82 100 99 C120 123 143 111 158 88" stroke="#5ECBB4" stroke-width="6" opacity="0.7"/>
      <circle class="mc-bubble-a" cx="52" cy="67" r="6" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-b" cx="153" cy="68" r="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <circle class="mc-bubble-c" cx="42" cy="146" r="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" opacity="0.8"/>
      <path class="mc-star-a" d="M62 48 L66 56 L74 58 L67 63 L68 71 L62 66 L55 71 L56 63 L50 58 L58 56 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-b" d="M139 44 L142 50 L148 52 L143 56 L144 63 L139 59 L134 63 L135 56 L130 52 L136 50 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mc-star-c" d="M154 137 L157 143 L164 145 L158 149 L159 156 L154 152 L148 156 L150 149 L144 145 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
    <g class="mc-guardian" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <ellipse cx="101" cy="153" rx="31" ry="7" fill="#2B3A55" opacity="0.14" stroke="none"/>
      <path d="M68 78 C68 47 83 35 101 35 C119 35 134 47 134 78 C134 86 129 91 123 91 C118 91 114 88 110 86 C104 89 98 89 92 86 C88 88 84 91 79 91 C73 91 68 86 68 78 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.8"/>
      <circle cx="101" cy="75" r="25" fill="#FBF2E5" stroke="#2B3A55" stroke-width="2.6"/>
      <path d="M76 65 C86 49 107 46 126 61 C121 50 111 43 98 42 C84 42 73 52 76 65 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M88 66 Q101 61 115 66" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <circle cx="92" cy="77" r="2.2" fill="#2B3A55" stroke="none"/>
      <circle cx="110" cy="77" r="2.2" fill="#2B3A55" stroke="none"/>
      <path d="M97 87 Q101 90 106 87" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <path d="M84 100 L117 100 L122 126 C111 132 91 132 80 126 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M82 102 L120 102 L113 117 L90 117 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.2"/>
      <path d="M96 117 L101 123 L106 117 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5"/>
      <path d="M79 126 L123 126 L116 145 L86 145 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M91 128 L88 143 M101 127 L101 145 M112 128 L115 143" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M85 107 C72 112 67 123 65 132" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M116 106 C130 110 135 121 136 130" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M90 144 L87 160" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M112 144 L116 160" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M83 148 L97 149 L96 161 Q89 165 82 160 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.3"/>
      <path d="M107 149 L121 148 L122 160 Q114 165 107 161 Z" fill="#6FA8FF" stroke="#2B3A55" stroke-width="2.3"/>
      <path d="M50 126 L67 120 L70 134 L54 140 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M67 120 L84 126 L81 140 L70 134 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M58 128 L56 136 M67 125 L67 133 M76 131 L74 138" fill="none" stroke="#2B3A55" stroke-width="1.1"/>
    </g>
  </svg>
Open in Playground

tips & gotchas

Mistakes we actually made

Keep the head near two-fifths of the figure height for a readable chibi proportion.

Use thick mint strokes for the water ribbons, then rely on opacity instead of extra colors.

Draw the tiara as a plain navy curve only, without gems, symbols, or character logos.

Place the book after the arms so it covers any awkward hand overlap.

Use negative animation delays on looping bubbles so the composition does not start frozen.

make it yours

Remix it

  • Book Swapeasy

    Change the open book into a closed notebook by using one tan rounded rectangle and a navy center line.

  • Bubble Clustereasy

    Add two more white bubbles near the lower ribbon, then reuse the same float animation with different negative delays.

  • Water Halomedium

    Curve one ribbon behind the head and one in front of the boots to create a layered circular swirl.

challenge extension

Add a tiny bookmark peeking from the book while keeping the palette limited and the silhouette readable.

Tape it to our fridge

keep sketching

More tutorials to try

Pick another small recipe and borrow one technique for your next doodle.