CSS เท่านั้น Animate - วาดวงกลมที่มีรัศมีเส้นขอบและพื้นหลังโปร่งใส

ในการวาดวงกลมที่มีพื้นหลังโปร่งใสและรัศมีเส้นขอบ ใช้ CSS ต่อไปนี้ -

body {
   background: repeating-linear-gradient(45deg, white 0px, green 100px);
   height: 400px;
   background-size: 400px 400px;
   background-repeat: no-repeat;
}
html {
   height: 100%;
}
#box {
   position: absolute;
   width: 400px;
   height: 400px;
   border: solid blue 2px;
   animation: colors 5s infinite;
}
#demo {
   width: 50%;
   height: 100%;
   right: 0px;
   position: absolute;
   overflow: hidden;
   transform-origin: left center;
   animation: cliprotate 18s steps(2) infinite;
   -webkit-animation: cliprotate 18s steps(2) infinite;
}
.circlehalf {
   box-sizing: border-box;
   height: 100%;
   right: 0px;
   position: absolute;
   border: solid 20px transparent;
   border-top-color: blue;
   border-left-color: blue;
   border-radius: 50%;
}
#clipped {
   width: 200%;
   animation: rotate 8s linear infinite;
   -webkit-animation: rotate 8s linear infinite;
}
#fixed {
   width: 100%;
   transform: rotate(145deg);
   animation: showfixed 18s steps(2) infinite;
   -webkit-animation: showfixed 18s linear infinite;
}
@-webkit-keyframes cliprotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@keyframes cliprotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
   0% {transform: rotate(-45deg);}
   100% {transform: rotate(135deg);}
}
@keyframes rotate {
   0% {transform: rotate(-45deg);}
   100% {transform: rotate(135deg);}
}
@-webkit-keyframes showfixed {
   0% {opacity: 0;}
   49.9% {opacity: 0;}
   50% {opacity: 1;}
   100% {opacity: 1;}
}

ต่อไปนี้คือ HTML5 Canvas ของเรา -

<div id = "box">
   <div id = "demo">
      <div class = "circlehalf" id = "clipped">
      </div>
   </div>
   <div class = "circlehalf" id = "fixed">
   </div>
</div>