:doodle {
flex: none;
@grid: 1x24;
@size: 100vmin;
}
--transform: scale(@r(.1, .3)) translateX(@r(-100%, 100%)) translateY(@r(-5%, 30%));
z-index: -1;
color: @pn(#fff, #8b4480, #f9d51e, #36a47b, #7db13c, #ea695c, #0059b2, #74a9c3);
transform-origin: 50% 100%;
transform: var(--transform);
left:200px;
::before {
position: absolute;
bottom: 38vmin;
left: -2vmin;
content: "✿";
font-size: 15vmin;
-webkit-text-stroke: .4vmin;
}
::after {
position: absolute;
bottom: 0;
left: 0;
content: "(";
font-size: 20vmin;
transform: rotate(60deg) skew(60deg) scale(1.2, 1.8);
}
@random {
::after {
content: ")";
left: 1.7vmin;
bottom: -3vmin;
}
}
@nth(5, 10, 15, 20, 24) {
z-index: 1;
color: #fff;
}
@nth(1, 3, 9, 16, 19) {
::after {
bottom: 0;
left: 0;
content: "(";
}
animation: swingLeft @r(1.5, 3)s ease infinite alternate both;
::before {
animation: beforeLeft @lr()s ease infinite alternate both;
}
}
@nth(5, 7, 15, 18, 23) {
::after {
content: ")";
left: 1.7vmin;
bottom: -3vmin;
}
animation: swing @r(1.5, 3)s ease infinite alternate both;
::before {
animation: before @lr()s ease infinite alternate both;
}
}
@keyframes swingLeft {
0% {
transform: var(--transform) rotate(0deg);
}
100% {
transform: var(--transform) rotate(7deg);
}
}
@keyframes beforeLeft {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(7deg);
}
}
@keyframes swing {
0% {
transform: var(--transform) rotate(0deg);
}
100% {
transform: var(--transform) rotate(-7deg);
}
}
@keyframes before {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-7deg);
}
}
:doodle {
flex: none;
@grid: 1x5;
@size: 10vmin;
position: absolute;
}
position: fixed;
top: 100%;
left: @r(10, 40)%;
color: @pn(#fff, #8b4480, #f9d51e, #36a47b, #7db13c, #ea695c, #0059b2, #74a9c3);
::before {
content: "✿";
font-size: @r(1vmin, 5vmin);
animation-direction: @p(reverse, initial);
animation: before @p(2, 3)s linear both infinite @r(0, 6s);
}
animation: move @lp()s linear both infinite @lr();
animation-direction: @p(reverse, initial);
@keyframes move {
0% {
transform: translateX(-@r(-100%, 300%));
}
100% {
transform: translateX(@r(100%, 300%));
}
}
@keyframes before {
0% {
transform: translateY(0%) rotate(0deg);
}
40% {
transform: translateY(-15vmin) rotate(-800deg);
}
50% {
transform: translateY(-20vmin) rotate(-1000deg);
}
60% {
transform: translateY(-25vmin) rotate(-1200deg);
}
100% {
transform: translateY(0%) rotate(-2000deg);
}
}