JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#circle {
    border-radius:50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,#ccc 50%,#ccc 100%);
    width:25%;
    padding-top:25%;
    height:0;
    position:relative;
    overflow:hidden;
}

.hand {
    background: linear-gradient(to bottom, #000 0px, #000 15%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 86%, #000 86%, #000 100%);
    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);
}