Emojis as mask images

:doodle { @grid: 5x1 / 100%; mask-image: @svg( ); } @place-cell: center; @size: 100%; @random { filter: drop-shadow(0 0 2px #fff); } background: @m500( radial-gradient( @p(#481380, #7f78d2, #efb1ff, #ffe2ff) 50%, transparent 0 ) @r(100%) @r(100%) / @r(5px) @lr no-repeat );
:doodle { @grid: 50x1 / 100%; mask-image: @svg( ); } @place-cell: @r(100%) @r(100%); :after { content: '❤️'; font-size: @r(18px); color: transparent; text-shadow: @m10( @r(±50px) @r(±50px) 0 @p(#5fdde5, #f4ea8e, #f37121, #d92027) ); }
:doodle { @grid: 32 / 100%; mask-image: @svg( ); } border-radius: 50%; background: @p(#fff, #ffd31d, #ff427f, transparent); --t: scale(@r(.1, .4)) scaleY(4); transform: @var(--t); @keyframes f { from { transform: var(--t) translateY(-400%); } to { transform: var(--t) translateY(400%); } } @random(.2) { animation: f @r(3s, 8s) linear infinite; animation-delay: -@r(10s); }