Фигуры CSS и HTML [требует правки]

svg { 
   width: 70px; 
   background-color: #ccc; 
   border: 1px solid; 
   border-radius: 10px; 
}

<svg viewBox="0 0 160 400" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <circle cx="80" cy="80" r="50"/> 
  <circle cx="80" cy="80" r="48" fill="#ff0000"/> 
  <circle cx="80" cy="200" r="50"/> 
  <circle cx="80" cy="200" r="48" fill="#ffff00"/> 
  <circle cx="80" cy="320" r="50"/> 
  <circle cx="80" cy="320" r="48" fill="#00aa00"/> 
</svg>

.bl_inner { 
  width: 50px; 
  height: 170px; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-around; 
  border: 1px solid black; 
  border-radius: 10px; 
  background-color: #D7D7D7; 
} 
 
.bl_circle { 
  margin: 0 auto; 
  border-radius: 50%; 
  border: 1px solid #000; 
  width: 40px; 
  height: 40px; 
} 
 
.color_red { 
  background-color: #f00; 
} 
 
.color_yellow { 
  background-color: #ff0; 
} 
 
.color_green { 
  background-color: #0BAE51; 
}

<div class="bl_inner"> 
  <div class="bl_circle color_red"></div> 
  <div class="bl_circle color_yellow"></div> 
  <div class="bl_circle color_green"></div> 
</div>