Recreate this radial image using css

Question

I would like to know if it's possible to recreate the following image using css. I am currently using it but in svg format.

Answer 1

Imagine this:

jsfiddle link

#circle {
  background: #ccc;
  border-radius: 50%;
  /* Change these two equally to change circle size.  Can be pixels, too. */
  width: 25%;
  padding-top: 25%;
  height: 0;
  position: relative;
}
.hand {
  background: black;
  width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
}
.hand:nth-child(2) {
  transform: rotate(90deg);
}
.hand:nth-child(3) {
  transform: rotate(45deg);
}
.hand:nth-child(4) {
  transform: rotate(135deg);
}
#circle:after {
  content: '';
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 10%;
  left: 10%;
}

<div id="circle">
  <div class="hand"></div>
  <div class="hand"></div>
  <div class="hand"></div>
  <div class="hand"></div>
</div>

Or if you need the middle to be transparent (this is a little hacky, and you may have to modify it to fit your exact needs): https://jsfiddle.net/wdoe8r3m/1/