:doodle { @grid: 45x1 / 40vmin; position: relative; z-index: 1; } :container { transform: translate(50%, 33vmin) } :after, :before { content: ''; @place-cell: center; @size: 100%; background: radial-gradient( @p(#FFFDE1, #FB3569) @r(70%), transparent 0 ) @pn(30% 50%, 70% 50%, 50% 60%) / @r(.1vmin, 5vmin) @lr() no-repeat; } @place-cell: centerr; @size: 100%; will-change: transform; animation: r 4s linear infinite; animation-delay: calc(-4s / @size() * @i()); --translate: translateY(calc(-66vmin / @size() * @i())); @keyframes r { from { transform: var(--translate) rotate(0) } to { transform: var(--translate) rotateZ(-1turn) } }:doodle { @grid: 1x3 / 100vmax; position: absolute; top: 0; left: 0; z-index: 0; } @size: 100% 150%; position: absolute; background: @m(100, ( linear-gradient(transparent, @p( #FFFDE1@repeat(2, @p([0-9a-f])), #FB3569@repeat(2, @p([0-9a-f])) )) @r(0%, 100%) @r(0%, 100%) / @r(1px) @r(23vmin) no-repeat )); will-change: transform; animation: f 20s linear calc(-20s / @size() * @i()) infinite; @keyframes f { from { transform: translateY(-100%) } to { transform: translateY(100%) } }