CSS ओनली एनिमेट - बॉर्डर-रेडियस और पारदर्शी बैकग्राउंड के साथ सर्कल ड्रॉ करें

CSS सर्कल एनिमेशन

पारदर्शी बैकग्राउंड और बॉर्डर-रेडियस के साथ सर्कल ड्रॉ करने के लिए, निम्नलिखित 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>

यह शुद्ध CSS एनिमेशन का उपयोग करके एक ड्रॉइंग सर्कल एनिमेशन बनाता है।