<div class="dino">
  <div class="head">
    <div class="dets"></div>
  </div>
  <div class="neck"></div>
  <div class="body">
    <div class="dets"></div>
  </div>
</div>

$dino-body: #E00C50;
$dino-details: #1A1A1B;

*:before, 
*:after {
  content: "";
}

body {
  margin: 0;
  height: 100vh;
  min-height: 500px;
}

.dino {
  height: calc(100% - 25px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25px;
}

.head, .body {
  width: 100px;
  flex: 0 0 100px;
  background: $dino-body;
}

.neck {
  width: 100px;
  height: 100%;
  background: $dino-body;
  background-size: 100px 100px;
  position: relative;
  &:before {
    width: 40px;
    height: 100%;
    background: radial-gradient(circle, $dino-details 50%, transparent 53%);
    background-size: 40px 40px;
    position: absolute; 
    background-repeat: round;
    right: -20px;
    z-index: -1;
    
    
  }
}

.dets {
  position: absolute;
  margin: 20px;
  width: 25px;
  height: 17px;
  background: darken($dino-body, 7);
  border-radius: 38% 62% 40% 60% / 30% 47% 53% 70%;
  box-shadow: 22px 13px 0 -4px darken($dino-body, 7),
              5px 18px 0 -6px darken($dino-body, 7);
}

.body {
  position: relative;
  flex: 0 0 200px;
  width: 300px;
  left: 100px;
  border-radius: 0 44% 0 0;
  background-size: 25px 25px;
  background-position: 0 calc(100% - -15px);
  background-repeat: repeat-x;
  background-image: radial-gradient(circle, darken($dino-body, 9) 65%, transparent 69%);
  &:before, 
  &:after {
    width: 150px;
    height: 75px;
    background: white;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 56% 93% 0 0;
  }
  &:after {
    transform: translate(-50%, -15px) rotate(180deg); 
    background: $dino-body;
    box-shadow: none;
  }
  
  .dets {
    top: 16px;
    right: 25px;
  }
  
}

.head {
  border-radius: 200px;
  transform-origin: bottom right;
  transform: scale(1.7) translate(0, 50px);
  box-shadow: 50px -10px 0 -42px $dino-details, 
              40px -30px 0 -42px $dino-details;
  &:before {
    width: 40px;
    height: 30px;
    background: $dino-details;
    background-image:radial-gradient(circle, white 50%, transparent 53%),
      radial-gradient(circle, pink 50%, transparent 53%);
    background-size: 12px 12px, 40px 40px;
    background-repeat: repeat-x;
    background-position: 0px -5px, 10px 15px;
    position: absolute;
    bottom: 15px;
    border-radius: 10px 50px 40px 100px;
  }
  
  &:after {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 30px;
    border-radius: 50%;
    background: white;
    background-image:
       radial-gradient(circle, $dino-details 50%, transparent 53%);
    background-size: 22px 22px;
    background-position: bottom left;
    background-repeat: no-repeat;
  }
  
  .dets {
    transform: scale(.5) rotate(90deg);
    left: -15px;
  }
}

// Inspiration //

// Design: https://dribbble.com/shots/3205633-Dino
// Concept: https://codepen.io/thewizardjs/pen/WVEBLo