-1

I want to create this with HTML and CSS. It should be exact same as in photo. Could you please help? Thanks in advance.

enter image description here

Paulie_D
  • 107,962
  • 13
  • 142
  • 161

1 Answers1

0

.code-copy {
  position: relative;
  display: flex;
  height: 200px;
  width: 200px;
}

.code-copy span {
  display: flex;
  font-size: 31px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}
<div class="code-copy">
  <svg xmlns="http://www.w3.org/2000/svg" id="sv" width="200" height="200" viewBox="0 0 200 200">
    <path id="0" fill="#D1E6BC" d="M100, 0 A100,100 0 0 1 163.357335318736,177.36826262305007 L131.678667659368,138.68413131152505 A50,50 0 0 0 100,50 Z"></path>
    <path id="1" fill="#94CD8B" d="M163.357335318736, 177.36826262305007 A100,100 0 1 1 99.98254670756873,0.0000015230870928917284 L99.99127335378436,50.000000761543546 A50,50 0 1 0 131.678667659368,138.68413131152505 Z"></path>
  </svg>
  <span>75%</span>
</div>
prograk
  • 559
  • 4
  • 14