Fan Art PracticeIntermediateSVG + CSS

Sailor Jupiter

A chibi thunder guardian springs across a scrapbook card, with lightning bolts flashing around her. A tiny potted flower sits beside the action like a sweet grounded detail.

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 thunder guardian turns a scrapbook card into a bright little action scene.

what you'll build

Here's the plan

You will build a chibi Sailor Jupiter fan-art doodle with torn paper, washi tape, flashing lightning, a swaying ponytail, and a small potted flower. The whole piece stays simple enough to follow while still feeling lively.

You’ll learn

Layering a cream SVG card with a torn-paper scrapbook frame
Using one strict palette for fan-art details without logos or sigils
Blocking chibi proportions from flat SVG shapes
Adding readable face, costume, hair, and boot details with navy ink
Animating lightning, ponytail, and plant leaves with reduced-motion support

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

the steps

Build it, one change at a time

Set the scrapbook stage

Start with the cream card, then tuck a white torn-paper polygon inside it at a slight angle. A single blue washi tape strip overlaps the top edge while the bolts, sparkle dots, and potted flower establish the thunder-and-garden mood.

<svg class="jp" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cream scrapbook page with torn paper, washi tape, lightning, sparkles, and a potted flower">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
  <g class="jp-paper" transform="rotate(2 100 100)">
    <polygon points="29,32 169,30 175,50 171,74 177,99 170,124 175,151 165,174 34,170 27,148 31,126 25,98 30,74 26,52" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
  </g>
  <g class="jp-tape" transform="rotate(-8 100 30)">
    <rect x="66" y="22" width="68" height="16" rx="3" fill="#6FA8FF" opacity="0.9" stroke="none"/>
    <circle cx="75" cy="30" r="1.8" fill="#FFFDF7"/>
    <circle cx="88" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="103" cy="31" r="1.7" fill="#FFFDF7"/>
    <circle cx="118" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="129" cy="31" r="1.7" fill="#FFFDF7"/>
  </g>
  <g class="jp-scene" stroke-linecap="round" stroke-linejoin="round">
    <path class="jp-bolt jp-bolt-a" d="M48 63 L65 37 L60 58 L72 56 L52 86 L58 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.7"/>
    <path class="jp-bolt jp-bolt-b" d="M151 78 L166 55 L162 73 L173 71 L155 99 L160 80 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6"/>
    <circle class="jp-dot" cx="45" cy="113" r="2.2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="146" cy="48" r="2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="164" cy="126" r="1.8" fill="#FFD84D"/>
    <g class="jp-plant">
      <path d="M151 160 H176 L171 178 H156 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2"/>
      <path d="M153 160 H174" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <g class="jp-leaves">
        <path d="M163 159 C158 149 149 149 148 157 C154 158 158 160 163 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 C168 147 178 147 179 155 C173 157 169 159 164 158 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 159 C161 150 164 144 169 142 C172 149 170 155 164 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 L164 143" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
        <circle cx="169" cy="141" r="4" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5"/>
      </g>
    </g>
  </g>
</svg>

a taped scrapbook card with lightning and a little flower.

Block the chibi pose

Now add the simplified figure as broad flat shapes: a big head, tan hair, ponytail, raised fist, little body, skirt, limbs, and boots. Keeping the face and costume lines out for now makes it easier to judge the action silhouette.

<svg class="jp" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cream scrapbook page with a chibi magical girl silhouette, lightning, and a potted flower">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
  <g class="jp-paper" transform="rotate(2 100 100)">
    <polygon points="29,32 169,30 175,50 171,74 177,99 170,124 175,151 165,174 34,170 27,148 31,126 25,98 30,74 26,52" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
  </g>
  <g class="jp-tape" transform="rotate(-8 100 30)">
    <rect x="66" y="22" width="68" height="16" rx="3" fill="#6FA8FF" opacity="0.9" stroke="none"/>
    <circle cx="75" cy="30" r="1.8" fill="#FFFDF7"/>
    <circle cx="88" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="103" cy="31" r="1.7" fill="#FFFDF7"/>
    <circle cx="118" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="129" cy="31" r="1.7" fill="#FFFDF7"/>
  </g>
  <g class="jp-scene" stroke-linecap="round" stroke-linejoin="round">
    <path class="jp-bolt jp-bolt-a" d="M48 63 L65 37 L60 58 L72 56 L52 86 L58 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.7"/>
    <path class="jp-bolt jp-bolt-b" d="M151 78 L166 55 L162 73 L173 71 L155 99 L160 80 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6"/>
    <circle class="jp-dot" cx="45" cy="113" r="2.2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="146" cy="48" r="2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="164" cy="126" r="1.8" fill="#FFD84D"/>
    <g class="jp-plant">
      <path d="M151 160 H176 L171 178 H156 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2"/>
      <path d="M153 160 H174" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <g class="jp-leaves">
        <path d="M163 159 C158 149 149 149 148 157 C154 158 158 160 163 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 C168 147 178 147 179 155 C173 157 169 159 164 158 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 159 C161 150 164 144 169 142 C172 149 170 155 164 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 L164 143" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
        <circle cx="169" cy="141" r="4" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5"/>
      </g>
    </g>
    <g class="jp-hero" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g class="jp-ponytail">
        <path d="M122 56 C140 53 148 66 145 82 C142 98 138 108 130 116 C134 103 132 92 126 84 C121 76 118 64 122 56 Z" fill="#E4B06A" stroke-width="2.6"/>
        <path d="M141 90 C139 100 135 108 129 114" fill="none" stroke-width="2"/>
        <path d="M133 86 C131 94 128 100 123 105" fill="none" stroke-width="2"/>
      </g>
      <path d="M82 70 C79 52 93 42 109 45 C123 48 132 63 127 80 C120 70 94 67 82 70 Z" fill="#E4B06A" stroke-width="2.8"/>
      <circle cx="101" cy="78" r="30" fill="#FBF2E5" stroke-width="3"/>
      <path d="M72 116 C63 109 59 100 61 91" fill="none" stroke-width="3"/>
      <circle cx="60" cy="89" r="6" fill="#FBF2E5" stroke-width="2.4"/>
      <path d="M128 118 C141 115 147 107 151 96" fill="none" stroke-width="3"/>
      <circle cx="153" cy="92" r="6" fill="#FBF2E5" stroke-width="2.4"/>
      <path d="M88 106 C95 111 110 112 119 106 L125 132 C112 140 93 139 80 132 Z" fill="#FFFDF7" stroke-width="2.7"/>
      <path d="M82 126 L124 126 L119 151 C109 157 93 156 84 150 Z" fill="#5ECBB4" stroke-width="2.8"/>
      <path d="M91 152 C90 153 89 154 88 156" fill="none" stroke-width="3"/>
      <path d="M111 152 C112 153 113 154 114 156" fill="none" stroke-width="3"/>
      <path d="M80 156 L96 156 L95 166 Q87 170 79 165 Z" fill="#5ECBB4" stroke-width="2.3"/>
      <path d="M106 156 L122 156 L123 165 Q115 170 107 166 Z" fill="#5ECBB4" stroke-width="2.3"/>
    </g>
  </g>
</svg>

the pose reads before the small details arrive.

Ink the guardian details

Add the dot eyes, open grin, tiara line, collar, bow, skirt pleats, hair tie, and lace-up marks. The final details stay icon-like so the chibi proportions remain clear at a small size.

<svg class="jp" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A complete chibi Sailor Jupiter fan-art doodle with lightning, a potted flower, and scrapbook paper">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
  <g class="jp-paper" transform="rotate(2 100 100)">
    <polygon points="29,32 169,30 175,50 171,74 177,99 170,124 175,151 165,174 34,170 27,148 31,126 25,98 30,74 26,52" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
  </g>
  <g class="jp-tape" transform="rotate(-8 100 30)">
    <rect x="66" y="22" width="68" height="16" rx="3" fill="#6FA8FF" opacity="0.9" stroke="none"/>
    <circle cx="75" cy="30" r="1.8" fill="#FFFDF7"/>
    <circle cx="88" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="103" cy="31" r="1.7" fill="#FFFDF7"/>
    <circle cx="118" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="129" cy="31" r="1.7" fill="#FFFDF7"/>
  </g>
  <g class="jp-scene" stroke-linecap="round" stroke-linejoin="round">
    <path class="jp-bolt jp-bolt-a" d="M48 63 L65 37 L60 58 L72 56 L52 86 L58 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.7"/>
    <path class="jp-bolt jp-bolt-b" d="M151 78 L166 55 L162 73 L173 71 L155 99 L160 80 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6"/>
    <circle class="jp-dot" cx="45" cy="113" r="2.2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="146" cy="48" r="2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="164" cy="126" r="1.8" fill="#FFD84D"/>
    <g class="jp-plant">
      <path d="M151 160 H176 L171 178 H156 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2"/>
      <path d="M153 160 H174" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <g class="jp-leaves">
        <path d="M163 159 C158 149 149 149 148 157 C154 158 158 160 163 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 C168 147 178 147 179 155 C173 157 169 159 164 158 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 159 C161 150 164 144 169 142 C172 149 170 155 164 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 L164 143" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
        <circle cx="169" cy="141" r="4" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5"/>
      </g>
    </g>
    <g class="jp-hero" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g class="jp-ponytail">
        <path d="M122 56 C140 53 148 66 145 82 C142 98 138 108 130 116 C134 103 132 92 126 84 C121 76 118 64 122 56 Z" fill="#E4B06A" stroke-width="2.6"/>
        <path d="M141 90 C139 100 135 108 129 114" fill="none" stroke-width="2"/>
        <path d="M133 86 C131 94 128 100 123 105" fill="none" stroke-width="2"/>
      </g>
      <path d="M82 70 C79 52 93 42 109 45 C123 48 132 63 127 80 C120 70 94 67 82 70 Z" fill="#E4B06A" stroke-width="2.8"/>
      <circle cx="101" cy="78" r="30" fill="#FBF2E5" stroke-width="3"/>
      <path d="M87 61 Q101 68 123 61" fill="none" stroke-width="2"/>
      <path d="M89 72 Q101 68 115 72" fill="none" stroke-width="1.7"/>
      <circle cx="91" cy="80" r="2.5" fill="#2B3A55" stroke="none"/>
      <circle cx="111" cy="80" r="2.5" fill="#2B3A55" stroke="none"/>
      <path d="M92 90 C96 99 108 99 112 90 C108 95 96 95 92 90 Z" fill="#2B3A55" stroke="none"/>
      <path d="M124 53 C129 51 134 54 134 59 C130 62 125 61 123 57 Z" fill="#FF6B5E" stroke-width="1.6"/>
      <path d="M72 116 C63 109 59 100 61 91" fill="none" stroke-width="3"/>
      <circle cx="60" cy="89" r="6" fill="#FBF2E5" stroke-width="2.4"/>
      <path d="M128 118 C141 115 147 107 151 96" fill="none" stroke-width="3"/>
      <circle cx="153" cy="92" r="6" fill="#FBF2E5" stroke-width="2.4"/>
      <path d="M89 105 L101 117 L119 105 L124 121 L115 130 L86 130 L78 121 Z" fill="#5ECBB4" stroke-width="2.4"/>
      <path d="M88 106 C95 111 110 112 119 106 L125 132 C112 140 93 139 80 132 Z" fill="#FFFDF7" stroke-width="2.7"/>
      <path d="M96 114 L103 118 L96 122 Z M110 114 L103 118 L110 122 Z" fill="#FF6B5E" stroke-width="2"/>
      <path d="M82 126 L124 126 L119 151 C109 157 93 156 84 150 Z" fill="#5ECBB4" stroke-width="2.8"/>
      <path d="M93 128 L91 151 M103 128 L102 154 M113 128 L115 151" fill="none" stroke-width="1.6"/>
      <path d="M91 152 C90 153 89 154 88 156" fill="none" stroke-width="3"/>
      <path d="M111 152 C112 153 113 154 114 156" fill="none" stroke-width="3"/>
      <path d="M80 156 L96 156 L95 166 Q87 170 79 165 Z" fill="#5ECBB4" stroke-width="2.3"/>
      <path d="M106 156 L122 156 L123 165 Q115 170 107 166 Z" fill="#5ECBB4" stroke-width="2.3"/>
      <path d="M83 159 L92 162 M83 162 L92 158 M110 162 L119 159 M110 158 L119 162" fill="none" stroke-width="1.4"/>
    </g>
  </g>
</svg>

the static fan-art doodle is fully inked.

Animate the stormy accents

Set transform origins outside the media query so each moving part pivots from a sensible point. Inside the no-preference media query, the bolts flash on offset phases while the ponytail and plant leaves swing gently.

.jp .jp-bolt,
.jp .jp-ponytail,
.jp .jp-leaves,
.jp .jp-paper,
.jp .jp-tape,
.jp .jp-hero,
.jp .jp-dot {
  transform-box: view-box;
}
.jp .jp-paper {
  transform-origin: 100px 100px;
}
.jp .jp-tape {
  transform-origin: 100px 30px;
}
.jp .jp-hero {
  transform-origin: 102px 130px;
}
.jp .jp-dot {
  transform-origin: center;
}
.jp .jp-bolt-a {
  transform-origin: 58px 62px;
}
.jp .jp-bolt-b {
  transform-origin: 162px 77px;
}
.jp .jp-ponytail {
  transform-origin: 119px 60px;
}
.jp .jp-leaves {
  transform-origin: 164px 160px;
}

@media (prefers-reduced-motion: no-preference) {
  .jp .jp-bolt-a {
    animation: jp-flash-a 1.8s steps(1, end) infinite;
    animation-delay: -0.45s;
  }
  .jp .jp-bolt-b {
    animation: jp-flash-b 1.8s steps(1, end) infinite;
    animation-delay: -0.45s;
  }
  .jp .jp-ponytail {
    animation: jp-ponytail-swing 4.6s ease-in-out infinite;
  }
  .jp .jp-leaves {
    animation: jp-leaf-sway 3.8s ease-in-out infinite;
  }
}

@keyframes jp-flash-a {
  0%, 49% {
    opacity: 1;
    transform: scale(1.04);
  }
  50%, 100% {
    opacity: 0;
    transform: scale(0.98);
  }
}
@keyframes jp-flash-b {
  0%, 49% {
    opacity: 0;
    transform: scale(0.98);
  }
  50%, 100% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes jp-ponytail-swing {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
@keyframes jp-leaf-sway {
  0%, 100% {
    transform: rotate(-1.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}

lightning blinks while the hair and leaves sway.

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="jp" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A complete chibi Sailor Jupiter fan-art doodle with lightning, a potted flower, and scrapbook paper">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
  <g class="jp-paper" transform="rotate(2 100 100)">
    <polygon points="29,32 169,30 175,50 171,74 177,99 170,124 175,151 165,174 34,170 27,148 31,126 25,98 30,74 26,52" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
  </g>
  <g class="jp-tape" transform="rotate(-8 100 30)">
    <rect x="66" y="22" width="68" height="16" rx="3" fill="#6FA8FF" opacity="0.9" stroke="none"/>
    <circle cx="75" cy="30" r="1.8" fill="#FFFDF7"/>
    <circle cx="88" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="103" cy="31" r="1.7" fill="#FFFDF7"/>
    <circle cx="118" cy="27" r="1.6" fill="#FFFDF7"/>
    <circle cx="129" cy="31" r="1.7" fill="#FFFDF7"/>
  </g>
  <g class="jp-scene" stroke-linecap="round" stroke-linejoin="round">
    <path class="jp-bolt jp-bolt-a" d="M48 63 L65 37 L60 58 L72 56 L52 86 L58 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.7"/>
    <path class="jp-bolt jp-bolt-b" d="M151 78 L166 55 L162 73 L173 71 L155 99 L160 80 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6"/>
    <circle class="jp-dot" cx="45" cy="113" r="2.2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="146" cy="48" r="2" fill="#FFD84D"/>
    <circle class="jp-dot" cx="164" cy="126" r="1.8" fill="#FFD84D"/>
    <g class="jp-plant">
      <path d="M151 160 H176 L171 178 H156 Z" fill="#E4B06A" stroke="#2B3A55" stroke-width="2"/>
      <path d="M153 160 H174" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <g class="jp-leaves">
        <path d="M163 159 C158 149 149 149 148 157 C154 158 158 160 163 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 C168 147 178 147 179 155 C173 157 169 159 164 158 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 159 C161 150 164 144 169 142 C172 149 170 155 164 159 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.7"/>
        <path d="M164 158 L164 143" fill="none" stroke="#2B3A55" stroke-width="1.5"/>
        <circle cx="169" cy="141" r="4" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5"/>
      </g>
    </g>
    <g class="jp-hero" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g class="jp-ponytail">
        <path d="M122 56 C140 53 148 66 145 82 C142 98 138 108 130 116 C134 103 132 92 126 84 C121 76 118 64 122 56 Z" fill="#E4B06A" stroke-width="2.6"/>
        <path d="M141 90 C139 100 135 108 129 114" fill="none" stroke-width="2"/>
        <path d="M133 86 C131 94 128 100 123 105" fill="none" stroke-width="2"/>
      </g>
      <path d="M82 70 C79 52 93 42 109 45 C123 48 132 63 127 80 C120 70 94 67 82 70 Z" fill="#E4B06A" stroke-width="2.8"/>
      <circle cx="101" cy="78" r="30" fill="#FBF2E5" stroke-width="3"/>
      <path d="M87 61 Q101 68 123 61" fill="none" stroke-width="2"/>
      <path d="M89 72 Q101 68 115 72" fill="none" stroke-width="1.7"/>
      <circle cx="91" cy="80" r="2.5" fill="#2B3A55" stroke="none"/>
      <circle cx="111" cy="80" r="2.5" fill="#2B3A55" stroke="none"/>
      <path d="M92 90 C96 99 108 99 112 90 C108 95 96 95 92 90 Z" fill="#2B3A55" stroke="none"/>
      <path d="M124 53 C129 51 134 54 134 59 C130 62 125 61 123 57 Z" fill="#FF6B5E" stroke-width="1.6"/>
      <path d="M72 116 C63 109 59 100 61 91" fill="none" stroke-width="3"/>
      <circle cx="60" cy="89" r="6" fill="#FBF2E5" stroke-width="2.4"/>
      <path d="M128 118 C141 115 147 107 151 96" fill="none" stroke-width="3"/>
      <circle cx="153" cy="92" r="6" fill="#FBF2E5" stroke-width="2.4"/>
      <path d="M89 105 L101 117 L119 105 L124 121 L115 130 L86 130 L78 121 Z" fill="#5ECBB4" stroke-width="2.4"/>
      <path d="M88 106 C95 111 110 112 119 106 L125 132 C112 140 93 139 80 132 Z" fill="#FFFDF7" stroke-width="2.7"/>
      <path d="M96 114 L103 118 L96 122 Z M110 114 L103 118 L110 122 Z" fill="#FF6B5E" stroke-width="2"/>
      <path d="M82 126 L124 126 L119 151 C109 157 93 156 84 150 Z" fill="#5ECBB4" stroke-width="2.8"/>
      <path d="M93 128 L91 151 M103 128 L102 154 M113 128 L115 151" fill="none" stroke-width="1.6"/>
      <path d="M91 152 C90 153 89 154 88 156" fill="none" stroke-width="3"/>
      <path d="M111 152 C112 153 113 154 114 156" fill="none" stroke-width="3"/>
      <path d="M80 156 L96 156 L95 166 Q87 170 79 165 Z" fill="#5ECBB4" stroke-width="2.3"/>
      <path d="M106 156 L122 156 L123 165 Q115 170 107 166 Z" fill="#5ECBB4" stroke-width="2.3"/>
      <path d="M83 159 L92 162 M83 162 L92 158 M110 162 L119 159 M110 158 L119 162" fill="none" stroke-width="1.4"/>
    </g>
  </g>
</svg>

Open in Playground

tips & gotchas

Mistakes we actually made

Keep every outline navy so the scrapbook card reads as one hand-inked doodle.

Make the head nearly half the figure height before adding small body details; that is what sells the chibi scale.

Use a plain tiara line and avoid symbols, gems, logos, or other protected marks.

Group the plant leaves separately so their transform origin can sit right at the pot rim.

Offset opacity-flash loops with negative delays so one bolt can rest while the other one pops.

make it yours

Remix it

Add more sparkle dotseasy
Place two extra sunshine circles near the torn-paper edge and keep them unanimated for a tidy frame.
Swap the flower coloreasy
Change the small bloom to sunshine or white while keeping the tan pot and mint leaves intact.
Make a stormier cardmedium
Add a second torn-paper layer behind the figure and stagger another negative-delay bolt flash.

challenge extension

Add a tiny handwritten-style thunder trail behind the raised fist using only short navy strokes and one sunshine accent.

Tape it to our fridge

keep sketching

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