SVG Animal Faces – CODEBOX

SVG Animal Faces

✨ SANTHITA KRAJANGWONGPAISAN

<style>
  body{
    margin:2em;
    background:#303030;
  }
  svg{
  background:white;
  }
  #ear-right{
      transform: rotate(-30deg);
    }
    #ear-left{
      transform: rotate(30deg);
    }
  .cat.face{
      fill: rgb(172, 172, 172);
  }
  .cat.eye{
      fill: rgb(2, 224, 240);
      stroke: white;
      stroke-width: 0.25px;
  }
  .cat.nose{
      fill: rgb(255, 90, 173);
  }
  .cat.whisker{
      stroke:rgb(44, 44, 44);
      stroke-width: 0.1px;
  }
</style>
<svg viewBox="0 0 100 60">
  

  
  <rect fill="#b5b7a3" width="20" height="20"/>
  <rect fill="#d7d8d0" width="20" height="20" y="20"/>
  <rect fill="#b5b7a3" width="20" height="20" y="40"/>
  <rect fill="#d7d8d0" width="20" height="20" x="20"/>
  <rect fill="#b5b7a3" width="20" height="20" y="0" x="40"/>
  <rect fill="#d7d8d0" width="20" height="20" y="0" x="60"/>
  <rect fill="#b5b7a3" width="20" height="20" y="0" x="80"/>
  <rect fill="#b5b7a3" width="20" height="20" y="20" x="20"/>
  <rect fill="#d7d8d0" width="20" height="20" y="40" x="20"/>
  <rect fill="#d7d8d0" width="20" height="20" y="20" x="40"/>
  <rect fill="#b5b7a3" width="20" height="20" y="20" x="60"/>
  <rect fill="#d7d8d0" width="20" height="20" y="20" x="80"/>
  <rect fill="#b5b7a3" width="20" height="20" y="40" x="40"/>
  <rect fill="#d7d8d0" width="20" height="20" y="40" x="60"/>
  <rect fill="#b5b7a3" width="20" height="20" y="40" x="80"/>

<ellipse class="cat face" cx="10" cy="13" rx="5" ry="4"></ellipse>
  <polygon class="cat face" points="5,13 5,6 10,13"></polygon>
  <polygon class="cat face" points="15,13 15,6 10,13"></polygon>

<ellipse class="cat eye" cx="8" cy="11.5" rx="0.7" ry="0.7"></ellipse>
  <ellipse class="cat eye" cx="12" cy="11.5" rx="0.7" ry="0.7"></ellipse>

<ellipse class="cat nose" cx="10" cy="13.5" rx="0.8" ry="0.6"></ellipse>

<line class="cat whisker" x1="9" y1="13.25" x2="6.8" y2="12.5"></line>
  <line class="cat whisker" x1="9" y1="13.6" x2="6.5" y2="13.6"></line>
  <line class="cat whisker" x1="9" y1="13.9" x2="6.8" y2="14.5"></line>
  <line class="cat whisker" x1="11" y1="13.25" x2="13" y2="12.5"></line>
  <line class="cat whisker" x1="11" y1="13.6" x2="13.3" y2="13.6"></line>
  <line class="cat whisker" x1="11" y1="13.9" x2="13" y2="14.5"></line>

<rect fill="#d7d8d0" width="20" height="20" x="20"/>
   	<circle cx="25" cy="6" fill="black" r="3.5"></circle>
      <circle cx="25" cy="6" fill="hsl(359, 84%, 75%)" r="2"></circle>
      <svg x="10">
      <circle cx="25" cy="6" fill="black" r="3.5"></circle>
      <circle cx="25" cy="6" fill="hsl(359, 84%, 75%)" r="2"></circle></svg>
      <ellipse cx="30" cy="11" rx="8.4" ry="7" fill="hsl(210, 8%, 91%)" />
      <svg>
      <ellipse cx="27" cy="9" rx="2.5" ry="2.5" fill="black" />
      <circle cx="27" cy="10" fill="white" r=".76"></circle>
      <circle cx="27" cy="10" fill="hsl(27, 31%, 10%)" r="0.6"></circle>
      <circle cx="27.2" cy="9.8" fill="white" r="0.4"></circle>
      </svg>
      <svg x="6">
      <ellipse cx="27" cy="9" rx="2.5" ry="2.5" fill="black" />
      <circle cx="27" cy="10" fill="white" r=".76"></circle>
      <circle cx="27" cy="10" fill="hsl(27, 31%, 10%)" r="0.6"></circle>
      <circle cx="27.2" cy="9.8" fill="white" r="0.4"></circle>
      </svg>
      <svg y="3">
      <line x1="30" y1="9.5" x2="30" y2="11" stroke="hsl(355, 63%, 73%)" stroke-width=".5" stroke-linecap="round" />
      <line x1="28.3" y1="11" x2="30" y2="11" stroke="hsl(354, 81%, 37%)" stroke-width=".5" stroke-linecap="round" />
      <line x1="31.8" y1="11" x2="30" y2="11" stroke="hsl(354, 81%, 37%)" stroke-width=".5" stroke-linecap="round" />

<ellipse cx="30" cy="9.5" rx="1" ry=".8" fill="black" />
        <ellipse cx="29.9" cy="9." rx=".47" ry=".17" fill="hsl(210, 8%, 91%)" />
        <ellipse cx="25" cy="9" fill="hsl(355, 63%, 73%)" rx="1" ry=".7"></ellipse>
        <ellipse cx="35" cy="9" fill="hsl(355, 63%, 73%)" rx="1" ry=".7"></ellipse>
      </svg>
         <ellipse cx="30" cy="14.5" fill="hsl(354, 81%, 37%)" rx="2" ry=".7"> </ellipse>
  			<circle cx="28.3" cy="14.29" fill="hsl(354, 81%, 37%)" r='.5'> </circle>
  			<circle cx="31.7" cy="14.29" fill="hsl(354, 81%, 37%)" r='.5'> </circle>
  			<ellipse cx="30" cy="14.82" fill="hsl(354, 81%, 60%)" rx=".9" ry=".4"> </ellipse>
  			<circle cx="29.5" cy="14.9" fill="hsl(354, 81%, 60%)" r='.3'> </circle>
  

  
  <svg width="27" height="27" y="-3" x="76.7" viewbox="0 0 100 100">
    <polygon points="30,15 40,40 60,30" fill="#e2e2e2"/>
    <polygon points="70,15 60,38 40,30" fill="#e2e2e2"/>
    <ellipse id="ear-right"cx="10" cy="44" fill="#d8d3ca" rx="5" ry="10"/>
    <ellipse id="ear-left" cx="76" cy="-5" fill="#d8d3ca" rx="5" ry="10"/>
    <rect x="27" y="20" rx="20" ry="17" width="45" height="60" fill="#f7f4ef"/>
    <polygon points="25,60 27,50 40,40" fill="#f7f4ef"/>
    <polygon points="74.4,59 66,60 70,44" fill="#f7f4ef"/>
    <rect x="24.5" y="49" rx="20" ry="20" width="50" height="22" fill="#fddbc7"/>
    <circle cx="43" cy="60" r="2" fill="#2d2d2d"/> <circle cx="55" cy="60" r="2" fill="#2d2d2d"/>
    <ellipse cx="41" cy="44" fill="#2d2d2d" rx="3" ry="4"/>
    <ellipse cx="57" cy="44" fill="#2d2d2d" rx="3" ry="4"/>
  </svg>
  
  
  <svg viewBox="0 0 100 100">
      <circle cx="92" cy="46" fill="#7B7471 " r="6"/>
      <circle cx="92" cy="46" fill="pink" r="4"/>
      <circle cx="76" cy="46" fill="#7B7471 " r="6"/>
      <circle cx="76" cy="46" fill="pink" r="4"/>
      <ellipse cx="84" cy="55" rx="12" ry="10" fill="#7B7471 "/>
      <circle cx="79" cy="51" fill="#221B03"  r="2" />
      <circle cx="80" cy="50" fill="white" r="0.7"/>
      <circle cx="89" cy="51" fill="#221B03"  r="2"/>
      <circle cx="90" cy="50" fill="white" r="0.7"/>
      <ellipse cx="84" cy="57" rx="4" ry="4.5" fill="pink"/>
      <ellipse cx="84" cy="52" rx="1" ry="1" fill="brown"/>
      <ellipse cx="92" cy="55" rx="2" ry="2" fill="#C32F00"/>
      <ellipse cx="76" cy="55" rx="2" ry="2" fill="#C32F00"/>
      <line x1="70" y1="55.1" x2="77" y2="55.5" stroke="#4C2203" stroke-width=".4" stroke-linecap="round" />
        <line x1="70" y1="51" x2="77" y2="55" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" />
        <line x1="70" y1="60" x2="77" y2="56" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" />
        <line x1="92" y1="54" x2="99" y2="50.5" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" />
        <line x1="92" y1="55" x2="99" y2="55" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" />
        <line x1="92" y1="56" x2="99" y2="59" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" />
    </svg>
  

  
    <circle cx="85" cy="25" r="3" fill="#FFA5DC" />
  <circle cx="85" cy="25" r="2" fill="#FF7E9D" />
    <circle cx="95" cy="25" r="3" fill="#FFA5DC" />
  <circle cx="95" cy="25" r="2" fill="#FF7E9D" />
    <circle cx="90" cy="31" r="7.5" fill="#FFA5DC" />
  <ellipse cx="90" cy="32.5" rx="4" ry="3" fill="#FF7E9D" />
    <ellipse cx="93" cy="28" rx="1" ry="1.5" fill="black" />
    <ellipse cx="87" cy="28" rx="1" ry="1.5" fill="black" />
  <circle cx="93" cy="28.3" r="0.5" fill="white" />
    <circle cx="87" cy="28.3" r="0.5" fill="white" />
  <circle cx="88.5" cy="32.5" r="1" fill="#FFA5DC" />
  <circle cx="91.5" cy="32.5" r="1" fill="#FFA5DC" />
  <ellipse cx="83.5" cy="32.5" rx="2" ry="1.5" fill="#FF6A89" />
  <ellipse cx="96.5" cy="32.5" rx="2" ry="1.5" fill="#FF6A89" />
  
  
</svg>