<div class="gojek" />
:root {
  --size: 300;
  --sizePX: calc(var(--size) * 1px);
  --shadowPX: calc(8 / 5 * (var(--size)) * 1px);
  --backgroundColor: black;
  --gojekColor: #00aa13;
}
body {
  background: var(--backgroundColor);
}
.gojek {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
  width: var(--sizePX);
  height: var(--sizePX);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--gojekColor) 0%,
    var(--gojekColor) 28%,
    var(--backgroundColor) 28%,
    var(--backgroundColor) 44%,
    var(--gojekColor) 44%,
    var(--gojekColor) 50%,
    var(--gojekColor) 70%
  );
}
.gojek::before {
  position: absolute;
  top: 44%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: "";
  transform: scale(0.38);
  background: var(--backgroundColor);
}
.gojek::after {
  position: absolute;
  top: 37.8%;
  left: -15%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: "";
  transform: scale(0.189);
  background: var(--gojekColor);
  box-shadow: var(--gojekColor) var(--shadowPX) 0 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.