<css-doodle grid="30x30">

    :doodle {

        @size: 100vw 100vmin;

    }

    :container {

        perspective: 500px;

        transform-style: preserve-3d;

        transform: rotate3d(@r(-1.5, 1.5), @r(-1.5, 1.5), @r(-1.5, 1.5), @r(0, 30)deg);

    }

    position: absolute;

    top: 0;

    left: 0;

    width: 2px;

    height: 2px;

    border-radius: 50%;

    top: @r(50, 50)%;

    left: @r(50, 50)%;

    background: hsl(@rn(160, 170, 3), @r(90%, 99%), @rn(50%, 70%));

    animation: move @r(5, 30)s infinite @r(-30, -15)s @p(linear, ease-in, ease-in-out);

    transform: scale(@rn(.1, 1)) rotate(0) translate3d(@r(-60vmin, 60vmin), @r(-60vmin, 60vmin), @r(-1500, -2000)px);

    box-shadow: 

    0 0 0.5px #fff,

    0 0 2px #fff,

    0 0 5px #fff; 

    @keyframes move {

        100% {

            transform: scale(10) rotate(1080deg) translate3d(0, 0, @r(710, 850)px);

        }

    }

</css-doodle>