Recreate this radial image using css -

i know if it's possible recreate following image using css. using in svg format.

imagine this:

jsfiddle link

#circle {    background: #ccc;    border-radius: 50%;    /* change these 2 equally change circle size.  can 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 need middle transparent (this little hacky, , may have modify fit exact needs): https://jsfiddle.net/wdoe8r3m/1/