How make arcs shapes with pure CSS - html

Question

I wanted to make smilly for my clock but I stucked with the arcs .
This question used box shadow . Can it possible with lines to make crescent shape
I searched for many question all are using almost semi-circles not stretched like arcs.
How to make arcs like this in below image with pure CSS . Any suggestion except SVG or Canvas. Thanks for the help .
Know arcs are main in image but only one example will work I will use it at other places my self and position them
#clockStyleCircle{
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockStyleEyeCircle1{
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 10%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86); /* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
background-color: black;
}
#clockStyleEyeCircle2{
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 65%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
background-color: black;
}
#clockStyleSimileCircle{
position: absolute;
width: 8vw;
height: 3vw;
top: 68%;
left: 25%;
border: 3px solid rgb(36, 36, 36);
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
border-bottom-left-radius: 100% 200%;
border-bottom-right-radius: 100% 200%;
background-color: black;
box-shadow: inset 16px 0px #777, inset 16px 0px 1px 2px #777;;
}
<div id="clockStyleCircle">
<div id="clockStyleEyeCircle1">
<div id="clockStyleEyeSmallCircle1"></div>
</div>
<div id="clockStyleEyeCircle2">
<div id="clockStyleEyeSmallCircle2"></div>
</div>
<div id="clockStyleSimileCircle"></div>
</div>
After referring to above link eyes get alright but as you can see in above snippet shape of mouth renders in shadow . So , tried some changes in below snippet you can see its not stretched and borders are hidden to make it possible . Can it possible to make arc with pure CSS .
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockStyleEyeCircle1 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 10%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
/* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
background-color: black;
}
#clockStyleEyeCircle2 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 65%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
background-color: black;
}
#clockStyleSimileCircle {
position: absolute;
width: 6vw;
height: 6vw;
top: 45%;
left: 30%;
border: 3px solid transparent;
border-radius: 150px;
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
/* border-bottom-left-radius: 100% 200%; */
/* border-bottom-right-radius: 100% 200%; */
background-color: transparent;
box-shadow: inset 0px -9px 1px -2px #777;
}
#clockStyleSmileSmallCircle2 {
position: absolute;
width: 1vw;
height: 2vw;
top: 76%;
left: 30%;
border: 3px solid transparent;
border-radius: 150px;
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
/* border-bottom-left-radius: 100% 200%; */
/* border-bottom-right-radius: 100% 200%; */
background-color: transparent;
box-shadow: inset 0px 9px 1px -3px red;
}
<div id="clockStyleCircle">
<div id="clockStyleEyeCircle1">
<div id="clockStyleEyeSmallCircle1"></div>
</div>
<div id="clockStyleEyeCircle2">
<div id="clockStyleEyeSmallCircle2"></div>
</div>
<div id="clockStyleSimileCircle"><div id="clockStyleSmileSmallCircle2"></div></div>
</div>

Answer 1

The width and height of your smile circle is the same, so when you do border-radius it gives you a semi-circle instead of an arc, try increasing the width greater than the height and you should be able to achieve the desired result.
#clockStyleSimileCircle {
width: 7vw;
height: 6vw;
}