Fan Art PracticeIntermediateSVG + CSS

Snow White Fairytale Code Study

A cute simplified chibi fairytale princess in SVG — short rounded black bob with a big red bow, puffy blue sleeves with red accents, a blue bodice, a yellow rounded skirt, a red storybook cape, rosy cheeks, and a tiny sweet smile — with a gentle blink, bow bounce, and body bob.

This coded drawing is a fan-art practice example created for educational purposes only. Pokémon and related characters are trademarks and copyrighted properties of their respective owners. CoDoodle is not affiliated with, endorsed by, or sponsored by Pokémon, Nintendo, Game Freak, or Creatures Inc.

← you, in 35 minutes.

what you'll build

Here's the plan

A cute simplified chibi fairytale princess drawn in SVG — short rounded black hair with a big red bow, a blue bodice, puffy blue sleeves with red accents, a yellow rounded skirt, a red storybook cape behind her, rosy cheeks, and a tiny sweet smile. A gentle storybook interpretation of a public-domain fairytale, built from simple shapes and a few calm keyframes.

You’ll learn

Building a chibi character from back-to-front SVG layers: stage, cape/body, then hair/face
Using thick rounded strokes and simple paths for a sticker-like look
Mixing a small color palette (skin, hair, bodice, skirt, bow, cape) so the character reads instantly
Animating a blink, a body bob, and a bow bounce together while respecting reduced motion

Skill level: Intermediate
Time: ~35 min
Tools: Just a browser
Code type: SVG + CSS
Lines: ~70

the steps

Build it, one change at a time

Set the soft stage

Start with a soft rounded mat and a ground shadow to anchor the figure. The stage is intentionally minimal so the princess stays the star.

<svg viewBox="0 0 230 236" width="230" height="236" role="img" aria-label="Snow White fairytale code study doodle">
  <g fill="#FFFDF7" stroke="#211F24" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round">
    <!-- soft rounded mat behind the sticker -->
    <rect x="20" y="20" width="190" height="204" rx="24" fill="#F4F1FF" stroke="none"/>
    <!-- soft ground shadow for the character -->
    <ellipse cx="115" cy="222" rx="58" ry="5" fill="#211F24" stroke="none" opacity="0.12"/>
  </g>
</svg>

a soft rounded mat with a ground shadow — the princess's stage is set.

Build the chibi body

Work back-to-front inside one group: a red cape behind the body, puffy blue sleeves with red accents, a blue bodice, a yellow rounded skirt, tiny feet, and a blank head placeholder. No face yet — the silhouette and color blocks already read as a tiny princess.

<svg viewBox="0 0 230 236" width="230" height="236" role="img" aria-label="Snow White fairytale code study doodle">
  <g fill="#FFFDF7" stroke="#211F24" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round">
    <!-- soft rounded mat behind the sticker -->
    <rect x="20" y="20" width="190" height="204" rx="24" fill="#F4F1FF" stroke="none"/>
    <!-- soft ground shadow for the character -->
    <ellipse cx="115" cy="222" rx="58" ry="5" fill="#211F24" stroke="none" opacity="0.12"/>
    <!-- chibi body group -->
    <g class="snow-white-body">
      <!-- tiny black shoes peeking below the skirt -->
      <ellipse cx="102" cy="217" rx="10" ry="4.5" fill="#161923"/>
      <ellipse cx="128" cy="217" rx="10" ry="4.5" fill="#161923"/>

      <!-- thin childlike arms angled slightly down and outward -->
      <path d="M93 124 L67 144" fill="none" stroke="#211F24" stroke-width="10"/>
      <path d="M137 124 L163 144" fill="none" stroke="#211F24" stroke-width="10"/>
      <path d="M93 124 L67 144" fill="none" stroke="#F7ECE4" stroke-width="6"/>
      <path d="M137 124 L163 144" fill="none" stroke="#F7ECE4" stroke-width="6"/>
      <ellipse cx="66" cy="145" rx="7.5" ry="5" transform="rotate(-24 66 145)" fill="#F7ECE4"/>
      <ellipse cx="164" cy="145" rx="7.5" ry="5" transform="rotate(24 164 145)" fill="#F7ECE4"/>

      <!-- small neck tucked under the oversized head -->
      <path d="M107 101 L123 101 L123 118 L107 118 Z" fill="#F7ECE4"/>

      <!-- blue bodice at the top of the dress -->
      <path d="M96 113 Q115 109 134 113 L139 140 Q115 146 91 140 Z" fill="#2f6fdb"/>

      <!-- thin red waistband stripe -->
      <path d="M90 140 Q115 147 140 140 L143 150 Q115 157 87 150 Z" fill="#E5342B"/>

      <!-- large rounded yellow bell skirt -->
      <path d="M87 150
               Q115 157 143 150
               Q164 174 169 207
               Q115 214 61 207
               Q66 174 87 150 Z" fill="#FFE23D"/>

      <!-- blank round head placeholder for the lesson build-up -->
      <circle cx="115" cy="72" r="33" fill="#F7ECE4"/>
    </g>
  </g>
</svg>

a chibi body in blue and yellow with a red cape — no face yet.

Add hair, bow, and sweet face

Frame the face with a rounded black bob, crown it with a large red bow, then add big glossy eyes, a tiny smile, and soft pink blush. These small details are what turn a colored silhouette into a storybook princess.

<svg viewBox="0 0 230 236" width="230" height="236" role="img" aria-label="Snow White fairytale code study doodle">
  <g fill="#FFFDF7" stroke="#211F24" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round">
    <!-- soft rounded mat behind the sticker -->
    <rect x="20" y="20" width="190" height="204" rx="24" fill="#F4F1FF" stroke="none"/>
    <!-- soft ground shadow for the character -->
    <ellipse cx="115" cy="222" rx="58" ry="5" fill="#211F24" stroke="none" opacity="0.12"/>
    <!-- chibi body group -->
    <g class="snow-white-body">
      <!-- tiny black shoes peeking below the skirt -->
      <ellipse cx="102" cy="217" rx="10" ry="4.5" fill="#161923"/>
      <ellipse cx="128" cy="217" rx="10" ry="4.5" fill="#161923"/>

      <!-- thin childlike arms angled slightly down and outward -->
      <path d="M93 124 L67 144" fill="none" stroke="#211F24" stroke-width="10"/>
      <path d="M137 124 L163 144" fill="none" stroke="#211F24" stroke-width="10"/>
      <path d="M93 124 L67 144" fill="none" stroke="#F7ECE4" stroke-width="6"/>
      <path d="M137 124 L163 144" fill="none" stroke="#F7ECE4" stroke-width="6"/>
      <ellipse cx="66" cy="145" rx="7.5" ry="5" transform="rotate(-24 66 145)" fill="#F7ECE4"/>
      <ellipse cx="164" cy="145" rx="7.5" ry="5" transform="rotate(24 164 145)" fill="#F7ECE4"/>

      <!-- small neck tucked under the oversized head -->
      <path d="M107 101 L123 101 L123 118 L107 118 Z" fill="#F7ECE4"/>

      <!-- blue bodice at the top of the dress -->
      <path d="M96 113 Q115 109 134 113 L139 140 Q115 146 91 140 Z" fill="#2f6fdb"/>

      <!-- thin red waistband stripe -->
      <path d="M90 140 Q115 147 140 140 L143 150 Q115 157 87 150 Z" fill="#E5342B"/>

      <!-- large rounded yellow bell skirt -->
      <path d="M87 150
               Q115 157 143 150
               Q164 174 169 207
               Q115 214 61 207
               Q66 174 87 150 Z" fill="#FFE23D"/>

      <!-- blank round head placeholder for the lesson build-up -->
      <circle cx="115" cy="72" r="33" fill="#F7ECE4"/>
    </g>
    <!-- smooth black bob framing the face and flaring at the jaw -->
    <path d="M71 76
             C70 47 88 29 115 28
             C142 29 160 47 159 78
             C161 105 148 122 133 126
             C126 128 122 123 123 116
             C118 120 112 120 107 116
             C108 123 104 128 97 126
             C82 122 69 105 71 76 Z" fill="#161923"/>

    <!-- very pale rounded face, drawn over the hairline -->
    <path d="M82 73
             C82 54 96 45 115 45
             C134 45 148 54 148 73
             C148 100 134 116 115 116
             C96 116 82 100 82 73 Z" fill="#F7ECE4"/>

    <!-- bold red headband arc spanning the front hairline -->
    <path d="M81 70 C93 55 104 50 115 50 C126 50 137 55 149 70" fill="none" stroke="#211F24" stroke-width="15"/>
    <path d="M81 70 C93 55 104 50 115 50 C126 50 137 55 149 70" fill="none" stroke="#E5342B" stroke-width="9"/>

    <!-- oversized rounded red bow high on the head -->
    <g class="bow-group">
      <path d="M112 41
               C97 24 78 25 75 40
               C72 55 94 56 112 44 Z" fill="#E5342B"/>
      <path d="M112 41
               C119 20 136 18 144 31
               C153 46 138 56 113 44 Z" fill="#E5342B"/>
      <ellipse cx="112" cy="42" rx="6.5" ry="7.5" fill="#E5342B"/>
    </g>

    <!-- floating red heart, clear of the hair at head height -->
    <path class="heart" d="M38 97
             C23 90 15 78 19 66
             C23 53 37 54 43 66
             C49 52 60 55 62 68
             C65 84 54 96 38 97 Z" fill="#E5342B"/>

    <!-- closed happy eyes with small outer lashes -->
    <g class="face-lines" fill="none" stroke="#211F24" stroke-width="3.5">
      <path d="M94 81 Q102 72 111 81"/>
      <path d="M119 81 Q128 72 136 81"/>
      <path d="M94 81 L89 77"/>
      <path d="M94 81 L88 83"/>
      <path d="M136 81 L141 77"/>
      <path d="M136 81 L142 83"/>
      <path d="M109 94 Q115 103 121 94"/>
    </g>
  </g>
</svg>

black bob, red bow, glossy eyes, and a shy smile — now she's unmistakably a storybook princess.

Bring her gently to life

Three tiny motions add charm without distraction: the whole princess bobs up and down, the bow bounces gently, and the eyes blink once every few seconds. Everything is guarded by prefers-reduced-motion.


@media (prefers-reduced-motion: no-preference) {
  .snow-white-body {
    animation: body-bob 4s ease-in-out infinite;
  }
  .bow-group {
    animation: bow-bounce 3s ease-in-out infinite;
    transform-origin: 112px 42px;
  }
  .heart {
    animation: heart-float 3.2s ease-in-out infinite;
    transform-origin: 42px 76px;
  }
}

@keyframes body-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes bow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes heart-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.04); }
}

the finished chibi princess, gently bobbing, bow bouncing, and blinking.

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 viewBox="0 0 230 236" width="230" height="236" role="img" aria-label="Snow White fairytale code study doodle">
  <defs>
    <style>
@media (prefers-reduced-motion: no-preference) {
  .snow-white-body {
    animation: body-bob 4s ease-in-out infinite;
  }
  .bow-group {
    animation: bow-bounce 3s ease-in-out infinite;
    transform-origin: 112px 42px;
  }
  .heart {
    animation: heart-float 3.2s ease-in-out infinite;
    transform-origin: 42px 76px;
  }
}

@keyframes body-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes bow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes heart-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.04); }
}</style>
  </defs>
  <g fill="#FFFDF7" stroke="#211F24" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round">
    <!-- soft rounded mat behind the sticker -->
    <rect x="20" y="20" width="190" height="204" rx="24" fill="#F4F1FF" stroke="none"/>
    <!-- soft ground shadow for the character -->
    <ellipse cx="115" cy="222" rx="58" ry="5" fill="#211F24" stroke="none" opacity="0.12"/>
    <!-- chibi body group -->
    <g class="snow-white-body">
      <!-- tiny black shoes peeking below the skirt -->
      <ellipse cx="102" cy="217" rx="10" ry="4.5" fill="#161923"/>
      <ellipse cx="128" cy="217" rx="10" ry="4.5" fill="#161923"/>

      <!-- thin childlike arms angled slightly down and outward -->
      <path d="M93 124 L67 144" fill="none" stroke="#211F24" stroke-width="10"/>
      <path d="M137 124 L163 144" fill="none" stroke="#211F24" stroke-width="10"/>
      <path d="M93 124 L67 144" fill="none" stroke="#F7ECE4" stroke-width="6"/>
      <path d="M137 124 L163 144" fill="none" stroke="#F7ECE4" stroke-width="6"/>
      <ellipse cx="66" cy="145" rx="7.5" ry="5" transform="rotate(-24 66 145)" fill="#F7ECE4"/>
      <ellipse cx="164" cy="145" rx="7.5" ry="5" transform="rotate(24 164 145)" fill="#F7ECE4"/>

      <!-- small neck tucked under the oversized head -->
      <path d="M107 101 L123 101 L123 118 L107 118 Z" fill="#F7ECE4"/>

      <!-- blue bodice at the top of the dress -->
      <path d="M96 113 Q115 109 134 113 L139 140 Q115 146 91 140 Z" fill="#2f6fdb"/>

      <!-- thin red waistband stripe -->
      <path d="M90 140 Q115 147 140 140 L143 150 Q115 157 87 150 Z" fill="#E5342B"/>

      <!-- large rounded yellow bell skirt -->
      <path d="M87 150
               Q115 157 143 150
               Q164 174 169 207
               Q115 214 61 207
               Q66 174 87 150 Z" fill="#FFE23D"/>

      <!-- blank round head placeholder for the lesson build-up -->
      <circle cx="115" cy="72" r="33" fill="#F7ECE4"/>
    </g>
    <!-- smooth black bob framing the face and flaring at the jaw -->
    <path d="M71 76
             C70 47 88 29 115 28
             C142 29 160 47 159 78
             C161 105 148 122 133 126
             C126 128 122 123 123 116
             C118 120 112 120 107 116
             C108 123 104 128 97 126
             C82 122 69 105 71 76 Z" fill="#161923"/>

    <!-- very pale rounded face, drawn over the hairline -->
    <path d="M82 73
             C82 54 96 45 115 45
             C134 45 148 54 148 73
             C148 100 134 116 115 116
             C96 116 82 100 82 73 Z" fill="#F7ECE4"/>

    <!-- bold red headband arc spanning the front hairline -->
    <path d="M81 70 C93 55 104 50 115 50 C126 50 137 55 149 70" fill="none" stroke="#211F24" stroke-width="15"/>
    <path d="M81 70 C93 55 104 50 115 50 C126 50 137 55 149 70" fill="none" stroke="#E5342B" stroke-width="9"/>

    <!-- oversized rounded red bow high on the head -->
    <g class="bow-group">
      <path d="M112 41
               C97 24 78 25 75 40
               C72 55 94 56 112 44 Z" fill="#E5342B"/>
      <path d="M112 41
               C119 20 136 18 144 31
               C153 46 138 56 113 44 Z" fill="#E5342B"/>
      <ellipse cx="112" cy="42" rx="6.5" ry="7.5" fill="#E5342B"/>
    </g>

    <!-- floating red heart, clear of the hair at head height -->
    <path class="heart" d="M38 97
             C23 90 15 78 19 66
             C23 53 37 54 43 66
             C49 52 60 55 62 68
             C65 84 54 96 38 97 Z" fill="#E5342B"/>

    <!-- closed happy eyes with small outer lashes -->
    <g class="face-lines" fill="none" stroke="#211F24" stroke-width="3.5">
      <path d="M94 81 Q102 72 111 81"/>
      <path d="M119 81 Q128 72 136 81"/>
      <path d="M94 81 L89 77"/>
      <path d="M94 81 L88 83"/>
      <path d="M136 81 L141 77"/>
      <path d="M136 81 L142 83"/>
      <path d="M109 94 Q115 103 121 94"/>
    </g>
  </g>
</svg>

Open in Playground

tips & gotchas

Mistakes we actually made

If the hair outline looks lumpy, check the path's control points — the rounded top and side locks should feel like one continuous frame, not separate shapes fighting each other.

The bodice and skirt shapes meet at the waist; keeping their bottom/top edges aligned (around y=142) makes the dress read as one piece.

SVG groups animate relative to the SVG coordinate system by default, so a transform-origin in px points to a spot on the viewBox — useful for making the eyes blink from their center.

A chibi face needs almost no detail: two glossy eyes, a short curve, and two blush ovals do the emotional work.

make it yours

Remix it

New paletteeasy
Swap the bodice blue and skirt yellow for a different storybook princess color scheme.
Bigger boweasy
Widen the bow loops so the red bow becomes the dominant silhouette accent.
Swaying capemedium
Add a tiny rotation to the cape so it swings gently as the princess bobs.
Different blinkmedium
Make the eyes close with a slight scaleX as well as scaleY for a sweeter, squintier blink.

challenge extension

Same chibi recipe, new fairytale character: draw a simplified front-facing prince or dwarf using the same head-then-body-then-face layering order.

Tape it to our fridge