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

Sailor Venus

A chibi love guardian winks with a V-sign on a scrapbook card while hearts and ribbons swirl around a tiny heart compact. This fan-art doodle keeps the pose sweet, simplified, and drawn in CoDoodle's navy-ink 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 bright little love guardian turns a scrapbook card into a wink and a ribbon swirl.

what you'll build

Here's the plan

You will draw a simplified chibi Sailor Venus fan-art doodle with a torn-paper card, sunshine hair, a coral bow, floating hearts, and a tiny heart compact. The final pass adds a stepped wink, floating hearts, swaying ribbon tips, and a glint that sweeps across the mirror.

You’ll learn

  • Build a scrapbook-style SVG stage with torn paper and washi tape
  • Block in a chibi magical-girl pose using simple paths and circles
  • Layer hair, bows, collar, skirt pleats, and compact details with a tiny palette
  • Create a wink by opacity-swapping two eye states in the same spot
  • Keep CSS motion accessible with animation rules inside a reduced-motion media query
Skill level
Intermediate
Time
~35 min
Tools
Just a browser
Code type
SVG + CSS
Lines
~127

the steps

Build it, one change at a time

  1. Frame the scrapbook card

    Start with the cream card, then add a slightly rotated torn-paper polygon inside it. The washi tape, ribbons, hearts, sparkles, and tiny bow make the stage feel handmade before the character appears.

    <svg class="vn" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cream scrapbook page with torn paper, sunshine washi tape, coral ribbons, hearts, sparkles, and a tiny bow">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="vn-card" transform="rotate(-2 100 100)">
      <polygon points="29,32 54,28 77,31 101,27 126,31 151,29 172,36 169,60 173,84 168,107 172,132 166,165 140,169 115,166 91,171 65,166 35,170 31,143 34,119 29,95 33,70" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="vn-washi" transform="rotate(-8 92 30)">
      <rect x="54" y="20" width="76" height="16" rx="3" fill="#FFD84D" opacity="0.9"/>
      <path d="M61 25 H124" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M58 31 H121" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M72 22 L69 35" stroke="#FF6B5E" stroke-width="1.1" stroke-linecap="round"/>
    </g>
    <g class="vn-scene" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path class="vn-ribbon vn-ribbon-a" d="M31 130 C58 104 89 104 116 125 C141 144 162 137 174 115" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-end-a" d="M171 116 C180 110 183 101 177 95" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-b" d="M169 64 C139 82 119 72 96 58 C70 42 48 52 35 73" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-ribbon vn-ribbon-end-b" d="M36 72 C28 78 27 87 34 92" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-heart vn-heart-a" d="M48 51 C46 47 40 48 40 53 C40 59 48 63 48 63 C48 63 56 59 56 53 C56 48 50 47 48 51 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-b" d="M157 46 C155 42 149 43 149 48 C149 54 157 58 157 58 C157 58 165 54 165 48 C165 43 159 42 157 46 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-c" d="M36 151 C34 147 29 148 29 152 C29 157 36 161 36 161 C36 161 43 157 43 152 C43 148 38 147 36 151 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-d" d="M167 151 C165 147 159 148 159 153 C159 159 167 163 167 163 C167 163 175 159 175 153 C175 148 169 147 167 151 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-a" d="M67 145 L70 153 L77 156 L70 159 L67 167 L64 159 L57 156 L64 153 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-b" d="M139 34 L142 41 L148 44 L142 47 L139 54 L136 47 L130 44 L136 41 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <g class="vn-tiny-bow" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4">
        <path d="M151 128 C143 122 137 124 137 131 C143 134 148 133 151 128 Z"/>
        <path d="M154 128 C162 122 168 124 168 131 C162 134 157 133 154 128 Z"/>
        <circle cx="152.5" cy="128.5" r="2.3"/>
      </g>
    </g>
  </svg>

    scrapbook stage first.

  2. Block the chibi figure

    Add the long sunshine hair behind the head so it flows past the skirt. Keep this pass simple: bow, body, skirt, limbs, V-sign hand, and heels are enough to make the silhouette readable.

    <svg class="vn" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A cream scrapbook page with a blocked-in chibi magical girl silhouette, ribbons, hearts, sparkles, and washi tape">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="vn-card" transform="rotate(-2 100 100)">
      <polygon points="29,32 54,28 77,31 101,27 126,31 151,29 172,36 169,60 173,84 168,107 172,132 166,165 140,169 115,166 91,171 65,166 35,170 31,143 34,119 29,95 33,70" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="vn-washi" transform="rotate(-8 92 30)">
      <rect x="54" y="20" width="76" height="16" rx="3" fill="#FFD84D" opacity="0.9"/>
      <path d="M61 25 H124" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M58 31 H121" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M72 22 L69 35" stroke="#FF6B5E" stroke-width="1.1" stroke-linecap="round"/>
    </g>
    <g class="vn-scene" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path class="vn-ribbon vn-ribbon-a" d="M31 130 C58 104 89 104 116 125 C141 144 162 137 174 115" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-end-a" d="M171 116 C180 110 183 101 177 95" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-b" d="M169 64 C139 82 119 72 96 58 C70 42 48 52 35 73" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-ribbon vn-ribbon-end-b" d="M36 72 C28 78 27 87 34 92" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-heart vn-heart-a" d="M48 51 C46 47 40 48 40 53 C40 59 48 63 48 63 C48 63 56 59 56 53 C56 48 50 47 48 51 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-b" d="M157 46 C155 42 149 43 149 48 C149 54 157 58 157 58 C157 58 165 54 165 48 C165 43 159 42 157 46 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-c" d="M36 151 C34 147 29 148 29 152 C29 157 36 161 36 161 C36 161 43 157 43 152 C43 148 38 147 36 151 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-d" d="M167 151 C165 147 159 148 159 153 C159 159 167 163 167 163 C167 163 175 159 175 153 C175 148 169 147 167 151 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-a" d="M67 145 L70 153 L77 156 L70 159 L67 167 L64 159 L57 156 L64 153 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-b" d="M139 34 L142 41 L148 44 L142 47 L139 54 L136 47 L130 44 L136 41 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <g class="vn-tiny-bow" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4">
        <path d="M151 128 C143 122 137 124 137 131 C143 134 148 133 151 128 Z"/>
        <path d="M154 128 C162 122 168 124 168 131 C162 134 157 133 154 128 Z"/>
        <circle cx="152.5" cy="128.5" r="2.3"/>
      </g>
    </g>
    <g class="vn-figure" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="vn-hair-back" d="M76 71 C59 88 58 123 73 151 C83 170 113 172 126 151 C145 121 140 87 123 70 C111 58 90 58 76 71 Z" fill="#FFD84D" stroke-width="2.6"/>
      <path class="vn-hair-tail-a" d="M68 92 C54 111 53 140 64 164 C70 156 75 151 80 143 C69 126 70 107 78 92 Z" fill="#FFD84D" stroke-width="2.2"/>
      <path class="vn-hair-tail-b" d="M126 89 C143 106 146 138 134 165 C128 157 123 151 116 143 C128 126 130 106 121 91 Z" fill="#FFD84D" stroke-width="2.2"/>
      <circle class="vn-head" cx="100" cy="74" r="31" fill="#FFFDF7" stroke-width="2.8"/>
      <path class="vn-bangs" d="M75 72 C86 50 114 48 126 72 C114 66 106 65 98 71 C90 65 83 66 75 72 Z" fill="#FFD84D" stroke-width="2.2"/>
      <g class="vn-hair-bow" fill="#FF6B5E" stroke-width="2">
        <path d="M88 43 C76 35 66 38 65 51 C76 55 84 52 88 43 Z"/>
        <path d="M92 43 C104 35 114 38 115 51 C104 55 96 52 92 43 Z"/>
        <circle cx="90" cy="45" r="4"/>
      </g>
      <path class="vn-body" d="M85 103 C93 98 108 98 116 103 L121 129 C109 138 91 138 79 129 Z" fill="#FFFDF7" stroke-width="2.4"/>
      <path class="vn-skirt" d="M78 127 L122 127 L116 148 L84 148 Z" fill="#E4B06A" stroke-width="2.4"/>
      <path class="vn-arm-left" d="M84 108 C73 100 67 91 68 80" fill="none" stroke-width="3"/>
      <path class="vn-hand-left" d="M66 79 C63 75 62 70 64 66 M68 79 C69 74 72 70 75 68" fill="none" stroke-width="2.2"/>
      <path class="vn-arm-right" d="M116 108 C127 113 133 123 136 134" fill="none" stroke-width="3"/>
      <path class="vn-hand-right" d="M136 134 C141 136 145 134 147 130" fill="none" stroke-width="2.4"/>
      <path class="vn-leg-left" d="M91 147 C88 157 87 166 84 174" fill="none" stroke-width="3"/>
      <path class="vn-leg-right" d="M109 147 C113 157 115 166 118 174" fill="none" stroke-width="3"/>
      <path class="vn-heel-left" d="M80 176 C86 179 91 178 94 174" fill="#E4B06A" stroke-width="2.2"/>
      <path class="vn-heel-right" d="M115 174 C121 179 127 178 130 173" fill="#E4B06A" stroke-width="2.2"/>
    </g>
  </svg>

    the pose is readable.

  3. Add the wink and compact

    Now draw the tiny facial details, keeping the right open eye and closed wink arc stacked in the same spot. The compact is just a sunshine heart with a white mirror and a small sky glint.

    <svg class="vn" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A chibi Sailor Venus fan-art doodle winking with a V-sign, ribbons, hearts, sparkles, and a tiny heart compact">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="vn-card" transform="rotate(-2 100 100)">
      <polygon points="29,32 54,28 77,31 101,27 126,31 151,29 172,36 169,60 173,84 168,107 172,132 166,165 140,169 115,166 91,171 65,166 35,170 31,143 34,119 29,95 33,70" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="vn-washi" transform="rotate(-8 92 30)">
      <rect x="54" y="20" width="76" height="16" rx="3" fill="#FFD84D" opacity="0.9"/>
      <path d="M61 25 H124" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M58 31 H121" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M72 22 L69 35" stroke="#FF6B5E" stroke-width="1.1" stroke-linecap="round"/>
    </g>
    <g class="vn-scene" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path class="vn-ribbon vn-ribbon-a" d="M31 130 C58 104 89 104 116 125 C141 144 162 137 174 115" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-end-a" d="M171 116 C180 110 183 101 177 95" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-b" d="M169 64 C139 82 119 72 96 58 C70 42 48 52 35 73" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-ribbon vn-ribbon-end-b" d="M36 72 C28 78 27 87 34 92" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-heart vn-heart-a" d="M48 51 C46 47 40 48 40 53 C40 59 48 63 48 63 C48 63 56 59 56 53 C56 48 50 47 48 51 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-b" d="M157 46 C155 42 149 43 149 48 C149 54 157 58 157 58 C157 58 165 54 165 48 C165 43 159 42 157 46 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-c" d="M36 151 C34 147 29 148 29 152 C29 157 36 161 36 161 C36 161 43 157 43 152 C43 148 38 147 36 151 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-d" d="M167 151 C165 147 159 148 159 153 C159 159 167 163 167 163 C167 163 175 159 175 153 C175 148 169 147 167 151 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-a" d="M67 145 L70 153 L77 156 L70 159 L67 167 L64 159 L57 156 L64 153 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-b" d="M139 34 L142 41 L148 44 L142 47 L139 54 L136 47 L130 44 L136 41 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <g class="vn-tiny-bow" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4">
        <path d="M151 128 C143 122 137 124 137 131 C143 134 148 133 151 128 Z"/>
        <path d="M154 128 C162 122 168 124 168 131 C162 134 157 133 154 128 Z"/>
        <circle cx="152.5" cy="128.5" r="2.3"/>
      </g>
    </g>
    <g class="vn-figure" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="vn-hair-back" d="M76 71 C59 88 58 123 73 151 C83 170 113 172 126 151 C145 121 140 87 123 70 C111 58 90 58 76 71 Z" fill="#FFD84D" stroke-width="2.6"/>
      <path class="vn-hair-tail-a" d="M68 92 C54 111 53 140 64 164 C70 156 75 151 80 143 C69 126 70 107 78 92 Z" fill="#FFD84D" stroke-width="2.2"/>
      <path class="vn-hair-tail-b" d="M126 89 C143 106 146 138 134 165 C128 157 123 151 116 143 C128 126 130 106 121 91 Z" fill="#FFD84D" stroke-width="2.2"/>
      <circle class="vn-head" cx="100" cy="74" r="31" fill="#FFFDF7" stroke-width="2.8"/>
      <path class="vn-bangs" d="M75 72 C86 50 114 48 126 72 C114 66 106 65 98 71 C90 65 83 66 75 72 Z" fill="#FFD84D" stroke-width="2.2"/>
      <g class="vn-hair-bow" fill="#FF6B5E" stroke-width="2">
        <path d="M88 43 C76 35 66 38 65 51 C76 55 84 52 88 43 Z"/>
        <path d="M92 43 C104 35 114 38 115 51 C104 55 96 52 92 43 Z"/>
        <circle cx="90" cy="45" r="4"/>
      </g>
      <path class="vn-tiara" d="M88 67 Q100 63 112 67" fill="none" stroke-width="1.6"/>
      <ellipse class="vn-eye-left" cx="90" cy="77" rx="2.2" ry="2.8" fill="#2B3A55" stroke="none"/>
      <ellipse class="vn-wink-open" cx="110" cy="77" rx="2.2" ry="2.8" fill="#2B3A55" stroke="none"/>
      <path class="vn-wink-closed" d="M105 77 Q110 81 115 77" fill="none" stroke="#2B3A55" stroke-width="1.9" opacity="0"/>
      <path class="vn-smile" d="M97 88 Q100 92 104 88 Q101 96 97 88 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.2"/>
      <path class="vn-body" d="M85 103 C93 98 108 98 116 103 L121 129 C109 138 91 138 79 129 Z" fill="#FFFDF7" stroke-width="2.4"/>
      <path class="vn-collar" d="M85 103 L100 115 L116 103 L112 121 L88 121 Z" fill="#E4B06A" stroke-width="2"/>
      <g class="vn-chest-bow" fill="#FF6B5E" stroke-width="1.7">
        <path d="M98 117 C91 112 86 114 86 121 C91 124 96 122 98 117 Z"/>
        <path d="M102 117 C109 112 114 114 114 121 C109 124 104 122 102 117 Z"/>
        <circle cx="100" cy="118" r="2.2"/>
      </g>
      <path class="vn-skirt" d="M78 127 L122 127 L116 148 L84 148 Z" fill="#E4B06A" stroke-width="2.4"/>
      <path class="vn-pleats" d="M88 129 L85 147 M100 128 L100 148 M112 129 L116 147" fill="none" stroke-width="1.4"/>
      <path class="vn-arm-left" d="M84 108 C73 100 67 91 68 80" fill="none" stroke-width="3"/>
      <path class="vn-hand-left" d="M66 79 C63 75 62 70 64 66 M68 79 C69 74 72 70 75 68" fill="none" stroke-width="2.2"/>
      <path class="vn-arm-right" d="M116 108 C127 113 133 123 136 134" fill="none" stroke-width="3"/>
      <path class="vn-hand-right" d="M136 134 C141 136 145 134 147 130" fill="none" stroke-width="2.4"/>
      <path class="vn-compact" d="M144 126 C142 122 136 123 136 128 C136 134 144 138 144 138 C144 138 152 134 152 128 C152 123 146 122 144 126 Z" fill="#FFD84D" stroke-width="1.8"/>
      <circle class="vn-mirror" cx="144" cy="130" r="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.2"/>
      <path class="vn-glint" d="M142 128 L147 126" fill="none" stroke="#6FA8FF" stroke-width="1.2"/>
      <path class="vn-leg-left" d="M91 147 C88 157 87 166 84 174" fill="none" stroke-width="3"/>
      <path class="vn-leg-right" d="M109 147 C113 157 115 166 118 174" fill="none" stroke-width="3"/>
      <path class="vn-heel-left" d="M80 176 C86 179 91 178 94 174" fill="#E4B06A" stroke-width="2.2"/>
      <path class="vn-heel-right" d="M115 174 C121 179 127 178 130 173" fill="#E4B06A" stroke-width="2.2"/>
    </g>
  </svg>

    the wink is ready.

  4. Animate the charm

    Keep the transform setup outside the media query, then place every animation declaration inside the reduced-motion check. The wink uses stepped opacity, while the hearts float with negative delays so the loop already feels alive.

    .vn .vn-wink-open,
  .vn .vn-wink-closed,
  .vn .vn-heart,
  .vn .vn-ribbon-end-a,
  .vn .vn-ribbon-end-b,
  .vn .vn-glint,
  .vn .vn-star {
    transform-box: fill-box;
    transform-origin: center;
  }
  .vn .vn-ribbon-end-a {
    transform-origin: 171px 116px;
  }
  .vn .vn-ribbon-end-b {
    transform-origin: 36px 72px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .vn .vn-wink-open { animation: vn-wink-open 3s steps(1, end) infinite; }
    .vn .vn-wink-closed { animation: vn-wink-closed 3s steps(1, end) infinite; }
    .vn .vn-heart { animation: vn-heart-float 4.6s ease-in-out infinite; }
    .vn .vn-heart-a { animation-delay: -0.4s; }
    .vn .vn-heart-b { animation-delay: -1.7s; }
    .vn .vn-heart-c { animation-delay: -2.8s; }
    .vn .vn-heart-d { animation-delay: -3.5s; }
    .vn .vn-ribbon-end-a { animation: vn-ribbon-sway-a 3.6s ease-in-out infinite; }
    .vn .vn-ribbon-end-b { animation: vn-ribbon-sway-b 3.8s ease-in-out infinite; }
    .vn .vn-glint { animation: vn-glint-sweep 2.4s ease-in-out infinite; }
    .vn .vn-star { animation: vn-star-pulse 2.8s ease-in-out infinite; }
  }

  @keyframes vn-wink-open {
    0%, 79%, 94%, 100% { opacity: 1; }
    80%, 93% { opacity: 0; }
  }
  @keyframes vn-wink-closed {
    0%, 79%, 94%, 100% { opacity: 0; }
    80%, 93% { opacity: 1; }
  }
  @keyframes vn-heart-float {
    0% { opacity: 0; transform: translateY(6px) scale(0.92); }
    22% { opacity: 1; }
    72% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-12px) scale(1.05); }
  }
  @keyframes vn-ribbon-sway-a {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(3deg); }
  }
  @keyframes vn-ribbon-sway-b {
    0%, 100% { transform: rotate(2deg); }
    50% { transform: rotate(-3deg); }
  }
  @keyframes vn-glint-sweep {
    0%, 100% { opacity: 0.15; transform: translateX(-2px); }
    45% { opacity: 1; transform: translateX(2px); }
  }
  @keyframes vn-star-pulse {
    0%, 100% { opacity: 0.65; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.12); }
  }

    soft loops, no extra fuss.

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="vn" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A chibi Sailor Venus fan-art doodle winking with a V-sign, ribbons, hearts, sparkles, and a tiny heart compact">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5"/>
    <g class="vn-card" transform="rotate(-2 100 100)">
      <polygon points="29,32 54,28 77,31 101,27 126,31 151,29 172,36 169,60 173,84 168,107 172,132 166,165 140,169 115,166 91,171 65,166 35,170 31,143 34,119 29,95 33,70" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g class="vn-washi" transform="rotate(-8 92 30)">
      <rect x="54" y="20" width="76" height="16" rx="3" fill="#FFD84D" opacity="0.9"/>
      <path d="M61 25 H124" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M58 31 H121" stroke="#FF6B5E" stroke-width="1.4" stroke-linecap="round"/>
      <path d="M72 22 L69 35" stroke="#FF6B5E" stroke-width="1.1" stroke-linecap="round"/>
    </g>
    <g class="vn-scene" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path class="vn-ribbon vn-ribbon-a" d="M31 130 C58 104 89 104 116 125 C141 144 162 137 174 115" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-end-a" d="M171 116 C180 110 183 101 177 95" stroke="#FF6B5E" stroke-width="5"/>
      <path class="vn-ribbon vn-ribbon-b" d="M169 64 C139 82 119 72 96 58 C70 42 48 52 35 73" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-ribbon vn-ribbon-end-b" d="M36 72 C28 78 27 87 34 92" stroke="#FF6B5E" stroke-width="4.4"/>
      <path class="vn-heart vn-heart-a" d="M48 51 C46 47 40 48 40 53 C40 59 48 63 48 63 C48 63 56 59 56 53 C56 48 50 47 48 51 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-b" d="M157 46 C155 42 149 43 149 48 C149 54 157 58 157 58 C157 58 165 54 165 48 C165 43 159 42 157 46 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-c" d="M36 151 C34 147 29 148 29 152 C29 157 36 161 36 161 C36 161 43 157 43 152 C43 148 38 147 36 151 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-heart vn-heart-d" d="M167 151 C165 147 159 148 159 153 C159 159 167 163 167 163 C167 163 175 159 175 153 C175 148 169 147 167 151 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-a" d="M67 145 L70 153 L77 156 L70 159 L67 167 L64 159 L57 156 L64 153 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <path class="vn-star vn-star-b" d="M139 34 L142 41 L148 44 L142 47 L139 54 L136 47 L130 44 L136 41 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.4"/>
      <g class="vn-tiny-bow" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.4">
        <path d="M151 128 C143 122 137 124 137 131 C143 134 148 133 151 128 Z"/>
        <path d="M154 128 C162 122 168 124 168 131 C162 134 157 133 154 128 Z"/>
        <circle cx="152.5" cy="128.5" r="2.3"/>
      </g>
    </g>
    <g class="vn-figure" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path class="vn-hair-back" d="M76 71 C59 88 58 123 73 151 C83 170 113 172 126 151 C145 121 140 87 123 70 C111 58 90 58 76 71 Z" fill="#FFD84D" stroke-width="2.6"/>
      <path class="vn-hair-tail-a" d="M68 92 C54 111 53 140 64 164 C70 156 75 151 80 143 C69 126 70 107 78 92 Z" fill="#FFD84D" stroke-width="2.2"/>
      <path class="vn-hair-tail-b" d="M126 89 C143 106 146 138 134 165 C128 157 123 151 116 143 C128 126 130 106 121 91 Z" fill="#FFD84D" stroke-width="2.2"/>
      <circle class="vn-head" cx="100" cy="74" r="31" fill="#FFFDF7" stroke-width="2.8"/>
      <path class="vn-bangs" d="M75 72 C86 50 114 48 126 72 C114 66 106 65 98 71 C90 65 83 66 75 72 Z" fill="#FFD84D" stroke-width="2.2"/>
      <g class="vn-hair-bow" fill="#FF6B5E" stroke-width="2">
        <path d="M88 43 C76 35 66 38 65 51 C76 55 84 52 88 43 Z"/>
        <path d="M92 43 C104 35 114 38 115 51 C104 55 96 52 92 43 Z"/>
        <circle cx="90" cy="45" r="4"/>
      </g>
      <path class="vn-tiara" d="M88 67 Q100 63 112 67" fill="none" stroke-width="1.6"/>
      <ellipse class="vn-eye-left" cx="90" cy="77" rx="2.2" ry="2.8" fill="#2B3A55" stroke="none"/>
      <ellipse class="vn-wink-open" cx="110" cy="77" rx="2.2" ry="2.8" fill="#2B3A55" stroke="none"/>
      <path class="vn-wink-closed" d="M105 77 Q110 81 115 77" fill="none" stroke="#2B3A55" stroke-width="1.9" opacity="0"/>
      <path class="vn-smile" d="M97 88 Q100 92 104 88 Q101 96 97 88 Z" fill="#FF6B5E" stroke="#2B3A55" stroke-width="1.2"/>
      <path class="vn-body" d="M85 103 C93 98 108 98 116 103 L121 129 C109 138 91 138 79 129 Z" fill="#FFFDF7" stroke-width="2.4"/>
      <path class="vn-collar" d="M85 103 L100 115 L116 103 L112 121 L88 121 Z" fill="#E4B06A" stroke-width="2"/>
      <g class="vn-chest-bow" fill="#FF6B5E" stroke-width="1.7">
        <path d="M98 117 C91 112 86 114 86 121 C91 124 96 122 98 117 Z"/>
        <path d="M102 117 C109 112 114 114 114 121 C109 124 104 122 102 117 Z"/>
        <circle cx="100" cy="118" r="2.2"/>
      </g>
      <path class="vn-skirt" d="M78 127 L122 127 L116 148 L84 148 Z" fill="#E4B06A" stroke-width="2.4"/>
      <path class="vn-pleats" d="M88 129 L85 147 M100 128 L100 148 M112 129 L116 147" fill="none" stroke-width="1.4"/>
      <path class="vn-arm-left" d="M84 108 C73 100 67 91 68 80" fill="none" stroke-width="3"/>
      <path class="vn-hand-left" d="M66 79 C63 75 62 70 64 66 M68 79 C69 74 72 70 75 68" fill="none" stroke-width="2.2"/>
      <path class="vn-arm-right" d="M116 108 C127 113 133 123 136 134" fill="none" stroke-width="3"/>
      <path class="vn-hand-right" d="M136 134 C141 136 145 134 147 130" fill="none" stroke-width="2.4"/>
      <path class="vn-compact" d="M144 126 C142 122 136 123 136 128 C136 134 144 138 144 138 C144 138 152 134 152 128 C152 123 146 122 144 126 Z" fill="#FFD84D" stroke-width="1.8"/>
      <circle class="vn-mirror" cx="144" cy="130" r="4" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.2"/>
      <path class="vn-glint" d="M142 128 L147 126" fill="none" stroke="#6FA8FF" stroke-width="1.2"/>
      <path class="vn-leg-left" d="M91 147 C88 157 87 166 84 174" fill="none" stroke-width="3"/>
      <path class="vn-leg-right" d="M109 147 C113 157 115 166 118 174" fill="none" stroke-width="3"/>
      <path class="vn-heel-left" d="M80 176 C86 179 91 178 94 174" fill="#E4B06A" stroke-width="2.2"/>
      <path class="vn-heel-right" d="M115 174 C121 179 127 178 130 173" fill="#E4B06A" stroke-width="2.2"/>
    </g>
  </svg>
Open in Playground

tips & gotchas

Mistakes we actually made

Use a rotated polygon for torn paper instead of many tiny scraps; it reads handmade without clutter.

Put the hair behind the head first, then layer bangs on top so the face stays clean.

Keep the V-sign hand tiny: two short rounded strokes are enough at this scale.

Give each floating heart a negative delay so the animation starts mid-loop.

Avoid decorative symbols and logos; simple bows, hearts, ribbons, and sparkles carry the fan-art mood.

make it yours

Remix it

  • Swap the bow coloreasy

    Change the top bow and chest bow to sunshine, then make the compact coral for contrast.

  • Add more tapeeasy

    Duplicate the washi group near the lower corner and rotate it the opposite direction.

  • Make a moonlit cardmedium

    Shift the background accents toward sky and mint, then slow the hearts for a softer night-card rhythm.

challenge extension

Add one more ribbon curl behind the hair and animate only its loose end with a tiny rotate.

Tape it to our fridge

keep sketching

More tutorials to try

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