Golu name

by Ankit Patidar

HTML

<div class="badge">
  <div class="golu"></div>
  <span class="char1">Y</span>
  <span class="char2">o</span>
  <span class="char3">u</span>
  <span class="char4">a</span>
  <span class="char5">r</span>
  <span class="char6">e</span>
  <span class="char7">h</span>
  <span class="char8">e</span>
  <span class="char9">r</span>
  <span class="char10">e</span>
</div>

CSS

.badge {
    margin: 5rem;
    position: relative;
    font-family: system-ui;
}
.golu {
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    background: #ccc;
}
.golu:after {
    content: "";
    border: 1px solid #ccc;
    width: 5.8rem;
    height: 5.8rem;
    position: absolute;
    border-radius: 50%;
    left: -1rem;
    top: -1rem;
}
.badge span {
    position: absolute;
}
.char1 {
    left: -0.6rem;
    bottom: 0.5rem;
    transform: rotate(65deg);
}
.char2 {
    left: -0.2rem;
    bottom: -0.05rem;
    transform: rotate(59deg);
}
.char3 {
    left: 0.3rem;
    bottom: -0.5rem;
    transform: rotate(46deg);
}
.char4 {
    left: 1.5rem;
    bottom: 0;
    transform: rotate(45deg);
}
.char5 {
    left: 2rem;
    bottom: 0;
    transform: rotate(45deg);
}
.char6 {
    left: 2.5rem;
    bottom: 0;
    transform: rotate(45deg);
}
.char7 {
    left: 3rem;
    bottom: 0;
    transform: rotate(45deg);
}
.char8 {
    left: 3.5rem;
    bottom: 0;
    transform: rotate(45deg);
}
.char9 {
    left: 4rem;
    bottom: 0;
    transform: rotate(45deg);
}
.char10 {
    left: 4.5rem;
    bottom: 0;
    transform: rotate(45deg);
}