Penguim_Start

index.html

<div class="top">
  <div class ="pinguim part_1">
<svg version="1.1"
     width="210" 
     height ="250"
     viewBox = "100 143 100 200"
     preserveAspectRatio="xMaxYMid slice">
  <defs>
  <style type="text/css">
    .body {fill:#343A42;}
    .fil1 {fill:#FF802A;}
    .fil2 {fill:none;}
  </style>
  <g id="penguim">
   <path id="body" class="body" d="M201.45 158.74c-9.82,-31.13 -22.81,-50.39 -30.95,-60.28 -4.47,-27.59 -9.62,-54.31 -10.76,-57.57 -7.93,-22.72 -29.55,-39.02 -54.98,-39.02 -26.63,0 -49.08,17.87 -56.02,42.28 -0.77,2.71 -5.53,27.9 -9.79,54.38 -8.14,9.92 -21.09,29.16 -30.88,60.21 -12.33,39.1 16.14,21.28 24.15,4.4 2.02,22.82 14.55,42.59 32.73,54.48 11.44,7.49 25.11,11.85 39.81,11.85 14.7,0 28.36,-4.36 39.81,-11.85 18.17,-11.89 30.7,-31.66 32.72,-54.48 8.01,16.88 36.49,34.7 24.16,-4.4zm-96.69 58l0 0c-33.14,0 -60.1,-26.96 -60.1,-60.1 0,-21.56 14.17,-102.23 16.37,-109.12 4.32,-13.56 17.09,-19.93 29.27,-14.09 9.16,4.4 14.46,16.45 14.46,16.45 0,0 3.83,-11.76 12.75,-15.92 13.65,-6.37 28.05,3.09 31.29,16.43 1.79,7.37 16.06,84.41 16.06,106.25 0,33.14 -26.96,60.1 -60.1,60.1z"/>
   <path id="paws" class="fil1" d="M64.95 217.62c-6.47,0.49 -12.19,3.4 -11.84,12.37l29.26 0 44.77 0 29.26 0c0.36,-8.97 -5.36,-11.88 -11.83,-12.37 -11.45,7.49 -25.11,11.85 -39.81,11.85 -14.7,0 -28.37,-4.36 -39.81,-11.85z"/>
   <path id="mouth" class="fil1" d="M118.67 80.68c0,0 -3.4,-10.55 -12.32,-10.55 -8.92,0 -12.32,10.55 -12.32,10.55l12.32 8.92 12.32 -8.92z"/>
   <g id="eye_r">
    <path class="fil0" d="M125.43 52.3c-4.35,1.03 -7.03,5.4 -5.99,9.75 1.03,4.34 5.39,7.03 9.74,5.99 4.35,-1.03 7.03,-5.4 6,-9.75 -1.04,-4.34 -5.41,-7.03 -9.75,-5.99zm5.58 9.59l0 0c-1.03,-1.68 -2.91,-2.89 -5.32,-2.5 -1.27,0.21 -2.16,0.77 -2.72,1.52 -0.24,-2.19 1.26,-4.21 3.45,-4.57 2.28,-0.37 4.43,1.17 4.8,3.45 0.12,0.73 0.03,1.45 -0.21,2.1z"/>
    <path class="fil2" d="M126.42 56.34c-2.19,0.36 -3.69,2.38 -3.45,4.57 0.56,-0.75 1.45,-1.31 2.72,-1.52 2.41,-0.39 4.29,0.82 5.32,2.5 0.24,-0.65 0.33,-1.37 0.21,-2.1 -0.37,-2.28 -2.52,-3.82 -4.8,-3.45z"/>
   </g>
   <g id="eye_l">
    <path class="fil0" d="M80.34 68.04c4.34,1.04 8.71,-1.65 9.74,-5.99 1.04,-4.35 -1.65,-8.72 -5.99,-9.75 -4.35,-1.04 -8.71,1.65 -9.75,5.99 -1.03,4.35 1.65,8.72 6,9.75zm-2.05 -8.25l0 0c0.38,-2.28 2.52,-3.82 4.8,-3.45 2.2,0.36 3.69,2.38 3.46,4.57 -0.57,-0.75 -1.45,-1.31 -2.72,-1.52 -2.41,-0.39 -4.3,0.82 -5.32,2.5 -0.24,-0.65 -0.34,-1.37 -0.22,-2.1z"/>
    <path class="fil2" d="M83.83 59.39c1.27,0.21 2.15,0.77 2.72,1.52 0.23,-2.19 -1.26,-4.21 -3.46,-4.57 -2.28,-0.37 -4.42,1.17 -4.8,3.45 -0.12,0.73 -0.02,1.45 0.22,2.1 1.02,-1.68 2.91,-2.89 5.32,-2.5z"/>
   </g>
  </g>
</defs> 
<use href="#penguim"/>
</svg>
</div>
<div class="pinguim part_2">
<svg version="1.1" 
     width="210" 
     height ="250"
     viewBox = "100 86 13 200"
     preserveAspectRatio="xMaxYMid meet">
  <use href="#penguim"/>
</svg>
</div>
</div>
<div class="bottom">
  <div class="pinguim part_3">
    <svg version="1.1" 
      width="210" 
      height ="250"
      viewBox = "123 125 200 56"
      preserveAspectRatio="xMinYMax meet">
      <use href="#penguim"/>
  </svg>
</div>
  <div class="pinguim part_4">
    <svg version="1.1" 
      width="210" 
      height ="250"
      viewBox = "159 180 50 50"
      preserveAspectRatio="xMinYMax meet">
      <use href="#penguim"/>
  </svg>
</div>
</div>

penguim_start.markdown

Penguim_Start

A Pen by Aleksandr Serov on CodePen.

License.

style.css

.pinguim {
  display: inline-block;
  border: 2px dotted red;
}
.top div {
  border-bottom: none;
}
.part_1 {
  border-right: none;
}
.part_2 {
  margin-left: -5px;
  border-left: none;
}
.bottom div {
  margin-top: -5px;
  border-top: none;
}
.part_3 {
  border-right: none
}
.part_4 {
  margin-left: -5px;
  border-left: none;
}

Pinguin