Clayface

A lumpy clay monster with mismatched eyes rising from a cracked sculpting pot, with a sculpting loop tool, a broken mask, and scattered clay chunks. CSS makes it blob, drip, blink, wobble, and pulse.

You’ll learn

• Building an organic blob body from overlapping lumpy paths
• Adding mismatched eyes for a mischievous expression
• Drawing a cracked pot and clay drips with tapered strokes
• Scattering props like a broken mask and sculpting tool
• Animating morph, drip, blink, wobble, and pulse together

1. 1

   Set the workshop stage

   Start with a warm clay-colored square and a soft shadow where the pot will sit. The warm background makes the wet clay monster feel grounded in a sculptor's workshop.

   index.html

   copy code

   <svg class="cf" viewBox="0 0 200 200" width="200" height="200">
     <rect x="0" y="0" width="200" height="200" rx="18" fill="#E8D5C4" />
     <ellipse cx="100" cy="174" rx="52" ry="8" fill="#2B3A55" opacity="0.08" />
   </svg>
   

   a warm workshop stage with a soft shadow.

2. 2

   Sculpt the pot and clay body

   Draw a rounded pot with a crack running down one side. Add a lumpy clay body blob that spills over the rim, using two overlapping paths to suggest wet folds.

   index.html

   copy code

   <g class="cf-pot" stroke-linecap="round" stroke-linejoin="round">
     <path d="M70 154 L70 122 C70 114 78 110 86 110 L114 110 C122 110 130 114 130 122 L130 154 C130 164 120 170 100 170 C80 170 70 164 70 154 Z" fill="#C17858" stroke="#2B3A55" stroke-width="2.6" />
     <path d="M86 110 L90 138 L88 154" fill="none" stroke="#2B3A55" stroke-width="1.8" opacity="0.5" />
   </g>
   <g class="cf-body" fill="#B86B49" stroke="#2B3A55" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
     <path d="M76 118 C68 96 78 72 100 68 C122 64 138 84 132 108 C128 124 116 130 100 130 C88 130 80 124 76 118 Z" />
     <path d="M84 106 C82 92 92 84 100 84 C110 84 116 94 114 106 C112 116 104 120 100 120 C94 120 86 114 84 106 Z" opacity="0.85" />
   </g>
   

   a cracked pot overflows with lumpy wet clay.

3. 3

   Add eyes, drips, and props

   Give the clay blob two mismatched eyes with different sizes and pupils. Add a few clay drips running down the pot, a broken theater mask on the ground, a sculpting loop tool, and a few clay chunks.

   index.html

   copy code

   <!-- mismatched eyes -->
   <circle class="cf-eye" style="animation-delay: 0s" cx="94" cy="96" r="5" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.4" />
   <circle class="cf-eye" style="animation-delay: 0.6s" cx="110" cy="98" r="3.5" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.2" />
   <circle cx="96" cy="96" r="1.6" fill="#2B3A55" />
   <circle cx="111" cy="98" r="1.2" fill="#2B3A55" />
   
   <!-- drips -->
   <path class="cf-drip" style="animation-delay: 0s" d="M90 130 Q90 142 90 148" fill="none" stroke="#B86B49" stroke-width="3" stroke-linecap="round" />
   <path class="cf-drip" style="animation-delay: 1.1s" d="M112 128 Q114 140 112 150" fill="none" stroke="#B86B49" stroke-width="2.6" stroke-linecap="round" />
   
   <!-- broken mask -->
   <path d="M52 158 Q62 150 72 158 L68 166 L56 166 Z" fill="#FFFDF7" stroke="#2B3A55" stroke-width="1.6" />
   

   mismatched eyes blink while drips run down the pot.

4. 4

   Animate the clay monster

   Add CSS keyframes that blob-morph the body, lengthen the drips, blink the eyes, wobble the tool, settle the mask, and pulse the clay chunks. Use inline animation-delay so the eyes blink out of sync and the drips fall at different moments.

   style.css

   copy code

   @media (prefers-reduced-motion: no-preference) {
     .cf .cf-body { transform-box: fill-box; transform-origin: center bottom; animation: cf-morph 4s ease-in-out infinite; }
     .cf .cf-drip { animation: cf-drip 2.8s ease-in-out infinite; }
     .cf .cf-eye { animation: cf-blink 3.2s ease-in-out infinite; }
     .cf .cf-tool { transform-box: fill-box; transform-origin: top center; animation: cf-wobble 5s ease-in-out infinite; }
     .cf .cf-chunk { animation: cf-pulse 3s ease-in-out infinite; }
   }
   @keyframes cf-morph { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.03) translateY(-2px); } }
   @keyframes cf-drip { 0%, 100% { stroke-dashoffset: 0; opacity: 0.9; } 50% { stroke-dashoffset: 8; opacity: 1; } }
   @keyframes cf-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } 55% { transform: scaleY(1); } }
   

   the clay blob morphs, drips lengthen, eyes blink, and props wobble.

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

<svg class="cf" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="A lumpy clay blob monster with mismatched googly eyes sits inside a cracked sculpting pot, with a loop tool and clay chunks nearby">
  <rect x="0" y="0" width="200" height="200" rx="18" fill="#2B3A55" stroke="none"/>
  <ellipse cx="100" cy="174" rx="60" ry="8" fill="#FFFDF7" opacity="0.06"/>
  <g class="cf-blob" stroke="#FFFDF7" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
    <path d="M84 134 C74 128 72 114 76 102 C70 92 78 78 92 78 C96 62 112 58 124 72 C136 84 134 104 126 118 C120 128 110 134 100 134 C94 134 88 135 84 134 Z" fill="#C77A57"/>
    <ellipse cx="94" cy="86" rx="9" ry="9" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
    <circle class="cf-eye" style="animation-delay: 0s" cx="96" cy="86" r="3.4" fill="#2B3A55"/>
    <ellipse cx="115" cy="90" rx="6" ry="6" fill="#FFFDF7" stroke="#2B3A55" stroke-width="2"/>
    <circle class="cf-eye" style="animation-delay: 1.1s" cx="116" cy="90" r="2.1" fill="#2B3A55"/>
    <path d="M98 108 Q104 112 110 108" fill="none" stroke="#2B3A55" stroke-width="2.2" stroke-linecap="round"/>
  </g>
  <g class="cf-pot" stroke="#FFFDF7" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
    <path d="M72 168 C62 150 64 132 66 124 L68 118 L76 124 L84 120 L92 126 L100 120 L108 126 L116 122 L124 126 L132 118 L134 124 C136 132 138 150 128 168 C118 176 108 178 100 178 C92 178 82 176 72 168 Z" fill="#C77A57"/>
    <path d="M68 122 C85 130 115 130 132 122" fill="none" stroke="#FFFDF7" stroke-width="2.2" opacity="0.55"/>
    <path d="M110 124 L106 138 L114 146 L108 160 L116 172" fill="none" stroke="#2B3A55" stroke-width="2.2"/>
    <path d="M118 128 L122 136 L116 140 Z" fill="#2B3A55" opacity="0.25"/>
  </g>
  <path class="cf-drip" style="animation-delay: 0s" d="M76 124 Q76 148 76 154 A3.5 3.5 0 0 0 83 154 Q83 148 83 124 Z" fill="#C77A57" stroke="#FFFDF7" stroke-width="2" stroke-linejoin="round" opacity="0.9"/>
  <path class="cf-drip" style="animation-delay: 1.4s" d="M124 124 Q124 142 124 148 A3 3 0 0 0 130 148 Q130 142 130 124 Z" fill="#C77A57" stroke="#FFFDF7" stroke-width="1.8" stroke-linejoin="round" opacity="0.85"/>
  <g class="cf-tool" fill="none" stroke="#FFFDF7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M42 170 L66 122" stroke="#E8A87C" stroke-width="4.5"/>
    <path d="M66 122 C60 118 58 110 64 104 C70 98 78 102 78 110 C78 118 72 124 66 122" fill="#C77A57" stroke="#FFFDF7" stroke-width="2"/>
    <path d="M68 108 C66 106 66 110 68 112" fill="none" stroke="#FFFDF7" stroke-width="1.2"/>
  </g>
  <g class="cf-chunk" style="animation-delay: 0s" fill="#C77A57" stroke="#FFFDF7" stroke-width="1.4" stroke-linejoin="round">
    <path d="M36 170 L42 166 L44 172 L38 176 Z"/>
  </g>
  <g class="cf-chunk" style="animation-delay: 0.7s" fill="#C77A57" stroke="#FFFDF7" stroke-width="1.4" stroke-linejoin="round">
    <path d="M160 164 L168 162 L170 170 L162 172 Z"/>
  </g>
  <g class="cf-chunk" style="animation-delay: 1.4s" fill="#C77A57" stroke="#FFFDF7" stroke-width="1.4" stroke-linejoin="round">
    <path d="M130 126 L136 124 L138 130 L132 132 Z"/>
  </g>
  <circle class="cf-speck" style="animation-delay: 0s" cx="56" cy="172" r="1.6" fill="#C77A57" opacity="0.6"/>
  <circle class="cf-speck" style="animation-delay: 1s" cx="150" cy="170" r="1.4" fill="#C77A57" opacity="0.55"/>
  <circle class="cf-speck" style="animation-delay: 2s" cx="120" cy="176" r="1.2" fill="#C77A57" opacity="0.5"/>
</svg>

• Add a sculpting handmedium

  Place a tiny gloved hand holding the loop tool and animate it as if it is shaping the clay.

• Puddle modeeasy

  Add a flat clay puddle spreading from under the pot with a slow grow animation.

• Monster triomedium

  Add two smaller clay blobs peeking from behind the pot with offset morph loops.