<svg
                    class='labs-hero-anim__purple'
                    width="850"
                    height="850"
                    viewBox="0 0 850 850"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg">
                    <defs>
                    <filter id="goo">
                        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
                        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                        <feBlend in2="goo" in="SourceGraphic" result="mix" />
                    </filter>
                    </defs>
                    <g filter="url(#goo)">
                        <circle class="labs-hero-anim__green-circle--first" cx="230" cy="100" r="30" fill="#4ae6c1" />
                        <circle class="labs-hero-anim__green-circle--second" cx="230" cy="100" r="30" fill="#4ae6c1" />
                        <circle class="labs-hero-anim__yellow-circle--first" cx="435" cy="625" r="56" fill="#ffc107" />
                        <circle class="labs-hero-anim__yellow-circle--second" cx="565" cy="755" r="56" fill="#ffc107" />
                        <circle cx="280" cy="328" r="50" fill="#a665ff" />
                        <circle class='labs-hero-anim__purple-circle' cx="280" cy="328" r="50" fill="#a665ff" />
                        <circle cx="280" cy="652" r="50" fill="#a665ff" />
                    </g>
                    <g>
                        <circle cx="280" cy="180" r="40" fill="#f1514b" />
                        <circle cx="200" cy="413" r="50" fill="#43cdac" />
                        <circle cx="200" cy="573" r="50" fill="#43cdac" />
                        <circle cx="440" cy="330" r="50" fill="#43cdac" />
                        <circle cx="524" cy="409" r="50" fill="#43cdac" />
                        <circle cx="440" cy="492" r="50" fill="#43cdac" />
                        <circle cx="580" cy="611" r="50" fill="#43cdac" />
                        <circle cx="440" cy="410" r="82" stroke="#a769ff" stroke-width="40" fill="transparent" />
                    </g>
                </svg>

.labs-hero-anim__yellow-circle--first {
        animation: yellow-circle 2s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
    }

    .labs-hero-anim__yellow-circle--second {
        animation: yellow-circle-reverse 2s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
    }

    .labs-hero-anim__purple-circle {
        animation: purple-circle 3s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
    }

    .labs-hero-anim__green-circle--first {
        animation: green-circle 1.4s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
    }

    .labs-hero-anim__green-circle--second {
        animation: green-circle 1.65s infinite alternate cubic-bezier(0.77, 0, 0.175, 1);
        animation-delay: 0.3s;
    }

@keyframes yellow-circle {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(130px, 130px);
    }
}

@keyframes yellow-circle-reverse {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-130px, -130px);
    }
}

@keyframes purple-circle {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(324px);
    }
}

@keyframes green-circle {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(104px);
    }
}