:doodle {
@grid: 3 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 3 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 5 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 5 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4483-.9993.9993-.9993c.5511 0 .9993.4483.9993.9993.0001.5511-.4482.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4483.9993.9993 0 .5511-.4483.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 00-.1521-.5676.416.416 0 00-.5676.1521l-2.0223 3.503C15.5902 8.2439 13.8533 7.8508 12 7.8508s-3.5902.3931-5.1367 1.0989L4.841 5.4467a.4161.4161 0 00-.5677-.1521.4157.4157 0 00-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3435-4.1021-2.6892-7.5743-6.1185-9.4396");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 5 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 4 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M24 24H0V0h24L12 12Z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 4 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M14.314 0L2.3 12 6 15.7 21.684.013h-7.357zm.014 11.072L7.857 17.53l6.47 6.47H21.7l-6.46-6.468 6.46-6.46h-7.37z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 3 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 3 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 4 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}
:doodle {
@grid: 3 / 100vw;
}
background: @pick(
#448AFF, #83B9FF, #FF6D00, #FF9E40
);
@size: 6vmin;
@place-cell: 51vw 50%;
scale: 1;
transform: translate(
@rand(-48vw, 48vw),
@rand(-48vh, 48vh)
);
clip-path:path("M12,18.08C5.37,18.08 0,15.36 0,12C0,8.64 5.37,5.92 12,5.92C18.63,5.92 24,8.64 24,12C24,15.36 18.63,18.08 12,18.08M6.81,10.13C7.35,10.13 7.72,10.23 7.9,10.44C8.08,10.64 8.12,11 8.03,11.47C7.93,12 7.74,12.34 7.45,12.56C7.17,12.78 6.74,12.89 6.16,12.89H5.29L5.82,10.13H6.81M3.31,15.68H4.75L5.09,13.93H6.32C6.86,13.93 7.3,13.87 7.65,13.76C8,13.64 8.32,13.45 8.61,13.18C8.85,12.96 9.04,12.72 9.19,12.45C9.34,12.19 9.45,11.89 9.5,11.57C9.66,10.79 9.55,10.18 9.17,9.75C8.78,9.31 8.18,9.1 7.35,9.1H4.59L3.31,15.68M10.56,7.35L9.28,13.93H10.7L11.44,10.16H12.58C12.94,10.16 13.18,10.22 13.29,10.34C13.4,10.46 13.42,10.68 13.36,11L12.79,13.93H14.24L14.83,10.86C14.96,10.24 14.86,9.79 14.56,9.5C14.26,9.23 13.71,9.1 12.91,9.1H11.64L12,7.35H10.56M18,10.13C18.55,10.13 18.91,10.23 19.09,10.44C19.27,10.64 19.31,11 19.22,11.47C19.12,12 18.93,12.34 18.65,12.56C18.36,12.78 17.93,12.89 17.35,12.89H16.5L17,10.13H18M14.5,15.68H15.94L16.28,13.93H17.5C18.05,13.93 18.5,13.87 18.85,13.76C19.2,13.64 19.5,13.45 19.8,13.18C20.04,12.96 20.24,12.72 20.38,12.45C20.53,12.19 20.64,11.89 20.7,11.57C20.85,10.79 20.74,10.18 20.36,9.75C20,9.31 19.37,9.1 18.54,9.1H15.79L14.5,15.68Z");
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-duration: calc(@rand(2s, 5s, .1));
animation-delay: calc(@rand(-5s, -1s, .1));
animation-timing-function:
cubic-bezier(.84, .02, 1, 1);
@keyframes explosion {
0% { opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(0, 0); }
}