@property --value{syntax:"<angle>";inherits:true;initial-value:0deg}@property --width-ratio{syntax:"<number>";inherits:true;initial-value:0}@property --scale{syntax:"<number>";inherits:true;initial-value:0}:root{--width:8px;--duration:1.25s;--size:300px}@keyframes ring{0%{--value:var(--start);--scale:1;opacity:0}24%{opacity:1}50%{--scale:1.2;--width-ratio:1.5}76%{opacity:1}to{--scale:1;--value:calc(var(--start) + 90deg);--width-ratio:1}}@keyframes ring-legacy{0%{--value:var(--start);--scale:1;transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale))}70%{--scale:1.2;--value:calc(var(--start) + 180deg);transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale))}to{--value:calc(var(--start) + 360deg);--scale:1;transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale))}}.circle-animation{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:9}.demo{display:grid;height:300px;place-items:center;width:300px;z-index:9}.demo .rings{aspect-ratio:1;border-radius:50%;filter:url(#blurFilter);perspective:var(--size);position:relative;width:var(--size)}.demo .rings:after,.demo .rings:before{background:red;border-radius:50%;content:"";top:0;right:0;bottom:0;left:0;position:absolute;--width-ratio:1;background:conic-gradient(from calc(var(--value)*3),#d32ee6,transparent,#d32ee6,#b055ff,#d32ee6,transparent,transparent,#b055ff,transparent,#d32ee6,#b055ff,#fff,transparent,transparent,transparent) border-box;border:calc(var(--width)*var(--width-ratio)) solid transparent;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;--start:180deg;--value:var(--start);--scale:1;transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale));transition:.3s}.demo .rings:before{--start:180deg}.demo .rings:after{--start:90deg}.demo .rings>.rings:before{--start:360deg}.demo .rings>.rings:after{--start:270deg}.demo .rings:after,.demo .rings:before,.demo:hover .rings:after,.demo:hover .rings:before{animation:ring var(--duration) ease-in-out}.filter{display:block;height:0;overflow:visible!important;position:absolute;width:0}