Flutter Cloom Clock HTML, CSS, JavaScript Animation - HTML Real Time Editor Do It Yourself

Type in your code below

<!DOCTYPE html>
<html>
<head>
<title>Minimal HTML Page</title>
<style>
body {
background-color: darkblue;
}
    .topins, .bottomins, .dots, .middleins {
    animation: 1s cubic-bezier(0,1.11,0,.95) forwards alternate;
    transform-origin: center;
        transform-box: fill-box;
        
    }
    .dots{
         animation-name: dots;
         animation-delay: .03s;
         transform: scale(.1);
         opacity: 0;
    }
    
    .middleins {
     transform: translate(50%, -30%);
     opacity: 0;
     animation-name: middleins;
     animation-delay: .3s;
    }
    
    .topins {
    transform: rotate(-55deg) translate(-55px, 0);
   animation-name: topins;
   transform-origin: center;
    }
    
    .bottomins{
    animation-delay: .05s;
    animation-name: bottomins;
    transform: translate(-190%);    
    opacity: 0;
    }
    
    @keyframes dots {
    50%, 100% {
    transform: scale(1);
    opacity: 1;
    }
    }
    @keyframes topins {
    33% {
    opacity: 1;
    }
    50%, 100% {
    transform: rotate(0) translate(0,0);
    transform-origin: 
}
    }
     @keyframes middleins {
    50%, 100% {
    transform: translate(0,0);
    opacity: 1;
    }
    }
    @keyframes bottomins {
    50%, 100% {
    transform: translate(0,0);
    opacity: 1;
    }
    }
    </style>
</head>
<body>
<svg fill="none" height="286" viewbox="0 0 308 286" width="208" xmlns="http://www.w3.org/2000/svg">
<circle class="dots" cx="165" cy="86" fill="url(#paint0_linear)" r="36"></circle>
<path class="middleins" clip-rule="evenodd" d="M180.167 104.288C182.217 120.235 189.31 175.4 136.989 195.928C88.7415 214.857 91.0769 213.171 94.1918 211.625C63.2132 224.025 26.194 238.824 27.051 238.386C27.2529 238.283 27.0027 236.873 26.5742 234.459C23.8864 219.318 14.1822 164.651 64.9873 144.774C116.8 124.502 111.21 127.138 109.113 128.067C141.226 115.239 180.878 99.4204 179.865 99.9226C179.622 100.043 179.824 101.615 180.167 104.288Z" fill="url(#paint1_linear)" fill-rule="evenodd"></path>
<path class="bottomins" d="M68.5353 212.537C18.1047 212.922 13.6005 285.125 11.5043 285.304C9.40811 285.484 207.47 282.694 207.47 282.694L206.511 210.699C206.511 210.699 118.966 212.151 68.5353 212.537Z" fill="url(#paint2_linear)"></path>
<path class="topins" clip-rule="evenodd" d="M18 30.8002C35.1529 12.2499 64.7196 0 98.3175 0C131.558 0 160.852 11.9905 178.083 30.2098L140.087 80.2888C128.679 70.1267 113.927 64 97.8175 64C81.7076 64 66.9562 70.1267 55.5482 80.2889L18 30.8002Z" fill="url(#paint3_linear)" fill-opacity="0.87" fill-rule="evenodd"></path>
<defs>
<lineargradient gradientunits="userSpaceOnUse" id="paint0_linear" x1="154" x2="201" y1="109" y2="63">
<stop offset="0.307292" stop-color="#F9B851" stop-opacity="0.74"></stop>
<stop offset="0.909827" stop-color="#C4C4C4" stop-opacity="0"></stop>
</lineargradient>
<lineargradient gradientunits="userSpaceOnUse" id="paint1_linear" x1="193.296" x2="66.068" y1="133.531" y2="198.047">
<stop offset="0.208333" stop-color="#EFAE52" stop-opacity="0.9"></stop>
<stop offset="0.970799" stop-color="#F9B851" stop-opacity="0.29"></stop>
</lineargradient>
<lineargradient gradientunits="userSpaceOnUse" id="paint2_linear" x1="48.2713" x2="250.008" y1="268.811" y2="210.119">
<stop offset="0.208333" stop-color="#EFAE52" stop-opacity="0.62"></stop>
<stop offset="0.586399" stop-color="#F9B851" stop-opacity="0.14"></stop>
</lineargradient>
<lineargradient gradientunits="userSpaceOnUse" id="paint3_linear" x1="48" x2="196" y1="40" y2="17">
<stop offset="0.39062" stop-color="#F9B851"></stop>
<stop offset="1" stop-color="#F9B851" stop-opacity="0.39"></stop>
</lineargradient>
</defs>
</svg>
</body>
</html>