-
: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);
}