Fan Art PracticeIntermediateSVG + CSS

Toy Story 5: Lilypad

A soft kawaii-plush Lilypad fan-art study with an olive heart-leaf body, dashed stitch seam, mustard corduroy feet, tiny fabric tag, and hand-drawn stars. It feels like a watercolor toy on warm cream paper, with a gentle bob, blink, and twinkle loop.

This coded drawing is a fan-art practice example created for educational purposes only. Lilypad, Toy Story, and related characters are trademarks and copyrighted properties of Disney and Pixar. CoDoodle is not affiliated with, endorsed by, or sponsored by Disney or Pixar.

← you, in 30 minutes.

what you'll build

Here's the plan

A kawaii Lilypad plush with a heart-shaped olive body, a top notch, dashed stitch seam, mustard corduroy feet, two sewn patches, a tiny tag, a low-center smile, a hand-lettered nameplate, and softly twinkling stars.

You’ll learn

Drawing a plush heart-leaf silhouette with one smooth SVG path
Using dashed strokes to make an inset stitch seam
Layering feet behind the body so the toy feels stuffed and dimensional
Adding small character details with patches, highlights, a tag, and text
Scoping gentle SVG animations behind prefers-reduced-motion

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

the steps

Build it, one change at a time

Shape the plush leaf

Start with warm paper, a soft navy shadow, and one wide heart-leaf body path. The second path sits just inside the outline and uses dashes to read like stitching.

<svg class="ly" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A soft olive-green heart-shaped Lilypad plush body with a dashed stitch seam on warm cream paper">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
    <ellipse class="ly-shadow" cx="100" cy="160" rx="55" ry="9" fill="#2B3A55" opacity="0.1"/>
    <g class="ly-toy" stroke-linecap="round" stroke-linejoin="round">
      <path class="ly-body" d="M100 53 C86 34 56 38 41 65 C24 96 38 143 74 157 C88 163 112 163 126 157 C162 143 176 96 159 65 C144 38 114 34 100 53 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="3.2"/>
      <path class="ly-stitch" d="M100 63 C88 47 62 50 50 72 C37 100 50 136 79 148 C91 153 109 153 121 148 C150 136 163 100 150 72 C138 50 112 47 100 63 Z" fill="none" stroke="#4E6E58" stroke-width="2" stroke-dasharray="4 5"/>
    </g>
  </svg>

a squishy leaf waiting for its face.

Tuck in feet and tiny stitches

Mustard ovals sit behind the leaf so the body overlaps them like soft fabric. A tiny tag and two cross-stitch marks make the toy feel sewn by hand.

    <g class="ly-feet">
        <ellipse cx="78" cy="158" rx="13" ry="21" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6" transform="rotate(-7 78 158)"/>
        <ellipse cx="122" cy="158" rx="13" ry="21" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6" transform="rotate(7 122 158)"/>
        <path d="M75 142 L75 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
        <path d="M81 142 L81 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
        <path d="M119 142 L119 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
        <path d="M125 142 L125 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
      </g>
      <g class="ly-tag">
        <path d="M158 101 L178 104 L174 122 L156 118 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
        <path d="M167 111 C165 108 161 109 161 112 C161 116 167 119 167 119 C167 119 173 116 173 112 C173 109 169 108 167 111 Z" fill="#2B3A55" stroke="none"/>
      </g>
      <g class="ly-patch" fill="none" stroke="#4E6E58" stroke-width="2.2">
        <path d="M133 75 L145 87"/>
        <path d="M145 75 L133 87"/>
        <path d="M54 120 L66 132"/>
        <path d="M66 120 L54 132"/>
      </g>

feet, tag, and two little sewn patches.

Give Lilypad a soft smile

Keep the face low on the body with two dot eyes, tiny highlights, and one relaxed smile arc. The rounded nameplate adds the hand-drawn label from the mock scene.

    <g class="ly-face">
        <g class="ly-eye">
          <circle cx="82" cy="105" r="5.2" fill="#2B3A55" stroke="none"/>
          <circle cx="80.3" cy="103.2" r="1.6" fill="#FFFDF7" stroke="none"/>
        </g>
    <g class="ly-nameplate" stroke-linecap="round" stroke-linejoin="round">
      <rect x="61" y="173" width="78" height="18" rx="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
      <text x="100" y="186" text-anchor="middle" font-family="Comic Sans MS, cursive" font-size="12" fill="#2B3A55">Lilypad</text>
    </g>

a low smile and a hand-drawn nameplate.

Add the soft idle loop

The final layer adds stars, dots, and motion dashes around the plush. CSS then handles the bob, shadow squeeze, blink, tag wiggle, and twinkle while respecting reduced-motion settings.

.ly .ly-shadow,
  .ly .ly-toy,
  .ly .ly-eye,
  .ly .ly-star,
  .ly .ly-tag {
    transform-box: fill-box;
    transform-origin: center;
  }
  .ly .ly-paper-dots,
  .ly .ly-feet,
  .ly .ly-body,
  .ly .ly-stitch,
  .ly .ly-patch,
  .ly .ly-face,
  .ly .ly-nameplate,
  .ly .ly-deco,
  .ly .ly-dash {
    transform-origin: center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ly .ly-toy { animation: ly-bob 3.4s ease-in-out infinite; }
    .ly .ly-shadow { animation: ly-shadow 3.4s ease-in-out infinite; }
    .ly .ly-eye { animation: ly-blink 5.6s ease-in-out infinite; }
    .ly .ly-star { animation: ly-twinkle 2.8s ease-in-out infinite; }
    .ly .ly-tag { animation: ly-tag-wiggle 4s ease-in-out infinite; }
    .ly .ly-dash { animation: ly-pulse 2.6s ease-in-out infinite; }
  }
  @keyframes ly-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.015); } }
  @keyframes ly-shadow { 0%, 100% { transform: scaleX(1); opacity: 0.1; } 50% { transform: scaleX(0.84); opacity: 0.06; } }
  @keyframes ly-blink { 0%, 43%, 49%, 100% { transform: scaleY(1); } 46% { transform: scaleY(0.08); } }
  @keyframes ly-twinkle { 0%, 100% { opacity: 0.45; transform: scale(0.88); } 45% { opacity: 1; transform: scale(1.14); } }
  @keyframes ly-tag-wiggle { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } }
  @keyframes ly-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

a plush bobbing between tiny twinkles.

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="ly" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A kawaii olive-green Lilypad plush bobbing on warm cream paper with corduroy feet, stitched patches, a tiny tag, stars, sparkles, and a nameplate">
    <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
    <ellipse class="ly-shadow" cx="100" cy="160" rx="55" ry="9" fill="#2B3A55" opacity="0.1"/>
    <g class="ly-paper-dots" fill="#2B3A55" opacity="0.08" stroke="none">
      <circle cx="28" cy="28" r="1"/>
      <circle cx="52" cy="28" r="1"/>
      <circle cx="76" cy="28" r="1"/>
      <circle cx="124" cy="28" r="1"/>
      <circle cx="148" cy="28" r="1"/>
      <circle cx="172" cy="28" r="1"/>
      <circle cx="28" cy="52" r="1"/>
      <circle cx="52" cy="52" r="1"/>
      <circle cx="172" cy="52" r="1"/>
      <circle cx="28" cy="76" r="1"/>
      <circle cx="172" cy="76" r="1"/>
      <circle cx="28" cy="100" r="1"/>
      <circle cx="172" cy="100" r="1"/>
      <circle cx="28" cy="124" r="1"/>
      <circle cx="172" cy="124" r="1"/>
      <circle cx="28" cy="148" r="1"/>
      <circle cx="52" cy="148" r="1"/>
      <circle cx="148" cy="148" r="1"/>
      <circle cx="172" cy="148" r="1"/>
      <circle cx="28" cy="172" r="1"/>
      <circle cx="52" cy="172" r="1"/>
      <circle cx="148" cy="172" r="1"/>
      <circle cx="172" cy="172" r="1"/>
    </g>
    <g class="ly-toy" stroke-linecap="round" stroke-linejoin="round">
      <g class="ly-feet">
        <ellipse cx="78" cy="158" rx="13" ry="21" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6" transform="rotate(-7 78 158)"/>
        <ellipse cx="122" cy="158" rx="13" ry="21" fill="#E4B06A" stroke="#2B3A55" stroke-width="2.6" transform="rotate(7 122 158)"/>
        <path d="M75 142 L75 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
        <path d="M81 142 L81 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
        <path d="M119 142 L119 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
        <path d="M125 142 L125 173" fill="none" stroke="#2B3A55" stroke-width="1.4" opacity="0.45"/>
      </g>
      <path class="ly-body" d="M100 53 C86 34 56 38 41 65 C24 96 38 143 74 157 C88 163 112 163 126 157 C162 143 176 96 159 65 C144 38 114 34 100 53 Z" fill="#8CA86B" stroke="#2B3A55" stroke-width="3.2"/>
      <path class="ly-stitch" d="M100 63 C88 47 62 50 50 72 C37 100 50 136 79 148 C91 153 109 153 121 148 C150 136 163 100 150 72 C138 50 112 47 100 63 Z" fill="none" stroke="#4E6E58" stroke-width="2" stroke-dasharray="4 5"/>
      <g class="ly-tag">
        <path d="M158 101 L178 104 L174 122 L156 118 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
        <path d="M167 111 C165 108 161 109 161 112 C161 116 167 119 167 119 C167 119 173 116 173 112 C173 109 169 108 167 111 Z" fill="#2B3A55" stroke="none"/>
      </g>
      <g class="ly-patch" fill="none" stroke="#4E6E58" stroke-width="2.2">
        <path d="M133 75 L145 87"/>
        <path d="M145 75 L133 87"/>
        <path d="M54 120 L66 132"/>
        <path d="M66 120 L54 132"/>
      </g>
      <g class="ly-face">
        <g class="ly-eye">
          <circle cx="82" cy="105" r="5.2" fill="#2B3A55" stroke="none"/>
          <circle cx="80.3" cy="103.2" r="1.6" fill="#FFFDF7" stroke="none"/>
        </g>
        <g class="ly-eye">
          <circle cx="118" cy="105" r="5.2" fill="#2B3A55" stroke="none"/>
          <circle cx="116.3" cy="103.2" r="1.6" fill="#FFFDF7" stroke="none"/>
        </g>
        <path d="M76 121 Q100 138 124 121" fill="none" stroke="#2B3A55" stroke-width="2.6"/>
      </g>
    </g>
    <g class="ly-nameplate" stroke-linecap="round" stroke-linejoin="round">
      <rect x="61" y="173" width="78" height="18" rx="8" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
      <text x="100" y="186" text-anchor="middle" font-family="Comic Sans MS, cursive" font-size="12" fill="#2B3A55">Lilypad</text>
    </g>
    <g class="ly-deco" stroke-linecap="round" stroke-linejoin="round">
      <path class="ly-star" d="M36 49 L39 56 L46 59 L39 62 L36 69 L33 62 L26 59 L33 56 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="1.6"/>
      <path class="ly-star" d="M158 42 L161 48 L167 50 L161 53 L158 59 L155 53 L149 50 L155 48 Z" fill="none" stroke="#5ECBB4" stroke-width="2"/>
      <path class="ly-star" d="M167 138 L170 144 L176 146 L170 149 L167 155 L164 149 L158 146 L164 144 Z" fill="#5ECBB4" stroke="#2B3A55" stroke-width="1.6"/>
      <circle class="ly-star" cx="45" cy="104" r="2.2" fill="#5ECBB4" stroke="none"/>
      <circle class="ly-star" cx="150" cy="86" r="2" fill="#FFD84D" stroke="none"/>
      <path class="ly-dash" d="M28 86 L35 84" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <path class="ly-dash" d="M165 91 L172 94" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <path class="ly-dash" d="M50 151 L44 156" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
      <path class="ly-dash" d="M145 157 L151 162" fill="none" stroke="#2B3A55" stroke-width="1.6"/>
    </g>
  </svg>

Open in Playground

tips & gotchas

Mistakes we actually made

I keep the top notch sharp enough to read as a lily-pad heart, then soften the lobes with long curves so it still feels plush.

I draw the stitch seam as an inset copy of the body path; matching curves matter more than making the dash spacing perfect.

I place the feet before the body in the SVG so the olive plush overlaps them instead of looking stacked on top.

I keep face details low and tiny because a small expression makes the big leaf body feel softer and more toy-like.

I animate only groups with stable origins, then let reduced-motion users keep the same finished drawing without the loop.

make it yours

Remix it

Change the thread coloreasy
Swap the seam and patch stroke to mint, then add one matching mint dot near the nameplate.
Add more corduroy ribseasy
Duplicate the vertical foot lines and lower their opacity so the feet feel more fabric-textured.
Make a bedtime versionmedium
Dim the paper, replace stars with sleepy moons, and slow the bob animation to a calm nighttime sway.

challenge extension

Add a second stitched patch using a tiny rounded rectangle, then animate it with a barely visible squash on the same rhythm as the body bob.

Tape it to our fridge

keep sketching

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