* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(black 5%, darkred);
}

div {
    position: absolute;
    width: 560px;
    height: 560px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* background: black; */
}

span {
    position: absolute;
    width: 180px;
    height: 280px;
    border-radius: 50%;
    /* background: salmon; */
    overflow: hidden;
    transform-origin: bottom;
    transform: rotateZ(calc(36deg * var(--i)));
}


h1 {
    position: absolute;
    width: 0%;
    height: 0%;
    border: 1.2px solid;
    border-color: deeppink deeppink transparent deeppink;
    border-radius: 50%;
    background: linear-gradient(deeppink 5%, transparent);
    filter: blur(2px);
    animation: animate 10s ease-out infinite forwards;
    animation-delay: 1s;
}

@keyframes animate {
    0% {
        width: 0%;
        height: 0%;
    }
    100% {
        width: 100%;
        height: 100%;
    }
}