Butter Yellow

A warm-paper fashion flat-lay for butter yellow, the SS26 color of the season: a neatly spread cardigan with ribbed cuffs and tiny buttons, a matching bucket hat, a small tote, and a dangling SS26 swatch tag. The final doodle keeps the shapes sticker-simple but editorial, with chunky navy outlines, soft butter shading, coral stitching, and just enough animation to feel like the tag was flicked by a stylist leaving the frame.

You’ll learn

• Building a flat-lay SVG in clear layers: paper, shadow, garment silhouette, then accessories
• Using a tight butter-yellow palette with cream highlights and navy outlines so one color stays the star
• Adding fashion details with small repeated strokes: ribbing, stitches, buttons, and a color chip tag
• Animating a hanging tag from its real attachment point while keeping the rest of the motion soft and optional

1. 1

   Lay down the paper

   Start with the warm paper stage, a soft navy oval where the outfit will sit, and a few tiny editorial props around the edges. These little sparkles and flecks keep the flat-lay from feeling empty before the clothes arrive.

   index.html

   copy code

   <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
   <ellipse class="by-shadow" cx="101" cy="154" rx="64" ry="13" fill="#2B3A55" opacity="0.14" stroke="none"/>
   <path class="by-spark by-spark1" d="M30 50 L34 58 L30 66 L26 58 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
   <path class="by-spark by-spark2" d="M168 55 L172 62 L168 69 L164 62 Z" fill="#FF8FA3" stroke="none"/>
   <path class="by-spark by-spark3" d="M42 151 L45 157 L42 163 L39 157 Z" fill="#F6E0A4" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
   <path class="by-fleck by-fleck1" d="M34 132 l9 -4" fill="none" stroke="#FF6B5E" stroke-width="3" stroke-linecap="round"/>
   <path class="by-fleck by-fleck2" d="M157 35 l7 5" fill="none" stroke="#2B3A55" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
   <circle class="by-spark by-dot1" cx="151" cy="151" r="3" fill="#FFD84D" stroke="none"/>
   <circle class="by-spark by-dot2" cx="58" cy="36" r="2.6" fill="#FF6B5E" stroke="none"/>
   

   paper warm, shadow soft, color forecast incoming.

2. 2

   Block the cardigan

   Draw the cardigan as three big butter-yellow shapes: two sleeves and one body. The chunky navy outline does most of the work, so keep the silhouette clear before adding knit texture.

   index.html

   copy code

   <g class="by-cardigan" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
     <path class="by-sleeve by-left-sleeve" d="M76 69 C61 76 49 91 38 114 C35 121 40 127 49 125 L72 111 L80 86 Z" fill="#F6E0A4" stroke-width="4"/>
     <path class="by-sleeve by-right-sleeve" d="M124 69 C139 76 151 91 162 114 C165 121 160 127 151 125 L128 111 L120 86 Z" fill="#F6E0A4" stroke-width="4"/>
     <path class="by-body" d="M75 63 C85 58 94 62 100 72 C106 62 115 58 125 63 C133 81 135 110 131 143 C113 148 87 148 69 143 C65 110 67 81 75 63 Z" fill="#F6E0A4" stroke-width="4"/>
     <path class="by-neck" d="M88 65 C92 76 96 82 100 86 C104 82 108 76 112 65 C106 61 94 61 88 65 Z" fill="#FFFDF7" stroke-width="3"/>
   </g>
   

   one soft cardigan, neatly pretending it ironed itself.

3. 3

   Style the flat-lay

   Now the outfit gets its fashion notes: ribbing, buttons, coral stitches, a matching bucket hat, and a small tote. The SS26 tag hangs from a short string, with the tag group starting exactly where the string meets the top of the card.

   index.html

   copy code

   <path class="by-sheen" d="M80 82 C91 74 108 73 119 82 C124 98 124 119 121 137" fill="none" stroke="#FAEBC3" stroke-width="7" stroke-linecap="round" opacity="0.46"/>
   <g class="by-ribbing" fill="none" stroke-linecap="round">
     <path d="M71 137 C88 142 112 142 129 137" stroke="#F2D478" stroke-width="4"/>
     <path d="M76 119 L124 119" stroke="#F2D478" stroke-width="2.6" opacity="0.75"/>
     <path d="M100 86 L100 140" stroke="#2B3A55" stroke-width="3" opacity="0.78"/>
     <path d="M48 119 L64 110" stroke="#F2D478" stroke-width="4"/>
     <path d="M152 119 L136 110" stroke="#F2D478" stroke-width="4"/>
     <path d="M78 139 l0 -9 M88 142 l0 -10 M98 143 l0 -11 M108 143 l0 -11 M118 142 l0 -10" stroke="#2B3A55" stroke-width="1.8" opacity="0.38"/>
   </g>
   <g class="by-buttons" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.2">
     <circle cx="100" cy="97" r="3.2"/>
     <circle cx="100" cy="111" r="3.2"/>
     <circle cx="100" cy="125" r="3.2"/>
   </g>
   <g class="by-stitches" fill="none" stroke="#FF6B5E" stroke-width="2.2" stroke-linecap="round" opacity="0.88">
     <path d="M83 75 l4 3"/>
     <path d="M117 75 l-4 3"/>
     <path d="M56 103 l5 2"/>
     <path d="M144 103 l-5 2"/>
     <path d="M88 134 l4 0"/>
     <path d="M108 134 l4 0"/>
   </g>
   <g class="by-hat" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
     <path d="M38 78 C41 62 54 54 68 58 C80 61 86 73 82 88 C72 94 50 91 38 78 Z" fill="#F6E0A4" stroke-width="3.5"/>
     <path d="M32 86 C43 78 72 79 88 90 C82 99 43 99 32 86 Z" fill="#F2D478" stroke-width="3.5"/>
     <path d="M48 68 C58 64 72 67 78 77" fill="none" stroke="#FAEBC3" stroke-width="3" opacity="0.8"/>
   </g>
   <g class="by-tote" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
     <path d="M143 112 C143 104 148 98 156 98 C164 98 169 104 169 112" fill="none" stroke-width="3"/>
     <path d="M137 112 H176 L172 154 C161 159 149 159 141 154 Z" fill="#F6E0A4" stroke-width="3.5"/>
     <path d="M145 123 H168" fill="none" stroke="#F2D478" stroke-width="4"/>
     <path d="M149 136 l5 4 l11 -13" fill="none" stroke="#FFFDF7" stroke-width="3"/>
     <circle cx="146" cy="116" r="2.4" fill="#FF8FA3" stroke="none"/>
     <circle cx="167" cy="116" r="2.4" fill="#FF8FA3" stroke="none"/>
   </g>
   <path class="by-tag-string" d="M103 79 C106 84 109 88 112 91" fill="none" stroke="#FF6B5E" stroke-width="2.4" stroke-linecap="round"/>
   <g class="by-tag-swing" stroke="#2B3A55" stroke-linejoin="round">
     <circle cx="112" cy="91" r="2.6" fill="#FFFDF7" stroke-width="2"/>
     <rect x="94" y="92" width="42" height="27" rx="6" fill="#FFFDF7" stroke-width="3"/>
     <rect x="101" y="100" width="12" height="11" rx="2" fill="#F6E0A4" stroke="#F2D478" stroke-width="2"/>
     <text x="117" y="109" font-family="Arial, sans-serif" font-size="8" font-weight="700" fill="#2B3A55" stroke="none">SS26</text>
   </g>
   

   the tag says ss26, the cardigan says yes chef.

4. 4

   Flick the swatch tag

   The motion is all transform and opacity: the tag swings, the cardigan sheen breathes, the sparkles twinkle, and the hat settles with one tiny bob. Everything sits inside prefers-reduced-motion, so the flat-lay stays perfectly still for people who ask for less motion.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .by .by-sheen { animation: by-sheen-pulse 3.4s ease-in-out infinite; }
     .by .by-tag-swing { transform-origin: 112px 91px; animation: by-tag-swing 3.2s ease-in-out infinite; }
     .by .by-hat { transform-box: fill-box; transform-origin: center; animation: by-hat-bob 4.2s ease-in-out infinite; }
     .by .by-spark, .by .by-fleck { transform-box: fill-box; transform-origin: center; }
     .by .by-spark1 { animation: by-twinkle 2.8s ease-in-out infinite; }
     .by .by-spark2 { animation: by-twinkle 2.8s ease-in-out 0.5s infinite; }
     .by .by-spark3 { animation: by-twinkle 3.1s ease-in-out 1s infinite; }
     .by .by-dot1 { animation: by-twinkle 3.1s ease-in-out 1.45s infinite; }
     .by .by-dot2 { animation: by-twinkle 3.1s ease-in-out 1.9s infinite; }
     .by .by-fleck1 { animation: by-fleck-glint 3.6s ease-in-out 0.4s infinite; }
   }
   @keyframes by-sheen-pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.62; } }
   @keyframes by-tag-swing { 0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(7deg); } 50% { transform: rotate(-6deg); } 76% { transform: rotate(3deg); } }
   @keyframes by-hat-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.4px); } }
   @keyframes by-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.86); } 45% { opacity: 1; transform: scale(1.12); } }
   @keyframes by-fleck-glint { 0%, 100% { opacity: 0.56; transform: scale(1); } 45% { opacity: 1; transform: scale(1.08); } }
   

   a tiny swatch tag doing its runway afterparty swing.

Skipped straight to the end? Welcome. Copy the whole thing, download it, or open it in the Playground to start remixing.

<svg class="by" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A sticker-cute butter-yellow SS26 fashion flat-lay with a cardigan, bucket hat, tote, twinkling props, and a gently swinging color-swatch tag">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#FBF2E5" stroke="none"/>
  <ellipse class="by-shadow" cx="101" cy="154" rx="64" ry="13" fill="#2B3A55" opacity="0.14" stroke="none"/>
  <path class="by-spark by-spark1" d="M30 50 L34 58 L30 66 L26 58 Z" fill="#FFD84D" stroke="#2B3A55" stroke-width="2" stroke-linejoin="round"/>
  <path class="by-spark by-spark2" d="M168 55 L172 62 L168 69 L164 62 Z" fill="#FF8FA3" stroke="none"/>
  <path class="by-spark by-spark3" d="M42 151 L45 157 L42 163 L39 157 Z" fill="#F6E0A4" stroke="#2B3A55" stroke-width="1.8" stroke-linejoin="round"/>
  <path class="by-fleck by-fleck1" d="M34 132 l9 -4" fill="none" stroke="#FF6B5E" stroke-width="3" stroke-linecap="round"/>
  <path class="by-fleck by-fleck2" d="M157 35 l7 5" fill="none" stroke="#2B3A55" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
  <circle class="by-spark by-dot1" cx="151" cy="151" r="3" fill="#FFD84D" stroke="none"/>
  <circle class="by-spark by-dot2" cx="58" cy="36" r="2.6" fill="#FF6B5E" stroke="none"/>
  <g class="by-cardigan" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
    <path class="by-sleeve by-left-sleeve" d="M76 69 C61 76 49 91 38 114 C35 121 40 127 49 125 L72 111 L80 86 Z" fill="#F6E0A4" stroke-width="4"/>
    <path class="by-sleeve by-right-sleeve" d="M124 69 C139 76 151 91 162 114 C165 121 160 127 151 125 L128 111 L120 86 Z" fill="#F6E0A4" stroke-width="4"/>
    <path class="by-body" d="M75 63 C85 58 94 62 100 72 C106 62 115 58 125 63 C133 81 135 110 131 143 C113 148 87 148 69 143 C65 110 67 81 75 63 Z" fill="#F6E0A4" stroke-width="4"/>
    <path class="by-neck" d="M88 65 C92 76 96 82 100 86 C104 82 108 76 112 65 C106 61 94 61 88 65 Z" fill="#FFFDF7" stroke-width="3"/>
    <path class="by-sheen" d="M80 82 C91 74 108 73 119 82 C124 98 124 119 121 137" fill="none" stroke="#FAEBC3" stroke-width="7" stroke-linecap="round" opacity="0.46"/>
    <g class="by-ribbing" fill="none" stroke-linecap="round">
      <path d="M71 137 C88 142 112 142 129 137" stroke="#F2D478" stroke-width="4"/>
      <path d="M76 119 L124 119" stroke="#F2D478" stroke-width="2.6" opacity="0.75"/>
      <path d="M100 86 L100 140" stroke="#2B3A55" stroke-width="3" opacity="0.78"/>
      <path d="M48 119 L64 110" stroke="#F2D478" stroke-width="4"/>
      <path d="M152 119 L136 110" stroke="#F2D478" stroke-width="4"/>
      <path d="M78 139 l0 -9 M88 142 l0 -10 M98 143 l0 -11 M108 143 l0 -11 M118 142 l0 -10" stroke="#2B3A55" stroke-width="1.8" opacity="0.38"/>
    </g>
    <g class="by-buttons" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2.2">
      <circle cx="100" cy="97" r="3.2"/>
      <circle cx="100" cy="111" r="3.2"/>
      <circle cx="100" cy="125" r="3.2"/>
    </g>
    <g class="by-stitches" fill="none" stroke="#FF6B5E" stroke-width="2.2" stroke-linecap="round" opacity="0.88">
      <path d="M83 75 l4 3"/>
      <path d="M117 75 l-4 3"/>
      <path d="M56 103 l5 2"/>
      <path d="M144 103 l-5 2"/>
      <path d="M88 134 l4 0"/>
      <path d="M108 134 l4 0"/>
    </g>
    <g class="by-hat" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path d="M38 78 C41 62 54 54 68 58 C80 61 86 73 82 88 C72 94 50 91 38 78 Z" fill="#F6E0A4" stroke-width="3.5"/>
      <path d="M32 86 C43 78 72 79 88 90 C82 99 43 99 32 86 Z" fill="#F2D478" stroke-width="3.5"/>
      <path d="M48 68 C58 64 72 67 78 77" fill="none" stroke="#FAEBC3" stroke-width="3" opacity="0.8"/>
    </g>
    <g class="by-tote" stroke="#2B3A55" stroke-linecap="round" stroke-linejoin="round">
      <path d="M143 112 C143 104 148 98 156 98 C164 98 169 104 169 112" fill="none" stroke-width="3"/>
      <path d="M137 112 H176 L172 154 C161 159 149 159 141 154 Z" fill="#F6E0A4" stroke-width="3.5"/>
      <path d="M145 123 H168" fill="none" stroke="#F2D478" stroke-width="4"/>
      <path d="M149 136 l5 4 l11 -13" fill="none" stroke="#FFFDF7" stroke-width="3"/>
      <circle cx="146" cy="116" r="2.4" fill="#FF8FA3" stroke="none"/>
      <circle cx="167" cy="116" r="2.4" fill="#FF8FA3" stroke="none"/>
    </g>
    <path class="by-tag-string" d="M103 79 C106 84 109 88 112 91" fill="none" stroke="#FF6B5E" stroke-width="2.4" stroke-linecap="round"/>
    <g class="by-tag-swing" stroke="#2B3A55" stroke-linejoin="round">
      <circle cx="112" cy="91" r="2.6" fill="#FFFDF7" stroke-width="2"/>
      <rect x="94" y="92" width="42" height="27" rx="6" fill="#FFFDF7" stroke-width="3"/>
      <rect x="101" y="100" width="12" height="11" rx="2" fill="#F6E0A4" stroke="#F2D478" stroke-width="2"/>
      <text x="117" y="109" font-family="Arial, sans-serif" font-size="8" font-weight="700" fill="#2B3A55" stroke="none">SS26</text>
    </g>
  </g>
</svg>

• Swap the seasoneasy

  Change the butter palette to powder blue, tomato red, or pistachio and update the swatch chip to match.

• Add a labeleasy

  Put tiny initials on the tote or add a small woven neck label inside the cardigan.

• Make it a setmedium

  Add folded shorts below the cardigan and repeat the ribbing language at the waistband.

• Editorial spreadmedium

  Draw a second swatch card and animate it with a delayed, smaller swing so the scene feels freshly styled.