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

Sailor Mars

A chibi fire guardian strikes a confident pose on a scrapbook card, with flame streaks and a tiny shrine gate behind her. This fan-art doodle keeps the shapes simple, cute, and inked in CoDoodle's navy 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 fire guardian moment, taped into a warm scrapbook card.

what you'll build

Here's the plan

You will build a chibi Sailor Mars fan-art doodle with a torn-paper frame, shrine backdrop, fox statue, flame streaks, and a confident point pose. The final pass adds small CSS loops for flickering fire, twinkling sparkles, and barely swaying hair tips.

You’ll learn

  • How to frame an SVG scene with a torn-paper card and washi tape
  • How to imply a shrine setting with a soft coral silhouette
  • How to block chibi proportions with one big head and simple limbs
  • How to add readable sailor collar, bow, skirt, and face details
  • How to keep SVG motion gentle with reduced-motion support
Skill level
Advanced
Time
~40 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~154

the steps

Build it, one change at a time

  1. Tape down the scene

    Start with the cream card, torn inner paper, and one angled strip of mint washi tape. Then add the soft shrine silhouette, tiny fox statue, flame streaks, and sparkles so the character has a magical stage before she appears.

    <svg class="mr" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cream scrapbook page with torn paper, mint washi tape, a shrine silhouette, fox statue, flames, and sparkles">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="mr-paper" transform="rotate(-2 100 100)">
      <path d="M27 33 L54 29 L83 32 L111 28 L145 31 L172 35 L169 67 L173 97 L168 128 L171 165 L141 169 L108 166 L80 171 L50 167 L28 162 L31 129 L26 97 L30 65 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M40 48 L50 46" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M149 49 L160 52" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M43 153 L55 156" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M146 154 L158 151" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-tape" transform="rotate(-8 80 31)">
      <rect x="52" y="21" width="58" height="17" rx="3" fill="#5ECBB4" opacity="0.9" stroke="none"/>
      <path d="M60 25 H103" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M56 31 H107" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M66 36 H98" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-scene" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g class="mr-shrine" opacity="0.35" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2">
        <path d="M45 83 H88 L82 74 H51 Z"/>
        <rect x="53" y="84" width="8" height="29" rx="2"/>
        <rect x="74" y="84" width="8" height="29" rx="2"/>
        <path d="M42 95 H91" fill="none"/>
        <path d="M55 70 H79 L84 76 H50 Z"/>
        <path d="M57 88 H78" fill="none"/>
        <path d="M60 102 H75" fill="none"/>
      </g>
      <g class="mr-fox" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8">
        <path d="M137 119 C134 111 137 101 145 98 C153 101 156 111 153 119 Z"/>
        <path d="M138 101 L141 92 L145 100"/>
        <path d="M148 100 L153 92 L153 104"/>
        <path d="M137 113 C132 111 131 104 137 102"/>
        <circle cx="142" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <circle cx="149" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <path d="M144 109 L146 112 L142 112" fill="#2B3A55" stroke="none"/>
        <path d="M141 116 Q145 118 150 116" fill="none" stroke-width="1.4"/>
        <rect x="132" y="120" width="27" height="8" rx="3" fill="#E4B06A"/>
      </g>
      <g class="mr-flames" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
        <path class="mr-flame mr-flame-a" d="M158 93 C151 80 160 68 156 55 C169 67 174 79 166 94 Z" fill="#FF6B5E"/>
        <path d="M161 88 C157 80 162 73 160 66 C167 75 168 82 164 89 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path class="mr-flame mr-flame-b" d="M37 119 C31 107 38 98 35 87 C47 97 51 108 44 120 Z" fill="#FF6B5E"/>
        <path d="M39 114 C36 108 40 102 39 97 C45 103 46 110 42 116 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path d="M151 99 C157 101 165 101 172 98" fill="none" stroke-width="1.5"/>
        <path d="M30 124 C36 126 44 126 50 123" fill="none" stroke-width="1.5"/>
      </g>
      <path class="mr-sparkle mr-sparkle-a" d="M122 57 L125 64 L122 71 L119 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.5"/>
      <path class="mr-sparkle mr-sparkle-b" d="M67 132 L70 138 L67 144 L64 138 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mr-sparkle mr-sparkle-c" d="M154 137 L157 143 L154 149 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
  </svg>

    A scrapbook shrine stage with flames.

  2. Block the chibi pose

    Layer the long navy hair first so it sits behind the head and outfit. Add the large round head, compact body, coral skirt, pointing arm, simple legs, and small heels as flat shapes before adding any facial details.

    <svg class="mr" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cream scrapbook card scene with a blocked-in chibi fire guardian silhouette">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="mr-paper" transform="rotate(-2 100 100)">
      <path d="M27 33 L54 29 L83 32 L111 28 L145 31 L172 35 L169 67 L173 97 L168 128 L171 165 L141 169 L108 166 L80 171 L50 167 L28 162 L31 129 L26 97 L30 65 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M40 48 L50 46" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M149 49 L160 52" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M43 153 L55 156" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M146 154 L158 151" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-tape" transform="rotate(-8 80 31)">
      <rect x="52" y="21" width="58" height="17" rx="3" fill="#5ECBB4" opacity="0.9" stroke="none"/>
      <path d="M60 25 H103" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M56 31 H107" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M66 36 H98" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-scene" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g class="mr-shrine" opacity="0.35" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2">
        <path d="M45 83 H88 L82 74 H51 Z"/>
        <rect x="53" y="84" width="8" height="29" rx="2"/>
        <rect x="74" y="84" width="8" height="29" rx="2"/>
        <path d="M42 95 H91" fill="none"/>
        <path d="M55 70 H79 L84 76 H50 Z"/>
        <path d="M57 88 H78" fill="none"/>
        <path d="M60 102 H75" fill="none"/>
      </g>
      <g class="mr-fox" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8">
        <path d="M137 119 C134 111 137 101 145 98 C153 101 156 111 153 119 Z"/>
        <path d="M138 101 L141 92 L145 100"/>
        <path d="M148 100 L153 92 L153 104"/>
        <path d="M137 113 C132 111 131 104 137 102"/>
        <circle cx="142" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <circle cx="149" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <path d="M144 109 L146 112 L142 112" fill="#2B3A55" stroke="none"/>
        <path d="M141 116 Q145 118 150 116" fill="none" stroke-width="1.4"/>
        <rect x="132" y="120" width="27" height="8" rx="3" fill="#E4B06A"/>
      </g>
      <g class="mr-flames" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
        <path class="mr-flame mr-flame-a" d="M158 93 C151 80 160 68 156 55 C169 67 174 79 166 94 Z" fill="#FF6B5E"/>
        <path d="M161 88 C157 80 162 73 160 66 C167 75 168 82 164 89 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path class="mr-flame mr-flame-b" d="M37 119 C31 107 38 98 35 87 C47 97 51 108 44 120 Z" fill="#FF6B5E"/>
        <path d="M39 114 C36 108 40 102 39 97 C45 103 46 110 42 116 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path d="M151 99 C157 101 165 101 172 98" fill="none" stroke-width="1.5"/>
        <path d="M30 124 C36 126 44 126 50 123" fill="none" stroke-width="1.5"/>
      </g>
      <path class="mr-sparkle mr-sparkle-a" d="M122 57 L125 64 L122 71 L119 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.5"/>
      <path class="mr-sparkle mr-sparkle-b" d="M67 132 L70 138 L67 144 L64 138 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mr-sparkle mr-sparkle-c" d="M154 137 L157 143 L154 149 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
    <g class="mr-figure" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="mr-hair" d="M91 66 C70 72 64 96 69 124 C72 143 64 154 54 166 C73 164 82 154 84 139 C87 158 100 166 114 169 C108 153 116 142 119 127 C124 101 114 72 91 66 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="2.6"/>
      <circle cx="96" cy="76" r="24" fill="#FBF2E5" stroke="#2B3A55" stroke-width="2.8"/>
      <path d="M86 100 L107 100 L112 126 L80 126 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M79 127 L114 127 L107 145 L85 145 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M84 108 C70 111 62 105 56 96" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M109 106 C124 99 130 89 137 78" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M88 145 L84 163" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M104 145 L110 162" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M79 164 Q86 169 92 164" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
      <path d="M107 163 Q115 167 119 160" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
    </g>
  </svg>

    The chibi silhouette locks in the pose.

  3. Add the sailor details

    Now place the tiny dot eyes, confident smile, navy tiara line, coral collar, bow, and skirt pleats. A few separate hair-tip paths make the long navy hair feel flowing while staying simple enough for a small SVG.

    <svg class="mr" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A complete chibi Sailor Mars fan art doodle on a scrapbook card with flames, a shrine gate, sparkles, and a tiny heart">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="mr-paper" transform="rotate(-2 100 100)">
      <path d="M27 33 L54 29 L83 32 L111 28 L145 31 L172 35 L169 67 L173 97 L168 128 L171 165 L141 169 L108 166 L80 171 L50 167 L28 162 L31 129 L26 97 L30 65 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M40 48 L50 46" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M149 49 L160 52" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M43 153 L55 156" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M146 154 L158 151" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-tape" transform="rotate(-8 80 31)">
      <rect x="52" y="21" width="58" height="17" rx="3" fill="#5ECBB4" opacity="0.9" stroke="none"/>
      <path d="M60 25 H103" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M56 31 H107" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M66 36 H98" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-scene" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g class="mr-shrine" opacity="0.35" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2">
        <path d="M45 83 H88 L82 74 H51 Z"/>
        <rect x="53" y="84" width="8" height="29" rx="2"/>
        <rect x="74" y="84" width="8" height="29" rx="2"/>
        <path d="M42 95 H91" fill="none"/>
        <path d="M55 70 H79 L84 76 H50 Z"/>
        <path d="M57 88 H78" fill="none"/>
        <path d="M60 102 H75" fill="none"/>
      </g>
      <g class="mr-fox" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8">
        <path d="M137 119 C134 111 137 101 145 98 C153 101 156 111 153 119 Z"/>
        <path d="M138 101 L141 92 L145 100"/>
        <path d="M148 100 L153 92 L153 104"/>
        <path d="M137 113 C132 111 131 104 137 102"/>
        <circle cx="142" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <circle cx="149" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <path d="M144 109 L146 112 L142 112" fill="#2B3A55" stroke="none"/>
        <path d="M141 116 Q145 118 150 116" fill="none" stroke-width="1.4"/>
        <rect x="132" y="120" width="27" height="8" rx="3" fill="#E4B06A"/>
      </g>
      <g class="mr-flames" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
        <path class="mr-flame mr-flame-a" d="M158 93 C151 80 160 68 156 55 C169 67 174 79 166 94 Z" fill="#FF6B5E"/>
        <path d="M161 88 C157 80 162 73 160 66 C167 75 168 82 164 89 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path class="mr-flame mr-flame-b" d="M37 119 C31 107 38 98 35 87 C47 97 51 108 44 120 Z" fill="#FF6B5E"/>
        <path d="M39 114 C36 108 40 102 39 97 C45 103 46 110 42 116 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path d="M151 99 C157 101 165 101 172 98" fill="none" stroke-width="1.5"/>
        <path d="M30 124 C36 126 44 126 50 123" fill="none" stroke-width="1.5"/>
      </g>
      <path class="mr-sparkle mr-sparkle-a" d="M122 57 L125 64 L122 71 L119 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.5"/>
      <path class="mr-sparkle mr-sparkle-b" d="M67 132 L70 138 L67 144 L64 138 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mr-sparkle mr-sparkle-c" d="M154 137 L157 143 L154 149 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
    <g class="mr-figure" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="mr-hair" d="M91 66 C70 72 64 96 69 124 C72 143 64 154 54 166 C73 164 82 154 84 139 C87 158 100 166 114 169 C108 153 116 142 119 127 C124 101 114 72 91 66 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="2.6"/>
      <path class="mr-hair-tip mr-hair-tip-a" d="M69 122 C65 141 59 153 48 164" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
      <path class="mr-hair-tip mr-hair-tip-b" d="M87 132 C89 149 99 160 112 166" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
      <path class="mr-hair-tip mr-hair-tip-c" d="M116 120 C119 139 113 151 119 163" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
      <path d="M78 70 C83 57 102 54 113 66" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <path d="M82 62 C88 69 94 69 99 61" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M99 61 C103 70 109 69 114 64" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
      <circle cx="96" cy="76" r="24" fill="#FBF2E5" stroke="#2B3A55" stroke-width="2.8"/>
      <path d="M84 67 C90 64 101 64 108 67" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <circle cx="88" cy="77" r="1.8" fill="#2B3A55" stroke="none"/>
      <circle cx="103" cy="77" r="1.8" fill="#2B3A55" stroke="none"/>
      <path d="M91 86 Q96 89 101 85" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <path d="M82 99 L110 99 L103 111 L91 111 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.1"/>
      <path d="M86 100 L107 100 L112 126 L80 126 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M88 104 L100 113 L109 103" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
      <path d="M93 105 L93 110" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M103 105 L103 110" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M96 110 C91 107 88 110 91 115 C94 118 99 118 101 113 C99 109 96 110 96 110 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.6"/>
      <path d="M79 127 L114 127 L107 145 L85 145 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M88 128 L86 143" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M96 128 L96 145" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M105 128 L108 142" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M84 108 C70 111 62 105 56 96" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <circle cx="56" cy="96" r="2.4" fill="#FBF2E5" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M109 106 C124 99 130 89 137 78" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M135 77 L141 74" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <path d="M137 78 L143 82" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <path d="M88 145 L84 163" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M104 145 L110 162" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M82 151 L89 151" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M105 151 L112 149" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M79 164 Q86 169 92 164" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
      <path d="M107 163 Q115 167 119 160" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
    </g>
    <path class="mr-heart" d="M133 64 C131 60 126 61 126 65 C126 70 133 73 133 73 C133 73 140 70 140 65 C140 61 135 60 133 64 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5" stroke-linejoin="round"/>
  </svg>

    The completed static fan-art doodle.

  4. Animate the fire and hair

    Set transform origins outside the media query so the animated pieces already know where to pivot and scale. Inside the reduced-motion-safe media block, flicker the two flame streaks, pulse the sparkles with negative delays, and sway the separate hair tips just a little.

    .mr .mr-flame {
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .mr .mr-sparkle {
    transform-box: fill-box;
    transform-origin: center;
  }
  .mr .mr-hair-tip {
    transform-box: fill-box;
    transform-origin: center top;
  }

  @media (prefers-reduced-motion: no-preference) {
    .mr .mr-flame-a {
      animation: mr-flame-flicker 0.62s ease-in-out infinite alternate;
      animation-delay: -0.32s;
    }
    .mr .mr-flame-b {
      animation: mr-flame-flicker 0.54s ease-in-out infinite alternate;
      animation-delay: -0.18s;
    }
    .mr .mr-sparkle {
      animation: mr-sparkle-twinkle 1.8s ease-in-out infinite;
      animation-delay: -0.45s;
    }
    .mr .mr-sparkle-b {
      animation-delay: -0.9s;
    }
    .mr .mr-sparkle-c {
      animation-delay: -1.25s;
    }
    .mr .mr-hair-tip {
      animation: mr-hair-sway 3.6s ease-in-out infinite;
    }
    .mr .mr-hair-tip-b {
      animation-delay: -1.1s;
    }
    .mr .mr-hair-tip-c {
      animation-delay: -2.2s;
    }
  }

  @keyframes mr-flame-flicker {
    0% {
      transform: scaleY(0.86) rotate(-2deg);
    }
    100% {
      transform: scaleY(1.08) rotate(2deg);
    }
  }
  @keyframes mr-sparkle-twinkle {
    0%, 100% {
      opacity: 0;
      transform: scale(0.75);
    }
    50% {
      opacity: 1;
      transform: scale(1.12);
    }
  }
  @keyframes mr-hair-sway {
    0%, 100% {
      transform: rotate(-1.5deg);
    }
    50% {
      transform: rotate(1.5deg);
    }
  }

    Gentle loops add warmth without changing the drawing.

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="mr" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A complete chibi Sailor Mars fan art doodle on a scrapbook card with flames, a shrine gate, sparkles, and a tiny heart">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="mr-paper" transform="rotate(-2 100 100)">
      <path d="M27 33 L54 29 L83 32 L111 28 L145 31 L172 35 L169 67 L173 97 L168 128 L171 165 L141 169 L108 166 L80 171 L50 167 L28 162 L31 129 L26 97 L30 65 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M40 48 L50 46" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M149 49 L160 52" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M43 153 L55 156" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M146 154 L158 151" fill="none" stroke="#2B3A55" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-tape" transform="rotate(-8 80 31)">
      <rect x="52" y="21" width="58" height="17" rx="3" fill="#5ECBB4" opacity="0.9" stroke="none"/>
      <path d="M60 25 H103" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M56 31 H107" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M66 36 H98" fill="none" stroke="#FFFDF7" stroke-width="1.4" stroke-linecap="round"/>
    </g>
    <g class="mr-scene" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <g class="mr-shrine" opacity="0.35" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2">
        <path d="M45 83 H88 L82 74 H51 Z"/>
        <rect x="53" y="84" width="8" height="29" rx="2"/>
        <rect x="74" y="84" width="8" height="29" rx="2"/>
        <path d="M42 95 H91" fill="none"/>
        <path d="M55 70 H79 L84 76 H50 Z"/>
        <path d="M57 88 H78" fill="none"/>
        <path d="M60 102 H75" fill="none"/>
      </g>
      <g class="mr-fox" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.8">
        <path d="M137 119 C134 111 137 101 145 98 C153 101 156 111 153 119 Z"/>
        <path d="M138 101 L141 92 L145 100"/>
        <path d="M148 100 L153 92 L153 104"/>
        <path d="M137 113 C132 111 131 104 137 102"/>
        <circle cx="142" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <circle cx="149" cy="107" r="1" fill="#2B3A55" stroke="none"/>
        <path d="M144 109 L146 112 L142 112" fill="#2B3A55" stroke="none"/>
        <path d="M141 116 Q145 118 150 116" fill="none" stroke-width="1.4"/>
        <rect x="132" y="120" width="27" height="8" rx="3" fill="#E4B06A"/>
      </g>
      <g class="mr-flames" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round">
        <path class="mr-flame mr-flame-a" d="M158 93 C151 80 160 68 156 55 C169 67 174 79 166 94 Z" fill="#FF6B5E"/>
        <path d="M161 88 C157 80 162 73 160 66 C167 75 168 82 164 89 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path class="mr-flame mr-flame-b" d="M37 119 C31 107 38 98 35 87 C47 97 51 108 44 120 Z" fill="#FF6B5E"/>
        <path d="M39 114 C36 108 40 102 39 97 C45 103 46 110 42 116 Z" fill="#FFD84D" stroke-width="1.4"/>
        <path d="M151 99 C157 101 165 101 172 98" fill="none" stroke-width="1.5"/>
        <path d="M30 124 C36 126 44 126 50 123" fill="none" stroke-width="1.5"/>
      </g>
      <path class="mr-sparkle mr-sparkle-a" d="M122 57 L125 64 L122 71 L119 64 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.5"/>
      <path class="mr-sparkle mr-sparkle-b" d="M67 132 L70 138 L67 144 L64 138 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="mr-sparkle mr-sparkle-c" d="M154 137 L157 143 L154 149 L151 143 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
    </g>
    <g class="mr-figure" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="mr-hair" d="M91 66 C70 72 64 96 69 124 C72 143 64 154 54 166 C73 164 82 154 84 139 C87 158 100 166 114 169 C108 153 116 142 119 127 C124 101 114 72 91 66 Z" fill="#2B3A55" stroke="#2B3A55" stroke-width="2.6"/>
      <path class="mr-hair-tip mr-hair-tip-a" d="M69 122 C65 141 59 153 48 164" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
      <path class="mr-hair-tip mr-hair-tip-b" d="M87 132 C89 149 99 160 112 166" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
      <path class="mr-hair-tip mr-hair-tip-c" d="M116 120 C119 139 113 151 119 163" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
      <path d="M78 70 C83 57 102 54 113 66" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <path d="M82 62 C88 69 94 69 99 61" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M99 61 C103 70 109 69 114 64" fill="none" stroke="#2B3A55" stroke-width="1.8"/>
      <circle cx="96" cy="76" r="24" fill="#FBF2E5" stroke="#2B3A55" stroke-width="2.8"/>
      <path d="M84 67 C90 64 101 64 108 67" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <circle cx="88" cy="77" r="1.8" fill="#2B3A55" stroke="none"/>
      <circle cx="103" cy="77" r="1.8" fill="#2B3A55" stroke="none"/>
      <path d="M91 86 Q96 89 101 85" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <path d="M82 99 L110 99 L103 111 L91 111 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.1"/>
      <path d="M86 100 L107 100 L112 126 L80 126 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M88 104 L100 113 L109 103" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
      <path d="M93 105 L93 110" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M103 105 L103 110" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M96 110 C91 107 88 110 91 115 C94 118 99 118 101 113 C99 109 96 110 96 110 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.6"/>
      <path d="M79 127 L114 127 L107 145 L85 145 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2.4"/>
      <path d="M88 128 L86 143" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M96 128 L96 145" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M105 128 L108 142" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M84 108 C70 111 62 105 56 96" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <circle cx="56" cy="96" r="2.4" fill="#FBF2E5" stroke="#2B3A55" stroke-width="1.8"/>
      <path d="M109 106 C124 99 130 89 137 78" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M135 77 L141 74" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <path d="M137 78 L143 82" fill="none" stroke="#2B3A55" stroke-width="2"/>
      <path d="M88 145 L84 163" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M104 145 L110 162" fill="none" stroke="#2B3A55" stroke-width="3"/>
      <path d="M82 151 L89 151" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M105 151 L112 149" fill="none" stroke="#2B3A55" stroke-width="1.4"/>
      <path d="M79 164 Q86 169 92 164" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
      <path d="M107 163 Q115 167 119 160" fill="#FF6B5E" stroke="#2B3A55" stroke-width="2"/>
    </g>
    <path class="mr-heart" d="M133 64 C131 60 126 61 126 65 C126 70 133 73 133 73 C133 73 140 70 140 65 C140 61 135 60 133 64 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.5" stroke-linejoin="round"/>
  </svg>
Open in Playground

tips & gotchas

Mistakes we actually made

Keep the hair one solid navy mass first, then add only a few wavy tip lines for flow.

Use opacity on the coral shrine shapes so they read as background, not competing characters.

Make the head large enough that dot eyes and a tiny smile stay readable at thumbnail size.

Put transform-origin rules before the media query so motion settings are easy to audit.

Use negative animation delays for twinkles so looping elements never all start from invisible together.

make it yours

Remix it

  • Swap the washi tapeeasy

    Change the tape to sky blue and keep the white stripe lines for the same scrapbook feel.

  • Move the hearteasy

    Place the coral heart near the pointing hand so it feels like part of the pose.

  • Add ember dotsmedium

    Add tiny sunshine circles near the flame streaks and animate them with the sparkle timing.

challenge extension

Add a second small shrine prop behind the fox while keeping every new outline in navy and every new class prefixed with mr-.

Tape it to our fridge

keep sketching

More tutorials to try

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