tiger

by Pranab Dey

HTML

<div class="main">
<div class="select">
  <div class="ear1">
  	<div class="hair1"></div>
	</div>
<div class="ear2">
  <div class="hair2"></div>
</div>
<div class="hair"></div>
<div class="head">
<div class="innerHed">
  <div class="strip"></div>
  <div class="strip1"></div>
  <div class="strip2"></div>
  <div class="eye1"></div>
  <div class="strip3"></div>
  <div class="strip4"></div>
  <div class="strip5"></div>
  <div class="eye2"></div>
  <div class="strip6"></div>
  <div class="strip7"></div>
  <div class="strip8"></div>
  <div class="cover">
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
</div>
</div>
</div>
</div>

CSS

body{
  background: linear-gradient(to bottom right,rgb(246, 124, 47),#555,rgb(246, 124, 47),#555); width: 100vw; height: 100vh; max-width: 100%;margin: 0;
}
.main{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.ear1{
  background: linear-gradient(to bottom,#777,white); width: 30px; height: 30px; border: 8px solid rgb(246, 124, 47);
  border-radius: 50% 50% 0 0; transform: rotate(-45deg); border-bottom: 0px;position: absolute; left: -6%;
  line-height: 2px;
}
.ear2{
  background: linear-gradient(to bottom,#777,white); width: 30px; height: 30px; border: 8px solid  rgb(246, 124, 47);
  border-radius: 50% 50% 0 0; transform: rotate(45deg); border-bottom: 0px;position: absolute; right: -6%;
}
.hair{
  width: 50px; height:40px; background:  rgb(246, 124, 47);clip-path: polygon(20% 60%,16% 20%,40% 60%,50% 7%,60% 53%,84% 22%,80% 60%); position: absolute; left:35%; top: -14%;
}
.hair1{
  width: 50px; height:40px; background:  rgb(246, 124, 47);clip-path: polygon(20% 60%,16% 20%,40% 60%,50% 7%,60% 53%,84% 22%,80% 60%); position: absolute; left:-33%; top: 30%; transform: scale(0.5);
}
.hair2{
  width: 50px; height:40px; background: orange;clip-path: polygon(20% 60%,16% 20%,40% 60%,50% 7%,60% 53%,84% 22%,80% 60%); position: absolute; right:-33%; top: 30%; transform: scale(0.5);
}
.head{
  width: 150px; height: 150px; border-radius: 50%; background: rgb(246, 124, 47); border: 1px solid #555;
}
.innerHed{
  overflow: hidden; position: absolute;width: 150px; height: 150px; border-radius: 50%; background: rgb(246, 124, 47);
}
.eye1{
  width: 30px; height:30px; background: white; position: absolute; left:27%; top: 30%;border-radius: 50%;
  animation: eye 2.5s linear infinite;
}
@keyframes eye{
  0%   {height: 30px}
	3%   {height: 1px}
	5%   {height: 30px}
	100% {height: 30px}
}
.eye1:before{
  content:'';background: #333;width: 14px; height: 14px; border-radius: 50%;position: absolute; left:32%; top: 32%;
}
.eye2{
  width: 30px; height:30px;...