How to make a responsive circle with transparent horizontal lines inside it in CSS?

Question

I do not know if this is even possible with only css. I want to make a circle with transparent horizontal lines and you can change size and position of each of these lines. Something like this png picture:

I did this so far, but it is not responsive it has not transparent lines inside, but you can move all lines freely.

.enjoy-css {
  box-sizing: content-box;
  width: 300px;
  height: 300px;
  position: absolute;
  border: none;
  border-radius: 150px;
  background: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white)black;
  background-repeat: no-repeat;
  background-position: 90% 90%, 55% 75%, 90% 10%, 95% 30%, 90%;
  background-origin: padding-box;
  background-size: 124px 20px, 153px 20px, 124px 20px, 153px 20px, 80px 20px;
}

<div class="enjoy-css">
  <span></span>
</div>

Answer 1

You can use svg to create the responsive shapes like below.

For this first you have to create the svg of your shape inside svg <symbol> tag so that you can use this later.

Then create a div having class enjoy-css and then use the previously created svg using <use>. Don't forget to give width="100%" to the <svg> for responsive purpose

svg.defs-only {
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

body {
  background: gold;
}

.enjoy-css {
  max-width: 400px;
}

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px">
<symbol id="potofgold" >
<path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
 d="M387.395,270.000 L154.000,270.000 L154.000,298.000 L374.370,298.000 C368.372,308.648 361.409,318.675 353.632,328.000 L103.000,328.000 L103.000,356.000 L325.121,356.000 C290.863,383.519 247.363,400.000 200.000,400.000 C89.543,400.000 0.000,310.457 0.000,200.000 C0.000,177.987 3.567,156.809 10.136,137.000 L263.000,137.000 L263.000,109.000 L21.855,109.000 C28.645,95.734 36.895,83.344 46.356,72.000 L238.000,72.000 L238.000,44.000 L74.879,44.000 C109.140,16.485 152.638,0.000 200.000,0.000 C310.457,0.000 400.000,89.543 400.000,200.000 C400.000,224.628 395.538,248.212 387.395,270.000 ZM326.000,187.000 L63.000,187.000 L63.000,215.000 L326.000,215.000 L326.000,187.000 Z"/>
</symbol>
</svg>

<div class="enjoy-css"><svg viewBox="0 0 400 400" width="100%"><use xlink:href="#potofgold"/></svg></div>