Draw animated shapes

                <section class="container">
                    <div class="frame"> 
                        <div class="box">
                            <span class="one h6"></span>
                            <span class="two h3"></span>
                        </div>
                    </div>
                    <div class="frame">
                        <div class="box">
                            <span class="one h1"></span>
                            <span class="two h4"></span>
                        </div>
                    </div>
                    <div class="frame">
                        <div class="box">
                            <span class="one h5"></span>
                            <span class="two h2"></span>
                        </div>
                    </div>
                </section>
                <style>
                    .container{ display:flex; justify-content:center; align-items:flex-start; margin-top: 5vw;}
                    .frame{position:absolute; width:11.1vw;height:6.1vw;}
                    .frame:nth-of-type(2){transform:rotate(60deg)}
                    .frame:nth-of-type(3){transform:rotate(-60deg)}
                    .box{width:100%;height:100%;position:relative}
                    .box span{ position:absolute; width:0.5vw;height:0%; background:skyblue;z-index:999999;}
                    .h1{left:0; animation: load1 7.2s ease infinite;}
                    .h2{right:0; animation: load2 7.2s ease .6s infinite;}
                    .h3{right:0; animation: load3 7.2s ease 1.2s infinite;}
                    .h4{right:0; animation: load4 7.2s ease 1.8s infinite;}
                    .h5{left:0; animation: load5 7.2s ease 2.4s infinite;}
                    .h6{left:0; animation: load6 7.2s ease 3s infinite; }
                    @keyframes load1 {
                        0%{bottom:0;height:0}
                        6.944444444%{bottom:0;height:100%}
                        50%{top:0;height:100%}
                        59.944444433%{top:0;height:0}
                        /* 91.6666667%{top:0;height:0%;} */
                    }
        
                    @keyframes load2 {
                        0%{top:0;height:0}
                        6.944444444%{top:0;height:100%}
                        50%{bottom:0;height:100%}
                        59.944444433%{bottom:0;height:0}
                        /* 91.6666667%{bottom:0;height:0%} */
                    }
        
                    @keyframes load3 {
                        0%{top:0;height:0}
                        6.944444444%{top:0;height:100%}
                        50%{bottom:0;height:100%}
                        59.94444443%{bottom:0;height:0}
                        /* 91.6666667%{bottom:0;height:0%;} */
                    }
        
                    @keyframes load4 {
                        0%{top:0;height:0}
                        6.944444444%{top:0;height:100%}
                        50%{bottom:0;height:100%}
                        59.94444443%{bottom:0;height:0}
                        /*   91.6666667%{bottom:0;height:0%;} */
                    }
        
                    @keyframes load5 {
                        0%{bottom:0;height:0}
                        6.944444444%{bottom:0;height:100%}
                        50%{top:0;height:100%}
                        59.94444443%{top:0;height:0}
                        /*   91.6666667%{top:0;height:0%;} */
                    }
        
                    @keyframes load6 {
                        0%{bottom:0;height:0}
                        6.944444444%{bottom:0;height:100%}
                        50%{top:0;height:100%}
                        59.94444443%{top:0;height:0}
                        /*   91.6666667%{top:0;height:0%;} */
                    }
                </style>
            

                <div class="container1">
                    <div class="hexagone animate">
                        <div class="top">
                            <div class="face"></div>
                            <div class="face"></div>
                            <div class="face">top</div>
                        </div>
                        <div class="bottom">
                            <div class="face"></div>
                            <div class="face"></div>
                            <div class="face">bottom</div>
                        </div>
                        <div class="side-faces">
                            <div class="side">side 1</div>
                            <div class="side">side 2</div>
                            <div class="side">side 3</div>
                            <div class="side">side 4</div>
                            <div class="side">side 5</div>
                            <div class="side">side 6</div>
                        </div>
                    </div>
                </div>
                <style>
                    .container1 {padding-top: 5vw; width: 100%; height: 100%; position: relative; perspective: 1000px; 
                        perspective-origin: 50% 50%;}
                    .hexagone { width: 15vw; height: 15vw; margin: auto; position: relative; transform-style: preserve-3d;}
                    .side-faces {transform-style: preserve-3d;}
                    .top, .bottom { position: absolute; line-height: 15vw; text-align: center;}
                    .face { position: absolute; width: 11vw; height: 6.3vw; background: #fff600; box-shadow: 
                        inset  0.6vw  0 0.6vw -0.6vw black, inset  -0.6vw  0 0.6vw -0.6vw black;}
                    .bottom .face {background: #ff5132;}
                    .face:nth-child(2) {transform: rotate(60deg);}
                    .face:nth-child(3) {transform: rotate(120deg);}
                    .side {width: 11vw; height: 6.3vw; position: absolute; background: linear-gradient(to right, 
                        rgba(255,81,50,1) 0%,rgba(255,246,0,1) 100%); text-align: center;
                    line-height: 6vw; box-shadow: 0 0 0.6vw rgba(0,0,0,1) inset;}
                    .top {transform: translateZ(5.5vw);}
                    .bottom {transform: rotateZ(60deg) rotateX(180deg) translateZ(5.5vw);}
                    .side:nth-child(1) {transform: rotateY(-90deg) translateZ(5.5vw);}
                    .side:nth-child(2) {transform: rotateY(-90deg) rotateX(60deg) translateZ(5.5vw);}
                    .side:nth-child(3) {transform: rotateZ(180deg) rotateY(-90deg) rotateX(-60deg) translateZ(5.5vw);}
                    .side:nth-child(4) {transform: rotateZ(180deg) rotateY(-90deg) translateZ(5.5vw);}
                    .side:nth-child(5) {transform: rotateZ(180deg) rotateY(-90deg) rotateX(60deg) translateZ(5.5vw);}
                    .side:nth-child(6) {transform: rotateY(-90deg) rotateX(-60deg) translateZ(5.5vw);}
        
                    @-webkit-keyframes spinningH {
                        from {transform: rotateX(0deg) rotateY(0deg);}
                        to{transform: rotateX(720deg) rotateY(360deg);}
                    }
        
                    @keyframes spinningH {
                        from {transform: rotateX(0deg) rotateY(0deg);}
                        to{transform: rotateX(720deg) rotateY(360deg);}
                    }
        
                    .animate {-webkit-animation : spinningH 12s infinite linear; -moz-animation : spinningH 12s infinite linear;
                         -o-animation : spinningH 12s infinite linear; -ms-animation: spinningH 12s infinite linear;
                          animation : spinningH 12s infinite linear;}
                </style>
            

                <div class="frame-2">
                    <div class="shape-holder">
                        <div class="shape hexagon">
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                        </div>
                    </div>
                    
                    <div class="shape-holder">
                        <div class="shape throwing-star">
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                            <div class="slice"></div>
                        </div>
                    </div>
                </div>
                <style>
                    .frame-2{display: flex;	justify-content: center; align-items: center; min-height: 50vh;	
                        width: 45vw;flex-wrap: wrap; background-color: transparent;}
                    .shape-holder {font-size: 10vw; margin: 2vw;}
                    .shape {width: 24vw; height: 24vw; margin-right: 0vw;background-color: #ff6a6a; position: relative; 
                        border-radius: 50%;}
                    .shape .slice {position: absolute;  transform-origin: left bottom; left: 50%;}
                    .hexagon .slice {border-bottom: 4.7vw solid transparent; border-left: 8.5vw solid #666;
                         border-top: 5vw solid transparent; top: 10%; transition-timing-function: ease-in;}
                    .throwing-star .slice { border-bottom: 3vw solid transparent;  
                        border-left: 8vw solid #666; border-top: 3vw solid transparent;  top: 22%;
                        transition-timing-function: cubic-bezier(.46,.8,.08,1.44);}
        
                    /* hexagon resting state */
                    .hexagon .slice:nth-child(1) {border-left-color: #000; transform: rotateZ(0deg) rotateY(0deg) 
                        rotateX(0deg); transition: transform .2s 0s;}
                    .hexagon .slice:nth-child(2) {border-left-color: #333; transform: rotateZ(60deg) rotateY(0deg) 
                        rotateX(0deg); transition: transform .2s .15s;}
                    .hexagon .slice:nth-child(3) {border-left-color: #666; transform: rotateZ(120deg) rotateY(0deg) 
                        rotateX(0deg); transition: transform .2s .3s;}
                    .hexagon .slice:nth-child(4) {border-left-color: #a1a1a1; transform: rotateZ(180deg) rotateY(0deg) 
                        rotateX(0deg); transition: transform .2s .45s;}
                    .hexagon .slice:nth-child(5) {border-left-color: #b1b1b1; transform: rotateZ(240deg) rotateY(0deg) 
                        rotateX(0deg); transition: transform .2s .6s;}
                    .hexagon .slice:nth-child(6) {border-left-color: #c1c1c1; transform: rotateZ(300deg) rotateY(0deg) 
                        rotateX(0deg); transition: transform .2s .75s;}
        
                    /* hexagon hover state */
                    .hexagon:hover .slice:nth-child(1) {transform: rotateZ(0deg) rotateY(-90deg) rotateX(0deg); 
                        transition: transform .3s 1s;}
                    .hexagon:hover .slice:nth-child(2) {transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg); 
                        transition: transform .3s .8s;}
                    .hexagon:hover .slice:nth-child(3) {transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg); 
                        transition: transform .3s .6s;}
                    .hexagon:hover .slice:nth-child(4) {transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg); 
                        transition: transform .3s .4s;}
                    .hexagon:hover .slice:nth-child(5) {transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg); 
                        transition: transform .3s .2s;}
                    .hexagon:hover .slice:nth-child(6) {transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg); 
                        transition: transform .3s 0s;}
        
                    /* throwing-star resting state */
                    .throwing-star .slice:nth-child(1) {border-left-color: #000; transform: rotate(0deg) scale(1);
                         transition: transform .4s 0s;}
                    .throwing-star .slice:nth-child(2) {border-left-color: #333; transform: rotate(60deg) scale(1); 
                        transition: transform .4s .15s;}
                    .throwing-star .slice:nth-child(3) {border-left-color: #666; transform: rotate(120deg) scale(1); 
                        transition: transform .4s .3s;}
                    .throwing-star .slice:nth-child(4) {border-left-color: #a1a1a1; transform: rotate(180deg) scale(1); 
                        transition: transform .4s .45s;}
                    .throwing-star .slice:nth-child(5) {border-left-color: #b1b1b1; transform: rotate(240deg) scale(1); 
                        transition: transform .4s .6s;}
                    .throwing-star .slice:nth-child(6) {border-left-color: #c1c1c1; transform: rotate(300deg) scale(1); 
                        transition: transform .4s .75s;}
        
                    /* throwing-star hover state */
                    .throwing-star:hover .slice:nth-child(1) {transform: rotate(-90deg) scale(0); transition: transform .2s .5s;}
                    .throwing-star:hover .slice:nth-child(2) {transform: rotate(-30deg) scale(0); transition: transform .2s .4s;}
                    .throwing-star:hover .slice:nth-child(3) {transform: rotate(30deg) scale(0); transition: transform .2s .3s;}
                    .throwing-star:hover .slice:nth-child(4) {transform: rotate(90deg) scale(0); transition: transform .2s .2s;}
                    .throwing-star:hover .slice:nth-child(5) {transform: rotate(150deg) scale(0); transition: transform .2s .1s;}
                    .throwing-star:hover .slice:nth-child(6) {transform: rotate(210deg) scale(0); transition: transform .2s 0s; }
                </style>

            

                <div class="frame-3">
                    <div class="hexagon-wrapper">
                        <div class="hexagon">
                            <img src="../images/facebook.png" alt="facebook" width="80%"/>
                        </div>
                    </div>
                    <div class="hexagon-wrapper">
                        <div class="hexagon">
                            <img src="../images/twitter.png" alt="facebook" width="80%"/>
                        </div>
                    </div>
                    <div class="hexagon-wrapper">
                        <div class="hexagon">
                            <img src="../images/insta.png" alt="facebook" width="80%"/>
                        </div>
                    </div>
                </div>
                <style> 
                    .frame-3 {height: 50vh;overflow: hidden;background: linear-gradient(18deg, #e37682, #a58fe9); 
                        display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center;}
                    .hexagon-wrapper {margin: auto; display: flex; text-align: initial; width: 12vw; 
                        height: 12vw; cursor: pointer;}
                    .hexagon-1 {position: relative; width: 46%; height: 80%;  margin: auto; color: white; 
                        background: linear-gradient(-180deg, white, #fda3b2);
                    display: flex; align-content: center; justify-content: center; transition: 0.5s;}
                    .hexagon-1 img {z-index: 1; margin: auto; font-size: 5vw; color: transparent; 
                        background: linear-gradient(45deg, #a58fe9, #e37682);
                    -webkit-background-clip: text; background-clip: text;}
                    .hexagon-1:before, .hexagon:after {position: absolute; content: ""; 
                    background: inherit; height: 100%; width: 100%; border-radius: 0;
                    transition: 0.5s; transform-origin: center; }
                    .hexagon-1:before {transform: rotateZ(60deg);}
                    .hexagon-1:after {transform: rotateZ(-60deg);}
                    .hexagon-1:hover {border-radius: 5vw; transition: 0.5s;}
                    .hexagon-1:hover:before {border-radius: 5vw; transition: 0.5s;}
                    .hexagon-1:hover:after {border-radius: 5vw; transition: 0.5s;}
                </style>
            

                <div class="frame-4">
                    <div class="container-2">
                        <div class="box-2" style="--i:1;"></div>
                        <div class="box-2" style="--i:2;"></div>
                    </div>
                </div>
                <style>
                    .frame-4  * {padding: 0; margin: 0; box-sizing: border-box;}
                    .frame-4 {display: flex; min-height: 45vh; width: 45vw; justify-content: center;
                         align-items: center; background: #000;}
                    .container-2 {position: relative;  display: flex; justify-content: center; 
                        align-items: center; width: 100%;
                    -webkit-box-reflect: below 0.1vw linear-gradient(transparent, #0005);}
                    .container-2 .box-2 {position: relative; width: 25vw; height: 25vw; 
                        background: linear-gradient(45deg, #00f376 10%,transparent 10%,
                    transparent 50%, #00f376 50%,  #00f376 60%, transparent 60%, transparent 100%);
                    background-size: 3vw 3vw;transform: rotate(calc(var(--i) * 90deg));
                    animation: animate 0.3s linear infinite;}
                    @keyframes animate {
                        0% {background-position: 0;}
                        100% {background-position: 3vw;}
                    }
                    @media only screen and (max-width: 768px) {
                    .container-2 .box-2 {width: 15vw; height: 15vw;}
                    }
                    @media only screen and (max-width: 480px) {
                        .container-2 .box-2 { width: 10vw; height: 10vw;}
                    }
                </style>