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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 40px;
    -webkit-box-reflect: below 2px linear-gradient(transparent, #0004) ;
}

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #00f376 10%, transparent 10%, transparent 50%, #00f376 50%, #00f376, transparent 60%, transparent 100%), linear-gradient(135deg, #00f37666 10%, transparent 10%, transparent 50%, #00f37666 50%, #00f37666, transparent 60%, transparent 100%);
    background-size: 40px 40px;
    filter: hue-rotate(calc(var(--i) * 90deg));
    transform: rotate(calc(var(--i) * 90deg));
    animation: animate 1s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 40px;
    }
    100%
    {
        background-position: 0px;
    }
}