<css-doodle grid="12x12">

    :doodle {

        position: relative;

        @size: 80vmin;

        gap: 1px;

    }

    background: hsl(@rn(360, 1, 2), @rn(60%, 80%, 3), 80%);

    transform: rotate(@p(0, 90deg, 180deg, 270deg));

    @random {

        border-radius: 0 100% 0 0;

    }

    @random {

        border-radius: 50%;

        border: 10px solid #000;

    }

    @random {

        border-radius: 50%;

        border: 10px solid #000;

        mask: radial-gradient(transparent, transparent 25%, #000 27%, #000);

    }

    @random {

        border: 0;

        border-radius: 0;

        mask: conic-gradient(from 45deg, transparent, transparent 90deg, #000 90deg, #000 180deg, transparent 180deg, transparent 270deg, #000 270deg, #000);

    }

    @random {

        border: 0;

        border-radius: 0;

        mask: linear-gradient(45deg, #000, #000 50%, transparent 50%, transparent);

    }