<svg width="1440" height="800" viewBox="0 0 1440 800" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="animated-circles" clip-path="url(#clip0_1:2)">
<g id="circles-light">
<g id="Group 1">
<circle id="Ellipse-1" cx="333" cy="125" r="75" fill="#DEEDEE"/>
<circle id="Ellipse-8" cx="333" cy="125" r="56" fill="white"/>
</g>
<circle id="Ellipse-2" cx="1161" cy="541" r="75" fill="#DEEDEE"/>
<path id="Ellipse-7" d="M1086 101.5C1086 129.114 1063.61 151.5 1036 151.5C1008.39 151.5 986 129.114 986 101.5C986 73.8858 1008.39 51.5 1036 51.5C1063.61 51.5 1086 73.8858 1086 101.5Z" fill="#DEEDEE"/>
<path id="Ellipse-9" d="M881 707.5C881 728.211 864.211 745 843.5 745C822.789 745 806 728.211 806 707.5C806 686.789 822.789 670 843.5 670C864.211 670 881 686.789 881 707.5Z" fill="#DEEDEE"/>
<circle id="Ellipse-5" cx="534" cy="786" r="50" fill="#DEEDEE"/>
</g>
<g id="circles-dark">
<g id="Group 2">
<circle id="Ellipse-3" cx="1087" cy="614" r="75" fill="#E35874"/>
<circle id="Ellipse-12" cx="1087" cy="614" r="56" fill="white"/>
</g>
<path id="Ellipse-4" d="M295 416C295 443.614 272.614 466 245 466C217.386 466 195 443.614 195 416C195 388.386 217.386 366 245 366C272.614 366 295 388.386 295 416Z" fill="#E35874"/>
<circle id="Ellipse-13" cx="384.5" cy="576.5" r="37.5" fill="#E35874"/>
<circle id="Ellipse-11" cx="880.5" cy="698.5" r="37.5" fill="#E35874"/>
<circle id="Ellipse-6" cx="746" cy="157" r="50" fill="#E35874"/>
<circle id="Ellipse-10" cx="444" cy="57" r="100" fill="#E35874"/>
</g>
</g>
</svg>

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#animated-circles circle, 
#animated-circles path{
      animation-name: spin;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: center center;
  

}

#Ellipse-1 {
    animation-duration: 9200ms;
}
#Ellipse-2  {
    animation-duration: 8500ms;
}
#Ellipse-3  {
    animation-duration:7200ms;
}
#Ellipse-3  {
    animation-duration:9500ms;
}
#Ellipse-4  {
    animation-duration:18000ms;
}
#Ellipse-5  {
    animation-duration:41000ms;
}
#Ellipse-6  {
    animation-duration:15000ms;
}
#Ellipse-7  {
    animation-duration:8700ms;
}
#Ellipse-8  {
    animation-duration:6800ms;
}
#Ellipse-9  {
    animation-duration:7200ms;
}
#Ellipse-10  {
    animation-duration:9000ms;
}
#Ellipse-11  {
    animation-duration:9000ms;
}
#Ellipse-12  {
    animation-duration:9000ms;
}
#Ellipse-13 {
    animation-duration:9000ms;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.