Draw an irregular gradient dynamic circle with css animation

This is a gif animation, it takes a long time to load, please be patient

how to draw a circle with div

Div is originally a square. If you want to turn it into a circle, you need to use the border-radius attribute to make the element rounded. Different values ​​​​are set, and there will be different rounded corners.

Let the 4 corners become rounded corners of different sizes: a formula is needed

The sum of the same colors is equal to 100, and the transition between corners will become smoother

code display

.box {
            width: 300px;
            height: 300px;
            background: pink;
            /* color: aquamarine; */
            /* 创建一个表示两种或多种颜色线性渐变的图片 
                基于0度逆时针旋转100deg，逆时针旋转pink从右边开始
                过渡起始位置0%开始让pink和aquamarine之间产生颜色渐变效果
                过渡起始位置50%开始让yellowgreen和yellowgreen之间产生颜色渐变效果
            */
            background-image: linear-gradient(-100deg, pink 0%, yellowgreen 50%, aquamarine 100%);
            /* 圆的border-radius恒速过渡 */
            transition: border-radius 3s linear;
            /* 让4个角都变成大小不一的圆角
                相同的颜色加起来的和等于100
            */
            border-radius: 60% 40% 50% 50% / 35% 45% 55% 65%;
            /* 50s一次无限次循环 */
            animation: go 50s infinite;

             /* border-radius:左上，右上，右下，左下
                border-top-left-radius
                border-top-right-radius
                border-bottom-right-radius
                border-bottom-left-radius
            */
        }
@keyframes go {
            0% {

            border-radius: 60% 40%

 50% 50% / 35% 45% 55% 65%;
            }
            25% {
                border-radius: 45% 55% 37% 63% / 56% 36% 54% 44%;
            }
            50% {
                border-radius: 59% 41% 68% 32% / 48% 52% 48% 62%;
            }
            75% {
                border-radius: 50% 50% 39% 61% / 61% 69% 31% 39%;
            }
        }