.orb{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto}
.orb svg{width:100%;height:100%;overflow:visible}
.orb .m{fill:none;stroke:var(--b);stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.2s cubic-bezier(.6,.1,.2,1) forwards,sway 9s ease-in-out 2.4s infinite alternate;transform-box:fill-box;transform-origin:center}
.orb .f{fill:var(--b);stroke:none;opacity:0;animation:fadein 1.2s ease 1.6s forwards}
.orb .f2{fill:var(--bl);opacity:0;animation:fadein 1.2s ease 1.9s forwards}
.orb .t{fill:none;stroke:var(--b);stroke-width:3;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:80;animation:draw 1.2s ease 1.8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:.95}}
@keyframes sway{from{transform:scaleX(1)}to{transform:scaleX(.82)}}
.orb .m:nth-of-type(2){animation-delay:.15s,2.6s}.orb .m:nth-of-type(3){animation-delay:.3s,2.8s}.orb .m:nth-of-type(4){animation-delay:.45s,3s}