Skip to content

Instantly share code, notes, and snippets.

@gaffling

gaffling/css_avatar.php

Last active August 31, 2021 19:58
Show Gist options
  • Save gaffling/89bef55434e973cd70c047d189fbe70a to your computer and use it in GitHub Desktop.
Save gaffling/89bef55434e973cd70c047d189fbe70a to your computer and use it in GitHub Desktop.
Download ZIP
[CSS AVATAR] Generate an HtML/CSS Avatar from agiven Name #php #function #avatar
Raw
css_avatar.php
<?php
/* -------------------------------------------------------------------------------- */
/* [CSS AVATAR] Generate an HtML/CSS Avatar from agiven Name #php #function #avatar */
/* -------------------------------------------------------------------------------- */
/**
* CSS_AVATAR() Generate an HtML/CSS Avatar from agiven Name
* @see [css credits] [https://codepen.io/lunamatic/pen/NWbXxaR]
* @param [string] $nick [Name that should generate an avatar (without name it will return only the css)]
* @param [string] $class ['flip', 'stripes' or 'flip stripes']
* @param [string] $size [set the size of the avatar and use scale multiplicator e.g. 0.5 = half default size]
* @return [string] [css and html]
*/
function css_avatar($nick=null, $class=null, $size=.5) {
// helper to avoid returning $css more than once
static $first_run = null;
// remove spaces at the beginning and end
$nick == trim($nick);
// if the nick name has spaces
if (strpos($nick, ' ') !== false) {
// split the nick name at the spaces
$parts = explode(' ', $nick);
// get first part of the nick name
$first = array_shift($parts);
// get last part of the nick name
$last = end($parts);
// get first char from first and last nick name part and change to uppercase
$char1 = mb_strtoupper(mb_substr($first, 0, 1));
$char2 = mb_strtoupper(mb_substr($last, 0, 1));
} else {
$char1 = '';
// without spaces in the nick name get first char and change to uppercase
$char2 = mb_strtoupper(mb_substr($nick, 0, 1));
}
// set CSS only on the first run
if ($first_run === null) {
$css = '
<style type="text/css">
:root {
--ambrosia: #FCDBBA;
--apricot: #FF8652;
--aubergine: #6A2352;
--auburn: #A12F2F;
--banana: #FEE694;
--beetroot: #7F0421;
--berry: #461234;
--blue-tack: #82BFE0;
--blue-gray: #91A2C2;
--blush: #D67B71;
--bronze: #C27940;
--bud: #94C15C;
--burnt-orange: #FF5F00;
--butter: #F2C94C;
--camo: #AAA843;
--cappuccino: #C9B092;
--carmine: #9A133E;
--cerise: #FF0F63;
--champagne: #FCEBD5;
--charcoal: #4F4450;
--chestnut: #81291F;
--chocolate: #8F5D38;
--clay: #7D6050;
--cloud: #F2EFE3;
--coffee: #624739;
--conker: #6F3131;
--coral: #EB4444;
--dove: #C9C5CB;
--dusty-purple: #7D6391;
--dusty-pink: #E4ADAD;
--emerald: #55B95F;
--eucalyptus: #688461;
--fern: #4F8D08;
--forest: #2E644A;
--forget-me-not: #91A7FA;
--fudge: #C28742;
--grassy: #A8D363;
--gray: #98919F;
--green: #62B90A;
--hazelnut: #D08E5A;
--hot-pink: #FF3263;
--ice: #E1EFF8;
--ink: #292C31;
--iron: #6B5C6C;
--lapis: #2B4D8D;
--latte: #A38468;
--leafy: #318553;
--lemon: #EAFC7E;
--lilac: #8E8ADE;
--lime: #73D645;
--limestone: #C9C5B5;
--magenta: #BC2767;
--meadow: #7A9A3E;
--melon: #F2994A;
--midnight: #1B3955;
--mink: #E8C9A1;
--mint: #C4EA70;
--moss: #83A944;
--mushroom: #EDE8D5;
--mustard: #CC9E08;
--navy: #363A57;
--ocean: #206777;
--orange: #FD8A04;
--orchid: #7945BF;
--pale-lemon: #F4FFDC;
--peach: #FFB190;
--petal: #F4E9F3;
--pebble: #B8B4BE;
--pink: #FFC9D8;
--pond-bottom: #264A46;
--posy: #DED7EC;
--powder-blue: #B5D0E0;
--powder-pink: #FBD1D1;
--primrose: #E1F7B0;
--punch: #FF5563;
--purple: #A95AF3;
--purple-slate: #545375;
--rainforest: #25422E;
--raspberry-jam: #3C0D2B;
--robins-egg: #B8DEE0;
--rouge: #CC3737;
--royal: #4169E1;
--ruby: #D1314B;
--sage: #87A376;
--sakura: #FFE4E4;
--salmon: #FF7863;
--sand: #E1BE7C;
--squash: #E96310;
--sea-glass: #7FD1AE;
--sea-foam: #5D998B;
--sea-fog: #758C92;
--slate: #7184A5;
--spearmint: #94E0CF;
--spice: #B54E16;
--spring: #5ACB65;
--strawberry-yogurt: #E4BCAD;
--sun: #FEC305;
--teal: #29879C;
--terracotta: #B76A61;
--twilight: #203763;
--vavavoom: #BF0D0D;
--walnut: #381F19;
--white: #F7F7FC;
--yellow: #FFE03D;
--trans: transparent;
--trans05: rgba(255,255,255,0.05);
--trans1: rgba(255,255,255,0.1);
--trans2: rgba(255,255,255,0.2);
--trans4: rgba(255,255,255,0.4);
--trans5: rgba(255,255,255,0.5);
}
.avatar { font-size:'.(4*$size).'em; height:2em; width:2em; display:inline-block; margin:0.1em; border-radius:1em; }
.avatar.flip { transform:scaleX(-1); }
.avatar.stripes { background-image:repeating-linear-gradient(-45deg,var(--trans),var(--trans) 0.1em,var(--trans05) 0.1em,var(--trans05) 0.2em,var(--trans) 0.2em); }
.avatar.darkmode { filter: invert(1) hue-rotate(180deg); }
.avatar div { position:relative; transform-style:preserve-3d; font-size:1em; }
.avatar *::before,
.avatar *::after { content:""; display:block; position:relative; }
.avatar.letter { float:left; color: var(--mushroom); font-family:monospace; font-size:'.(4.92*$size).'em; background-color: var(--meadow); display:flex; align-items:center; justify-content:center; }
.scallop { background-color: var(--sea-fog); }
.scallop div {
background: conic-gradient(
currentColor 0deg,
currentColor 10deg,
var(--peach) 10deg,
var(--peach) 20deg,
currentColor 20deg,
currentColor 30deg,
var(--peach) 30deg,
var(--peach) 40deg,
currentColor 40deg,
currentColor 50deg,
var(--peach) 50deg,
var(--peach) 60deg,
currentColor 60deg,
currentColor 70deg,
var(--peach) 70deg,
var(--peach) 80deg,
currentColor 80deg,
currentColor 90deg);
background-position: -0.9em -0.1em;
background-size: 2em 2em;
background-clip: padding-box;
border-radius: 0.3em 1em 0.3em 0.2em;
color: var(--ambrosia);
height: 1em;
left: 0.47em;
top: 0.42em;
transform:
rotate(-45deg);
width: 1em;
}
.scallop div::before {
background-clip: padding-box;
border-radius: 0.3em 1em 0.3em 0.2em;
height: 0.89em;
left: -0.01em;
top: -0.04em;
border-top: 0.15em dotted var(--ambrosia);
border-right: 0.15em dotted var(--ambrosia);
width: 0.89em;
}
.scallop div::after {
background: var(--peach);
border-radius: 0.1em/0.2em;
height: 0.5em;
left: -0.13em;
top: -0.55em;
width: 0.8em;
transform:
rotate(45deg)
translateZ(-1em);
}
.wing { background-color: var(--blue-tack); }
.wing div {
background-image:
radial-gradient(
circle at 0em 0em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em);
border-radius: 1em/0.5em;
border-left: 0.33em solid var(--white);
height: 0.31em;
left: 0.44em;
top: 0.8em;
transform:
rotate(-10deg);
width: 1em;
}
.wing div::before {
background-image:
radial-gradient(
circle at 0.2em 0.2em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.32em 0.24em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.445em 0.28em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.56em 0.333em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.69em 0.4em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em);
border-radius: 1em;
height: 0.5em;
left: -0.01em;
top: -0.2em;
transform:
rotate(10deg)
skew(-75deg);
width: 1em;
}
.wing div::after {
background-image:
radial-gradient(
circle at 0.2em 0.19em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.32em 0.24em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.445em 0.28em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.56em 0.333em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.69em 0.4em,
var(--white) 0 0.1em,
var(--trans) 0.105em 1em);
border-radius: 1em;
height: 0.4em;
left: -0.14em;
top: -0.46em;
transform:
rotate(21deg)
skew(-072deg);
width: 1em;
}
.antler { background-color: var(--coffee); }
.antler div {
border-radius: 0.8em/0.6em 0.1em 0.1em 0.1em;
height: 0.5em;
left: 0.44em;
top: 0.9em;
border-top: 0.15em solid var(--hazelnut);
transform:
rotate(-15deg);
width: 0.9em;
}
.antler div::before {
background-image:
radial-gradient(
circle at 0.46em 0,
var(--hazelnut) 0 0.05em,
var(--trans) 0.055em 1em);
border-top: 0.15em solid var(--hazelnut);
border-radius: 0.8em/0.6em 0.1em 0.1em 0.1em;
height: 0.5em;
left: 0.45em;
top: -0.65em;
width: 0.9em;
transform:
rotate(180deg);
}
.antler div::after {
border-bottom: 0.14em solid var(--hazelnut);
border-radius: 0.7em/0.8em;
border-radius: 0.5em 0.5em 0.8em/0.7em 0.6em;
height: 0.5em;
left: 0.87em;
top: -1.38em;
width: 0.5em;
transform:
rotate(15deg);
filter: drop-shadow(-0.4em 0.16em 0 var(--hazelnut));
}
.seagull-foot { background-color: var(--teal); }
.seagull-foot div {
background: var(--sun);
border-radius: 0.05em;
height: 0.8em;
left: 0.94em;
top: 0.35em;
transform:
skew(-5deg)
rotate(5deg)
translateZ(1em);
width: 0.1em;
}
.seagull-foot div::before,
.seagull-foot div::after {
color: var(--sun);
background-image:
radial-gradient(
circle at 0.6em 0.7em,
var(--trans) 0 0.645em,
currentColor 0.65em 0.905em,
currentColor 0.91em 1em,
var(--trans) 0.63em 1em);
border-radius: 0.5em 1em 2em 2em;
height: 0.7em;
left: 0.31em;
top: 0.8em;
width: 0.7em;
}
.seagull-foot div::before {
transform:
rotate(10deg)
skew(50deg);
}
.seagull-foot div::after {
color: var(--butter);
left: -0.1em;
top: 0.4em;
transform:
rotate(47deg)
skew(50deg);
}
.tadpole { background-color: var(--ocean); }
.tadpole div {
background-image:
repeating-radial-gradient(
circle at 0.195em 0.625em,
var(--charcoal) 0 0.03em,
var(--trans) 0.035em 2em),
repeating-radial-gradient(
circle at 0.195em 0.025em,
var(--charcoal) 0 0.03em,
var(--trans) 0.035em 2em),
repeating-radial-gradient(
circle at 0.18em 0.03em,
var(--ink) 0 0.04em,
var(--trans) 0.045em 2em),
repeating-radial-gradient(
circle at 0.26em 0.045em,
var(--ink) 0 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.34em 0.01em,
var(--ink) 0 0.14em,
var(--trans) 0.145em 2em),
repeating-radial-gradient(
circle at 0.32em 0.8em,
var(--ink) 0 0.26em,
var(--trans) 0.265em 2em);
background-position: 0 0.2em;
height: 0.6em;
left: 0.3em;
transform:
rotate(10deg)
skew(-12deg)
translateZ(1em);
top: 0.7em;
width: 0.6em;
}
.tadpole div::before {
border: 0.005em solid var(--trans);
border-bottom: 0.04em solid var(--ink);
border-radius: 120%/100% 0.2em;
height: 0.5em;
left: 0.32em;
transform:
rotate(0deg)
skew(-8deg)
translateZ(1em);
top: -0.3em;
width: 0.9em;
}
.tadpole div::after {
background-image:
radial-gradient(
var(--trans1) 0 0.25em,
var(--trans2) 0.9em);
border-radius: 100%;
height: 0.25em;
left: 0.25em;
transform:
skew(-20deg)
rotate(-6deg)
translateZ(-1em);
top: -0.5em;
width: 1em;
}
.frogspawn { background-color: var(--pond-bottom); }
.frogspawn div {
background-image:
repeating-radial-gradient(
circle at 0.45em 0.9em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.7em 0.77em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.93em 0.5em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.54em 0.68em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.74em 0.61em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.4em 0.54em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.56em 0.48em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.75em 0.38em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em),
repeating-radial-gradient(
circle at 0.6em 0.3em,
var(--walnut) 0 0.015em,
var(--trans1) 0.02em 0.025em,
var(--trans2) 0.075em 0.09em,
var(--trans) 0.095em 2em);
height: 1.2em;
left: 0.4em;
transform:
skew(-5deg)
translateZ(1em);
top: 0.4em;
width: 1.2em;
}
.frogspawn div::before {
background-image:
repeating-radial-gradient(
circle at 0.45em 0.9em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.7em 0.77em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.93em 0.5em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.54em 0.68em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.74em 0.61em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.4em 0.54em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.56em 0.48em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.75em 0.38em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em),
repeating-radial-gradient(
circle at 0.6em 0.3em,
var(--trans2) 0 0.02em,
var(--trans) 0.025em 2em);
height: 1.2em;
left: 0.045em;
top: -0.03em;
width: 1.2em;
}
.slow-worm { background-color: var(--aubergine); }
.slow-worm div {
background-image:
repeating-radial-gradient(
circle at 0.675em 0.09em,
var(--trans) 0 0.03em,
var(--terracotta) 0.035em 0.05em,
var(--trans) 0.055em 2em),
repeating-radial-gradient(
circle at 0.67em 0.07em,
var(--walnut) 0 0.015em,
var(--trans) 0.02em 2em),
repeating-radial-gradient(
circle at 0.69em 0.071em,
var(--clay) 0 0.015em,
var(--trans) 0.02em 2em),
repeating-radial-gradient(
circle at 0.68em 0.082em,
var(--terracotta) 0 0.067em,
var(--trans) 0.07em 2em);
height: 1.2em;
left: 0.3em;
transform:
translateZ(1em);
top: 0.5em;
width: 1.4em;
}
.slow-worm div::before {
border: 0.14em solid var(--terracotta);
border-left: 0.15em solid var(--terracotta);
border-right: 0.12em solid var(--trans);
border-radius: 0.4em 0.2em 0.2em 0.4em;
height: 0.14em;
left: 0.32em;
top: 0;
transform:
translateZ(-1em);
width: 0.17em;
}
.slow-worm div::after {
border: 0.14em solid var(--terracotta);
border-left: 0.4em solid var(--trans);
border-right: 0.17em solid var(--terracotta);
border-radius: 0.4em 0.4em 0.4em 0.2em;
height: 0.26em;
left: 0.26em;
top: -0.14em;
width: 0.32em;
}
.wood-mouse { background-color: var(--eucalyptus); }
.wood-mouse div {
background:
radial-gradient(
circle at 0.71em -0.01em,
var(--terracotta) 0 0.027em,
var(--trans) 0.0275em 2em),
radial-gradient(
circle at 0.7em 0.86em,
var(--coffee) 0 0.037em,
var(--trans) 0.038em 2em),
radial-gradient(
circle at 0.58em 1.1em,
var(--mink) 0 0.12em,
var(--trans) 0.125em 2em),
radial-gradient(
circle at 0.58em -0.1em,
var(--mink) 0 0.12em,
var(--trans) 0.125em 2em),
radial-gradient(
circle at 0.34em 0.96em,
var(--hazelnut) 0 0.36em,
var(--trans) 0.365em 2em),
radial-gradient(
circle at 0.62em 0.68em,
var(--mink) 0 0.10em,
var(--hazelnut) 0.105em 0.12em,
var(--trans) 0.125em 2em),
radial-gradient(
circle at 0.62em 0.86em,
var(--hazelnut) 0 0.18em,
var(--trans) 0.185em 2em),
radial-gradient(
circle at 0.28em 0.05em,
var(--hazelnut) 0 0.28em,
var(--trans) 0.285em 2em);
background-position: 0em 0.6em;
border-radius: 100%;
height: 1em;
left: 0.5em;
top: 0.5em;
transform:
rotate(-10deg)
translateZ(1em);
width: 1em;
}
.wood-mouse div::before {
background:
radial-gradient(
circle at 0.44em 2.22em,
var(--mink) 0 0.24em,
var(--trans) 0.245em 2em),
radial-gradient(
circle at 0.44em -0.22em,
var(--mink) 0 0.24em,
var(--trans) 0.245em 2em);
background-position: 0em 0.86em;
background-size: 2em 2em;
border: 0.005em solid var(--trans);
border-bottom: 0.04em solid var(--mink);
border-radius: 100%;
height: 1em;
left: 0;
top: -0.01em;
transform:
rotate(-5deg)
translateZ(-1em);
width: 1em;
}
.easter-eggs { background-color: var(--powder-blue); }
.easter-eggs div,
.easter-eggs div::before,
.easter-eggs div::after {
background-image:
radial-gradient(
circle at 0.55em 0.2em,
var(--trans2) 0 0.1em,
var(--trans) 0.105em 2em),
repeating-radial-gradient(
circle at -0.2em 0.3em,
var(--sea-glass) 0 0.005em,
var(--sea-foam) 0.01em 0.04em,
var(--sea-glass) 0.045em 0.055em);
border-radius: 1em/0.76em;
height: 0.6em;
left: 0.7em;
top: 0.95em;
transform: rotate(-10deg);
width: 0.76em;
}
.easter-eggs div::before {
background-color: var(--hazelnut);
background-image:
repeating-radial-gradient(
circle at 0.08em 0.08em,
var(--trans) 0 0.006em,
var(--butter) 0.006em 0.016em,
var(--trans) 0.018em 0.09em,
var(--butter) 0.092em 0.12em);
background-size: 0.16em 0.16em;
background-position: 0.12em 0.12em;
left: 0.24em;
top: -0.35em;
transform:
rotate(50deg)
translateZ(-1em);
}
.easter-eggs div::after {
background-color: var(--carmine);
background-image:
repeating-radial-gradient(
circle at 0 0,
var(--trans) 0 0.032em,
var(--ruby) 0.033em 0.06em,
var(--trans) 0.061em 0.2em),
repeating-radial-gradient(
circle at 0.093em 0.093em,
var(--trans) 0 0.032em,
var(--ruby) 0.033em 0.06em,
var(--trans) 0.061em 0.2em);
background-size: 0.1em 0.1em;
left: -0.35em;
top: -0.85em;
transform:
rotate(130deg)
translateZ(-1em);
}
.damselfly { background-color: var(--clay); }
.damselfly div {
background:
radial-gradient(
circle at 0.24em 1.07em,
var(--teal) 0 0.02em,
var(--midnight) 0.16em 0.16em,
var(--trans) 0.165em 2em),
radial-gradient(
circle at 0.24em -0.07em,
var(--teal) 0 0.02em,
var(--midnight) 0.16em 0.16em,
var(--trans) 0.165em 2em),
radial-gradient(
circle at 0.08em 1.02em,
var(--midnight) 0 0.05em,
var(--trans) 0.055em 2em),
radial-gradient(
circle at 0.08em -0.01em,
var(--midnight) 0 0.05em,
var(--trans) 0.055em 2em),
radial-gradient(
circle at 0.07em 0.2em,
var(--trans) 0 0.24em,
var(--midnight) 0.245em 0.26em,
var(--trans) 0.265em 2em),
radial-gradient(
circle at 0.04em 0.14em,
var(--trans) 0 0.2em,
var(--midnight) 0.205em 0.22em,
var(--trans) 0.225em 2em),
radial-gradient(
circle at 0.06em 0.28em,
var(--trans) 0 0.33em,
var(--midnight) 0.335em 0.35em,
var(--trans) 0.355em 2em);
background-position: 0.04em 0.25em;
background-size: 0.55em 1em;
border-radius: 100%;
height: 0.6em;
left: 0.34em;
top: 0.9em;
transform:
rotate(-10deg)
translateZ(1em);
width: 0.6em;
}
.damselfly div::before {
background:
radial-gradient(
circle at 0.64em 0.04em,
var(--ocean) 0,
var(--trans) 0.265em 2em),
radial-gradient(
circle at 0.64em -0.81em,
var(--trans2) 1.1em 1.1em,
var(--trans) 1.105em 2em);
border-radius: 60% 30% 60% 10%;
height: 0.3em;
left: 0.24em;
top: -0.19em;
transform:
rotate(-28deg)
translateZ(1em);
width: 1.1em;
}
.damselfly div::after {
background:
linear-gradient(
var(--midnight) 0,
var(--ocean) 50%,
var(--midnight) 100%);
border-radius: 0.2em;
height: 0.05em;
left: 0.28em;
top: -0.09em;
transform:
rotate(-2deg)
translateZ(-1em);
width: 1.2em;
}
.ant { background-color: var(--bronze); }
.ant div {
background:
linear-gradient(
-18deg,
var(--trans) 0 0.34em,
var(--coffee) 0.35em 0.36em,
var(--trans) 0.37em 1em),
linear-gradient(
-5deg,
var(--trans) 0 0.3em,
var(--coffee) 0.31em 0.32em,
var(--trans) 0.33em 1em),
linear-gradient(
14deg,
var(--trans) 0 0.33em,
var(--coffee) 0.34em 0.35em,
var(--trans) 0.36em 1em);
border-radius: 100%;
height: 0.55em;
left: 0.725em;
top: 0.725em;
transform:
rotate(0deg)
translateZ(1em);
width: 0.55em;
}
.ant div::before {
background:
radial-gradient(
circle at 0.01em 0.28em,
var(--coffee) 0 0.09em,
var(--trans) 0.095em 1em),
radial-gradient(
circle at 0.89em 0.28em,
var(--coffee) 0 0.09em,
var(--trans) 0.095em 1em),
radial-gradient(
circle at 0.01em 0.4em,
var(--coffee) 0 0.05em,
var(--trans) 0.055em 1em),
radial-gradient(
circle at 0.89em 0.4em,
var(--coffee) 0 0.05em,
var(--trans) 0.055em 1em),
radial-gradient(
circle at 0.01em 0.48em,
var(--coffee) 0 0.04em,
var(--trans) 0.045em 1em),
radial-gradient(
circle at 0.89em 0.48em,
var(--coffee) 0 0.04em,
var(--trans) 0.045em 1em),
radial-gradient(
circle at -0.07em 0.68em,
var(--coffee) 0 0.18em,
var(--trans) 0.185em 1em),
radial-gradient(
circle at 0.96em 0.676em,
var(--coffee) 0 0.18em,
var(--trans) 0.185em 1em);
background-position: 0.45em 0;
border-radius: 100%;
height: 0.9em;
left: -0.17em;
top: -0.14em;
transform:
translateZ(1em);
width: 0.9em;
}
.ant div::after {
background-position: 0.45em 0;
border-radius: 100%;
border: 0.01em solid var(--trans);
border-bottom: 0.04em solid var(--coffee);
height: 0.2em;
left: 0.17em;
top: -1.07em;
transform:
translateZ(1em);
width: 0.2em;
}
.grasshopper { background-color: var(--forest); }
.grasshopper div {
background:
radial-gradient(
circle at 0.06em 0.05em,
var(--sage) 0 0.12em,
var(--trans) 0.125em 1em),
radial-gradient(
circle at 0.44em -0.3em,
var(--eucalyptus) 0 0.1em,
var(--sage) 0.5em 0.52em,
var(--trans) 0.525em 1em),
linear-gradient(
-65deg,
var(--trans) 0 0.9em,
var(--eucalyptus) 0.91em 0.92em,
var(--trans) 0.93em 1em),
linear-gradient(
-95deg,
var(--trans) 0 0.9em,
var(--eucalyptus) 0.91em 0.92em,
var(--trans) 0.93em 1em);
border-radius: 20%/100%;
height: 0.32em;
left: 0.5em;
top: 0.95em;
transform:
rotate(20deg)
translateZ(1em);
width: 1.2em;
}
.grasshopper div::before {
background:
radial-gradient(
circle at 0.14em -0.48em,
var(--eucalyptus) 0 0.51em,
var(--trans) 0.515em 1em),
radial-gradient(
circle at -0.28em 0.18em,
var(--eucalyptus) 0 0.34em,
var(--trans) 0.345em 1em),
radial-gradient(
circle at 0.72em 0.18em,
var(--eucalyptus) 0 0.34em,
var(--trans) 0.345em 1em)
;
background-position: 0.08em 0;
background-size: 0.44em 0.4em;
border-radius: 0.02em;
height: 0.4em;
left: 0.33em;
top: -0.02em;
transform:
rotate(60deg)
skew(30deg)
translateZ(1em);
width: 0.4em;
}
.dragonfly { background-color: var(--slate); }
.dragonfly div {
background:
/* abdomen */
radial-gradient(
circle at -0.015em 0.7em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 0.7em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 0.8em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 0.8em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 0.9em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 0.9em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 1.0em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 1.0em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 1.1em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 1.1em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 1.2em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 1.2em,
var(--forest) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 0.01em 1.3em,
var(--forest) 0 0.06em,
var(--trans) 0.065em 1em),
radial-gradient(
circle at 0.99em 1.3em,
var(--forest) 0 0.06em,
var(--trans) 0.065em 1em),
radial-gradient(
circle at -0.015em 0.75em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 0.75em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 0.85em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 0.85em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 0.95em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 0.95em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 1.05em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 1.05em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 1.15em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 1.15em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 1.25em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at 1.015em 1.25em,
var(--pond-bottom) 0 0.085em,
var(--trans) 0.09em 1em),
radial-gradient(
circle at -0.015em 1.34em,
var(--pond-bottom) 0 0.075em,
var(--trans) 0.08em 1em),
radial-gradient(
circle at 1.015em 1.34em,
var(--pond-bottom) 0 0.075em,
var(--trans) 0.08em 1em),
/* eyes */
radial-gradient(
circle at 0.04em 0.34em,
var(--forest) 0 0.065em,
var(--trans) 0.07em 1em),
radial-gradient(
circle at 0.96em 0.34em,
var(--forest) 0 0.065em,
var(--trans) 0.07em 1em),
/* thorax */
radial-gradient(
circle at -0.1em 0.55em,
var(--pond-bottom) 0 0.225em,
var(--trans) 0.23em 1em),
radial-gradient(
circle at 1.1em 0.55em,
var(--pond-bottom) 0 0.225em,
var(--trans) 0.23em 1em),
radial-gradient(
circle at -0.05em 0.39em,
var(--pond-bottom) 0 0.135em,
var(--trans) 0.14em 1em),
radial-gradient(
circle at 1.05em 0.39em,
var(--pond-bottom) 0 0.135em,
var(--trans) 0.14em 1em)
;
background-position: 0.5em;
border-radius: 100%;
height: 1.5em;
left: 0.5em;
top: 0.3em;
transform:
translateZ(1em);
width: 1em;
}
.dragonfly div::before,
.dragonfly div::after {
background-color: var(--pebble);
background-image:
repeating-radial-gradient(
circle at -0.083em 0.05em,
var(--trans) 0 0.03em,
var(--dove) 0.03em 0.035em,
var(--trans) 0.035em),
repeating-radial-gradient(
circle at 0.05em 0.183em,
var(--trans) 0 0.03em,
var(--dove) 0.03em 0.035em,
var(--trans) 0.035em);
background-size: 0.1em 0.1em;
border-radius: 70% 70% 100% 100%;
border-top: 0.01em solid var(--gray);
height: 0.28em;
left: -0.23em;
opacity: 0.5;
top: 0.5em;
transform:
rotate(24deg)
translateZ(1em);
width: 1.5em;
}
.dragonfly div::after {
transform:
rotate(-24deg)
translateZ(1em);
top: 0.18em;
}
.ray { background-color: var(--purple-slate); }
.ray div {
background:
radial-gradient(
circle at 1em 0.5em,
var(--clay) 0 0.15em,
var(--trans) 0.455em 1em),
radial-gradient(
circle at 0.5em 0em,
var(--clay) 0 0.15em,
var(--dusty-purple) 0.45em 0.51em,
var(--trans) 0.515em 1em),
radial-gradient(
circle at 1em 0.5em,
var(--clay) 0 0.15em,
var(--dusty-purple) 0.515em 0.51em,
var(--trans) 0.38em 1em),
radial-gradient(
circle at 0.5em 0.5em,
var(--clay) 0 0.05em,
var(--dusty-purple) 0.25em 0.32em,
var(--trans) 0.325em 1em);
border-radius: 0.08em 0.12em;
height: 1em;
left: 0.5em;
top: 0.5em;
transform:
rotate(45deg)
skew(4deg)
translateZ(1em);
width: 1em;
}
.ray div::before {
background:
radial-gradient(
circle at 2.24em 0.88em,
var(--clay) 0 0.8em,
var(--dusty-purple) 0.91em 0.92em,
var(--trans) 0.925em 1em),
radial-gradient(
circle at -0.84em 0.88em,
var(--clay) 0 0.8em,
var(--dusty-purple) 0.91em 0.92em,
var(--trans) 0.925em 1em);
border-radius: 2em;
background-position: 0.7em;
height: 1.4em;
left: -0.3em;
top: -0.1em;
transform:
rotate(45deg)
translateZ(-1em);
width: 1.4em;
}
.ray div::after {
border: 0em solid var(--bud);
border-left: 0.03em solid var(--navy);
border-right: 0.03em solid var(--navy);
border-radius: 2em;
background-position: 0.7em;
height: 0.1em;
left: 0.65em;
top: -1.25em;
transform:
rotate(45deg)
translateZ(1em);
width: 0.22em;
}
.peacock-feather { background-color: var(--dusty-pink); }
.peacock-feather div {
background:
/* core */
radial-gradient(
circle at 0.02em 0.4em,
var(--navy) 0 0.06em,
var(--royal) 0.08em 0.09em,
var(--trans) 0.095em 1em),
radial-gradient(
circle at 0.98em 0.4em,
var(--navy) 0 0.06em,
var(--royal) 0.08em 0.09em,
var(--trans) 0.095em 1em),
/* greens*/
radial-gradient(
circle at 0.02em 0.42em,
var(--sea-glass) 0 0.01em,
var(--teal) 0.11em 0.13em,
var(--trans) 0.135em 1em),
radial-gradient(
circle at 0.98em 0.42em,
var(--sea-glass) 0 0.01em,
var(--teal) 0.11em 0.13em,
var(--trans) 0.135em 1em),
radial-gradient(
circle at 0.02em 0.43em,
var(--sea-glass) 0 0.01em,
var(--ocean) 0.11em 0.13em,
var(--trans) 0.14em 1em),
radial-gradient(
circle at 0.98em 0.43em,
var(--sea-glass) 0 0.01em,
var(--ocean) 0.11em 0.13em,
var(--trans) 0.14em 1em),
/* gold */
radial-gradient(
circle at -0.05em 0.38em,
var(--sand) 0 0.15em,
var(--hazelnut) 0.245em 0.25em,
var(--chocolate) 0.255em 0.26em,
var(--bud) 0.265em 0.265em,
var(--leafy) 0.3em 0.31em,
var(--trans) 0.38em 1em),
radial-gradient(
circle at 1.05em 0.38em,
var(--sand) 0 0.15em,
var(--hazelnut) 0.245em 0.25em,
var(--chocolate) 0.255em 0.26em,
var(--bud) 0.265em 0.265em,
var(--leafy) 0.3em 0.31em,
var(--trans) 0.38em 1em)
;
background-position: 0.5em;
border-radius: 100%;
height: 1.4em;
left: 0.5em;
top: 0.3em;
transform:
rotate(2deg)
skew(4deg)
translateZ(1em);
width: 1em;
}
.peacock-feather div::before {
background:
/* edges */
repeating-radial-gradient(
circle at -0.05em 0.32em,
var(--trans) 0 0.01em,
var(--forest) 0.014em 0.016em,
var(--pond-bottom) 0.018em 0.02em,
var(--forest) 0.022em 0.024em,
var(--trans) 0.03em 0.036em);
border-left: 0.011em solid var(--walnut);
border-radius: 0 2em 2em 0;
height: 1.4em;
left: 0.5em;
top: 0;
transform:
translateZ(-1em);
width: 0.48em;
}
.peacock-feather div::after {
background:
/* edges */
repeating-radial-gradient(
circle at 0.55em 0.32em,
var(--trans) 0 0.01em,
var(--forest) 0.014em 0.016em,
var(--pond-bottom) 0.018em 0.02em,
var(--forest) 0.022em 0.024em,
var(--trans) 0.03em 0.036em);
border-radius: 2em 0 0 2em;
left: 0.05em;
height: 1.4em;
top: -1.4em;
transform:
translateZ(-1em);
width: 0.48em;
}
.centipede { background-color: var(--terracotta); }
.centipede div {
background:
radial-gradient(
circle at 0.11em 0.125em,
var(--trans) 0 0.1em,
var(--conker) 0.105em 0.12em,
var(--trans) 0.125em 3em);
background-size: 0.22em 0.12em;
background-position: -0.02em 0;
border-radius: 0.06em;
height: 1.05em;
left: 0.65em;
top: 0.5em;
transform:
rotate(12deg)
skew(2deg)
translateZ(1em);
width: 0.62em;
}
.centipede div::before {
background:
radial-gradient(
circle at 0.32em 0.12em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.24em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.36em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.48em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.56em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.64em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.72em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.8em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.88em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 0.96em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 1.04em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 1.12em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.32em 1.18em,
var(--auburn) 0 0.12em,
var(--trans) 0.125em 3em),
radial-gradient(
circle at 0.36em 1.85em,
var(--trans) 0 0.165em,
var(--conker) 0.17em 0.19em,
var(--trans) 0.195em 3em),
radial-gradient(
circle at 0.36em -0.15em,
var(--trans) 0 0.165em,
var(--conker) 0.17em 0.19em,
var(--trans) 0.195em 3em);
background-position: 0 0.16em;
background-size: 0.62em 2em;
height: 1.5em;
left: -0.012em;
opacity: 0.9;
top: -0.28em;
transform:
translateZ(-1em);
width: 0.62em;
}
.centipede div::after {
border: 0.02em solid var(--conker);
border-bottom: 0 solid var(--trans);
border-radius: 0.5em 0.5em 0 0;
height: 0.24em;
left: 0.24em;
top: -0.4em;
transform:
rotate(-15deg);
width: 0.14em;
}
.duckling { background-color: var(--blue-gray); }
.duckling div {
background:
radial-gradient(
circle at 0.9em 0.6em,
var(--yellow) 0 0.2em,
var(--trans) 0.3em 3em),
radial-gradient(
circle at 0.85em 0.6em,
var(--mustard) 0 0.2em,
var(--trans) 0.3em 3em),
radial-gradient(
circle at 0.8em 0.6em,
var(--butter) 0 0.4em,
var(--trans) 0.55em 3em),
radial-gradient(
circle at 0.9em 0.6em,
var(--yellow) 0 0.4em,
var(--trans) 0.55em 3em);
border-radius: 100%;
height: 0.6em;
left: 0.22em;
top: 0.75em;
transform:
rotate(-5deg)
translateZ(1em);
width: 1.6em;
}
.duckling div::before {
background-image:
/* head */
radial-gradient(
circle at 0.29em 0.3em,
var(--coffee) 0 0.03em,
var(--trans) 0.038em 3em),
radial-gradient(
circle at 0.32em 0.3em,
var(--yellow) 0 0.05em,
var(--trans) 0.16em 3em),
radial-gradient(
circle at 0.28em 0.32em,
var(--mustard) 0 0.02em,
var(--trans) 0.1em 3em),
radial-gradient(
circle at 0.35em 0.3em,
var(--yellow) 0 0.18em,
var(--trans) 0.28em 3em),
radial-gradient(
circle at 0.39em 0.3em,
var(--banana) 0 0.18em,
var(--trans) 0.28em 3em),
radial-gradient(
circle at 0.35em 0.32em,
var(--mustard) 0 0.18em,
var(--trans) 0.28em 3em);
border-radius: 100%;
height: 0.7em;
left: 0.24em;
top: -0.14em;
transform:
translateZ(1em);
width: 0.78em;
}
.duckling div::after {
background-color: var(--hazelnut);
border-radius: 100%;
border-bottom: 0.02em solid var(--bronze);
height: 0.09em;
left: 0.26em;
top: -0.53em;
transform:
rotate(-14deg)
translateZ(-1em);
width: 0.28em;
}
.shield-bug { background-color: var(--walnut); }
.shield-bug div {
background:
linear-gradient(
var(--meadow) 0,
var(--clay) 90% 100%);
border-radius: 60%/100%;
border-image-slice: 1;
height: 0.22em;
left: 0.6em;
top: 0.75em;
transform:
rotate(0deg)
translateZ(1em);
width: 0.8em;
}
.shield-bug div::before {
background-image:
/* head */
radial-gradient(
circle at 0.1em 1.7em,
var(--trans) 0 0.145em,
var(--meadow) 0.15em 0.31em,
var(--trans) 0.315em 2em),
radial-gradient(
circle at 0.67em 1.71em,
var(--trans) 0 0.145em,
var(--meadow) 0.15em 0.31em,
var(--trans) 0.315em 2em),
/* body */
radial-gradient(
circle at 0.87em -0.04em,
var(--trans) 0 0.625em,
var(--clay) 0.63em,
var(--trans) 0.905em 2em),
radial-gradient(
circle at -0.11em -0.04em,
var(--trans) 0 0.625em,
var(--clay) 0.63em,
var(--trans) 0.905em 2em),
radial-gradient(
circle at 0.37em 0.32em,
var(--meadow) 0 0.6em,
var(--trans) 0.605em 2em);
border-radius: 100%/140%;
background-position: 0 0.36em;
background-size: 0.78em 2em;
height: 1.2em;
left: 0.02em;
top: -0.18em;
transform:
translateZ(-1em);
width: 0.78em;
}
.shield-bug div::after {
background-image:
linear-gradient(
13deg,
var(--trans) 0 0.1em,
var(--clay) 0.105em 0.13em,
var(--trans) 0.135em 3em),
linear-gradient(
-13deg,
var(--trans) 0 0.1em,
var(--clay) 0.105em 0.13em,
var(--trans) 0.135em 3em);
background-position: 0 0.18em;
border-radius: 1em;
height: 0.32em;
left: -0.2em;
top: -1.56em;
transform:
rotate(0deg)
translateZ(1em);
width: 1.2em;
}
.bunny-face { background-color: var(--dusty-purple); }
.bunny-face div {
background-color: var(--dusty-pink);
background-image:
/* eyes */
radial-gradient(
circle at -0.06em 0.39em,
var(--trans) 0 0.195em,
var(--dusty-pink) 0.2em 0.3em,
var(--trans) 0.305em 2em),
radial-gradient(
circle at 0.76em 0.5em,
var(--trans) 0 0.195em,
var(--dusty-pink) 0.2em 0.3em,
var(--trans) 0.305em 2em),
radial-gradient(
circle at 0.1em 0.38em,
var(--trans5) 0 0.02em,
var(--trans) 0.025em 2em),
radial-gradient(
circle at 0.615em 0.47em,
var(--trans5) 0 0.02em,
var(--trans) 0.025em 2em),
radial-gradient(
circle at 0.12em 0.42em,
var(--walnut) 0 0.08em,
var(--trans) 0.085em 2em),
radial-gradient(
circle at 0.58em 0.495em,
var(--walnut) 0 0.08em,
var(--trans) 0.085em 2em),
/* nose */
radial-gradient(
circle at 0.23em 0.57em,
var(--trans) 0 0.195em,
var(--dusty-pink) 0.2em 0.3em,
var(--trans) 0.305em 2em),
radial-gradient(
circle at 0.42em 0.6em,
var(--trans) 0 0.195em,
var(--dusty-pink) 0.2em 0.3em,
var(--trans) 0.305em 2em),
radial-gradient(
circle at 0.34em 0.48em,
var(--dusty-pink) 0 0.21em,
var(--trans) 0.215em 2em),
radial-gradient(
circle at 0.305em 0.715em,
var(--blush) 0 0.08em,
var(--trans) 0.085em 2em);
border-radius: 100% 80%;
height: 0.88em;
left: 0.67em;
top: 0.95em;
transform:
rotate(-10deg)
translateZ(1em);
width: 0.7em;
}
.bunny-face div::before {
background: var(--pink);
border-radius: 40% 100%;
border: 0.05em solid var(--dusty-pink);
border-right-width: 0.16em;
border-left-width: 0.1em;
height: 0.95em;
left: 0.06em;
top: -0.75em;
transform:
rotate(10deg)
translateZ(1em);
width: 0.12em;
}
.bunny-face div::after {
background: var(--pink);
border-radius: 100% 40%;
border: 0.05em solid var(--dusty-pink);
border-left-width: 0.16em;
border-right-width: 0.1em;
height: 0.95em;
left: 0.55em;
top: -1.66em;
transform:
rotate(22deg)
translateZ(1em);
width: 0.12em;
}
.pet-rock { background-color: var(--forest); }
.pet-rock div {
background-color: var(--gray);
background-image:
radial-gradient(
circle at 0.42em 0.4em,
var(--charcoal) 0 0.03em,
var(--trans) 0.035em 2em),
radial-gradient(
circle at 0.42em 0.42em,
var(--cloud) 0 0.08em,
var(--trans) 0.085em 2em),
radial-gradient(
circle at 0.78em 0.4em,
var(--charcoal) 0 0.03em,
var(--trans) 0.035em 2em),
radial-gradient(
circle at 0.78em 0.4em,
var(--cloud) 0 0.08em,
var(--trans) 0.085em 2em),
radial-gradient(
circle at 0.5em -0.25em,
var(--pebble) 0 1em,
var(--trans) 1.005em 2em);
border-radius: 100% 80% 70%;
border-top: 0.04em solid var(--dove);
height: 0.8em;
left: 0.4em;
top: 0.6em;
transform:
rotate(1deg)
translateZ(1em);
width: 1.2em;
}
.wasp { background-color: var(--sea-fog); }
.wasp div {
background:
/* head */
radial-gradient(
circle at 0.38em 0.5em,
var(--charcoal) 0 0.13em,
var(--trans) 0.135em 2em),
radial-gradient(
circle at 0.38em 0.34em,
var(--yellow) 0 0.08em,
var(--trans) 0.085em 2em),
radial-gradient(
circle at 0.32em 0.32em,
var(--charcoal) 0 0.04em,
var(--trans) 0.045em 2em),
radial-gradient(
circle at 0.44em 0.32em,
var(--charcoal) 0 0.04em,
var(--trans) 0.045em 2em),
/* legs */
linear-gradient(
var(--trans) 0 0.48em,
var(--charcoal) 0.48em 0.5em,
var(--trans) 0.5em 3em),
linear-gradient(
20deg,
var(--trans) 0 0.77em,
var(--charcoal) 0.775em 0.79em,
var(--trans) 0.795em 3em),
linear-gradient(
-20deg,
var(--trans) 0 0.77em,
var(--charcoal) 0.775em 0.79em,
var(--trans) 0.795em 3em);
background-position: -0.1em 0;
background-size: 0.7em 1.2em;
border: 0.2em solid var(--trans);
border-top-width: 0;
border-bottom-width: 0;
border-background:
radial-gradient(
circle at 0.5em 0.65em,
var(--charcoal) 0 0.1em,
var(--trans) 0.405em 0.9em);
border-radius: 100%;
height: 1.2em;
left: 0.5em;
top: 0.3em;
transform:
rotate(10deg)
translateZ(1em);
width: 0.5em;
}
.wasp div::before {
background:
repeating-radial-gradient(
circle at 0.12em 0.4em,
var(--trans) 0 0.2em,
var(--yellow) 0.205em 0.28em,
var(--trans) 0.285em 0.8em),
repeating-radial-gradient(
circle at 0.88em 0.4em,
var(--trans) 0 0.2em,
var(--yellow) 0.205em 0.28em,
var(--trans) 0.285em 0.8em),
repeating-radial-gradient(
circle at 0.12em 0.36em,
var(--trans) 0 0.2em,
var(--charcoal) 0.205em 0.28em,
var(--trans) 0.285em 0.8em),
repeating-radial-gradient(
circle at 0.88em 0.36em,
var(--trans) 0 0.2em,
var(--charcoal) 0.205em 0.28em,
var(--trans) 0.285em 0.8em),
repeating-radial-gradient(
circle at 0.12em 0.48em,
var(--trans) 0 0.16em,
var(--yellow) 0.165em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0.88em 0.48em,
var(--trans) 0 0.16em,
var(--yellow) 0.165em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0.12em 0.43em,
var(--trans) 0 0.16em,
var(--charcoal) 0.165em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0.88em 0.43em,
var(--trans) 0 0.16em,
var(--charcoal) 0.165em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0.12em 0.48em,
var(--trans) 0 0.12em,
var(--charcoal) 0.125em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0.88em 0.48em,
var(--trans) 0 0.12em,
var(--charcoal) 0.125em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0.12em 0.55em,
var(--trans) 0 0.12em,
var(--yellow) 0.125em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0.88em 0.55em,
var(--trans) 0 0.12em,
var(--yellow) 0.125em 0.24em,
var(--trans) 0.245em 0.5em),
repeating-radial-gradient(
circle at 0 0.1em,
var(--yellow) 0 0.2em,
var(--trans) 0.205em 2em),
repeating-radial-gradient(
circle at 1em 0.1em,
var(--yellow) 0 0.2em,
var(--trans) 0.205em 2em);
background-position: 0.13em;
background-size: 1em 0.52em;
border-radius: 0.3em 0.3em 100% 100%;
height: 0.5em;
left: 0.15em;
top: 0.62em;
transform:
rotate(-3deg)
translateZ(-1em);
width: 0.26em;
}
.wasp div::after {
background:
radial-gradient(
circle at -2em 0.4em,
var(--robins-egg) 0 2.12em,
var(--trans) 2.125em 2em),
radial-gradient(
circle at 2.34em 0.4em,
var(--robins-egg) 0 2.12em,
var(--trans) 2.125em 2em);
border-radius: 100% 100% 60% 60%;
height: 1.1em;
left: 0.09em;
opacity: 0.6;
top: -0.14em;
transform:
rotate(2deg)
translateZ(1em);
width: 0.34em;
}
.robin { background-color: var(--powder-pink); }
.robin div {
background-image:
/* eye */
repeating-radial-gradient(
circle at 0.3em 1.13em,
var(--walnut) 0 0.02em,
var(--trans) 0.025em 3em),
/* head and body */
repeating-radial-gradient(
circle at 0.3em 1.24em,
var(--spice) 0 0.11em,
var(--trans) 0.15em 3em),
repeating-radial-gradient(
circle at 0.4em 1.32em,
var(--spice) 0 0.16em,
var(--gray) 0.22em 0.24em,
var(--trans) 0.26em 3em),
repeating-radial-gradient(
circle at 0.5em 1.58em,
var(--latte) 0 0.5em,
var(--trans) 0.505em 3em),
repeating-radial-gradient(
circle at 0.38em 1.28em,
var(--latte) 0 0.23em,
var(--trans) 0.235em 3em),
/* red breast */
repeating-radial-gradient(
circle at 0.42em 0.12em,
var(--spice) 0 0.17em,
var(--trans) 0.175em 3em),
repeating-radial-gradient(
circle at 0.405em 0.1em,
var(--spice) 0 0.17em,
var(--trans) 0.175em 3em),
repeating-radial-gradient(
circle at 0.48em 0.12em,
var(--spice) 0 0.10em,
var(--gray) 0.16em 0.16em,
var(--trans) 0.22em 3em),
repeating-radial-gradient(
circle at 0.2em -0.01em,
var(--spice) 0 0.04em,
var(--trans) 0.045em 3em),
repeating-radial-gradient(
circle at 0.25em 0,
var(--spice) 0 0.04em,
var(--trans) 0.045em 3em),
repeating-radial-gradient(
circle at 0.52em 0.07em,
var(--latte) 0 0.28em,
var(--trans) 0.285em 3em),
/* tail */
repeating-radial-gradient(
circle at 0.7em 2.55em,
var(--latte) 0 1.4em,
var(--trans) 1.405em 3em),
repeating-radial-gradient(
circle at 0.75em -1.35em,
var(--latte) 0 1.4em,
var(--trans) 1.405em 3em),
/* beak */
repeating-radial-gradient(
circle at 0.17em 1.33em,
var(--coffee) 0 0.15em,
var(--trans) 0.155em 3em),
repeating-radial-gradient(
circle at 0.17em -0.14em,
var(--walnut) 0 0.15em,
var(--trans) 0.155em 3em);
background-position: 0 0.5em;
border-radius: 100%;
height: 1.2em;
left: 0.45em;
top: 0.4em;
transform:
rotate(20deg)
translateZ(1em);
width: 1.05em;
}
.robin div::before {
border-radius: 1em;
border: 0.05em solid var(--trans);
border-right: 0.05em solid var(--spice);
height: 0.15em;
left: 0.033em;
top: 0.47em;
transform:
rotate(-35deg)
translateZ(-1em);
width: 0.15em;
}
.robin div::after {
border: 0.028em solid var(--clay);
border-bottom: 0.0em solid var(--trans);
border-radius: 0.12em 0.12em 0 0;
height: 0.22em;
left: 0.55em;
top: 0.5em;
transform:
rotate(-10deg)
skew(-25deg)
translateZ(-1em);
width: 0.06em;
}
.crow-flying { background-color: var(--peach); }
.crow-flying div {
background:
radial-gradient(
circle at 0.5em 0.65em,
var(--charcoal) 0 0.4em,
var(--trans) 0.405em 0.9em);
background-position: 0 0.7em;
border-radius: 100%;
height: 0.42em;
left: 0.6em;
top: 0.8em;
transform:
rotate(-10deg)
skew(10deg)
translateZ(-1em);
width: 1.2em;
}
.crow-flying div::before {
border: 0.4em solid var(--trans);
border-right: 0.16em solid var(--charcoal);
border-radius: 100%;
height: 0.42em;
left: 0em;
top: -0.4em;
transform:
rotate(0deg)
skew(10deg)
translateZ(-1em);
width: 0.12em;
}
.crow-flying div::after {
border: 0.14em solid var(--trans);
border-right: 0.14em solid var(--charcoal);
border-bottom: 0.14em solid var(--charcoal);
border-radius: 0.2em;
height: 0em;
left: -0.05em;
top: -1.1em;
transform:
rotate(-45deg)
skew(10deg)
translateZ(-1em);
width: 0em;
}
.seagull { background-color: var(--lapis); }
.seagull div {
background: var(--slate);
background-position: 0.2em;
border-radius: 100%;
height: 0.34em;
left: 0.8em;
opacity: 0.8;
top: 0.7em;
transform:
rotate(20deg)
skew(10deg);
width: 0.2em;
}
.seagull div::before {
background: var(--slate);
border-radius: 0.1em;
box-shadow: 0.7em 0.3em 0 var(--slate);
height: 0.2em;
left: -0.52em;
top: 0em;
transform:
rotate(-30deg)
skew(-30deg);
width: 0.4em;
}
.seagull div::after {
background: var(--slate);
border-radius: 0.1em;
box-shadow: 0.7em -0.305em 0 var(--slate);
height: 0.2em;
left: -0.28em;
top: -0.2em;
transform:
rotate(30deg)
skew(30deg);
width: 0.4em;
}
.swan { background-color: var(--ocean); }
.swan div {
background:
radial-gradient(
circle at 0.8em -0.2em,
var(--white) 0 0.8em,
var(--petal) 0.805em 0.9em);
border-radius: 0.05em 1em 0.2em 1em;
height: 0.62em;
left: 0.42em;
top: 0.95em;
transform:
rotate(-1deg);
width: 1em;
}
.swan div::before {
border-radius: 1em 1em 0 0;
border: 0.18em solid var(--trans);
border-left-color: var(--petal);
border-top-color: var(--white);
height: 0.6em;
left: 0.66em;
top: -0.48em;
transform:
rotate(-20deg)
translateZ(-1em);
width: 0.1em;
}
.swan div::after {
background:
radial-gradient(
circle at 0.18em 0.54em,
var(--ink) 0 0.02em,
var(--trans) 0.025em 1em),
radial-gradient(
circle at 0.26em 0.6em,
var(--spice) 0 0.04em,
var(--trans) 0.045em 1em),
radial-gradient(
circle at 0.22em 0.57em,
var(--charcoal) 0 0.04em,
var(--trans) 0.045em 1em),
radial-gradient(
circle at 0.22em -0.02em,
var(--charcoal) 0 0.04em,
var(--trans) 0.045em 1em),
radial-gradient(
circle at 0.12em 0.58em,
var(--white) 0 0.12em,
var(--trans) 0.125em 1em),
radial-gradient(
circle at 0.12em -0.02em,
var(--white) 0 0.12em,
var(--trans) 0.125em 1em),
radial-gradient(
circle at 0.24em 0.8em,
var(--spice) 0 0.24em,
var(--trans) 0.245em 1em),
radial-gradient(
circle at 0.22em -0.53em,
var(--charcoal) 0 0.54em,
var(--trans) 0.545em 1em),
radial-gradient(
circle at 0.1em 1.18em,
var(--charcoal) 0 0.64em,
var(--trans) 0.645em 1em);
background-position: 0em -0.3em;
border-radius: 1em;
height: 0.6em;
left: 0.7em;
top: -1.43em;
transform:
rotate(54deg)
translateZ(-1em);
width: 0.6em;
}
.grove-snail { background-color: var(--purple-slate); }
.grove-snail div {
background-image:
radial-gradient(
circle at 0.6em 0.75em,
var(--banana) 0 0.09em,
var(--trans) 0.095em 0.2em),
repeating-radial-gradient(
circle at 0.7em 0.75em,
var(--coffee) 0 0.07em,
var(--trans) 0.075em 0.2em,
var(--coffee) 0.205em 0.2em),
radial-gradient(
circle at 0.75em 0.75em,
var(--butter) 0,
var(--mushroom) 0.45em,
var(--banana) 1em);
background-size: 2em 2em;
background-position: -0.15em -0.15em;
border-radius: 1em 1em 0.1em 0 ;
height: 0.6em;
left: 0.5em;
top: 0.48em;
transform:
rotate(32deg);
width: 1.22em;
}
.grove-snail div::before {
background-image:
radial-gradient(
circle at 0.6em 0.75em,
var(--banana) 0 0.09em,
var(--trans) 0.095em 0.2em),
repeating-radial-gradient(
circle at 0.7em 0.75em,
var(--coffee) 0 0.07em,
var(--trans) 0.075em 0.2em,
var(--coffee) 0.205em 0.2em),
radial-gradient(
circle at 0.45em 0.75em,
var(--butter) 0,
var(--mushroom) 0.45em,
var(--banana) 1em);
background-size: 2em 2em;
background-position: -0.015em -0.15em;
border-radius: 1em 1.5em 0 0 ;
height: 0.6em;
left: 0;
top: 0.59em;
transform:
rotate(180deg);
width: 1.03em;
}
.sheep { background-color: var(--meadow); }
.sheep div {
background:
radial-gradient(
circle at 0.735em 0.53em,
var(--iron) 0 0.18em,
var(--trans) 0.185em 2em),
radial-gradient(
circle at 0.6em 0.6em,
var(--mushroom) 0 0.52em,
var(--trans) 0.525em 2em);
background-size: 2em 2em;
background-position: -0.15em -0.15em;
border-radius: 1em;
border: 0.12em dotted var(--mushroom);
height: 0.9em;
left: 0.42em;
top: 0.4em;
transform:
rotate(13deg)
translateZ(1em);
width: 0.9em;
}
.sheep div::before {
background: var(--charcoal);
border-radius: 0.1em;
box-shadow: 0.26em 0 0 var(--charcoal);
height: 0.6em;
left: 0.35em;
top: 0.56em;
transform:
rotate(-13deg)
translateZ(-1em);
width: 0.12em;
}
.sheep div::after {
background:
/* eyes */
radial-gradient(
circle at 0.1em 0.03em,
var(--mushroom) 0 0.02em,
var(--trans) 0.025em 2em),
radial-gradient(
circle at 1.91em 0.025em,
var(--mushroom) 0 0.02em,
var(--trans) 0.025em 2em),
/* ears */
radial-gradient(
circle at 0.19em 2.02em,
var(--iron) 0 0.06em,
var(--trans) 0.065em 2em),
radial-gradient(
circle at 1.81em 2.02em,
var(--iron) 0 0.06em,
var(--trans) 0.065em 2em),
radial-gradient(
circle at 0.16em -0.02em,
var(--iron) 0 0.09em,
var(--trans) 0.095em 2em),
radial-gradient(
circle at 1.84em -0.02em,
var(--iron) 0 0.09em,
var(--trans) 0.095em 2em);
background-size: 2em 2em;
background-position: 0.6em 0.35em;
border-radius: 1em;
border: 0.12em dotted var(--mushroom);
height: 0.9em;
left: -0.12em;
top: -0.72em;
transform:
rotate(-13deg)
translateZ(1em);
width: 0.9em;
}
.hedgehog { background-color: var(--pond-bottom); }
.hedgehog div {
background: var(--latte);
background-image:
/* eyes */
radial-gradient(
circle at 0.55em 0.78em,
var(--coffee) 0 0.04em,
var(--champagne) 0.044em 0.045em,
var(--trans) 0.1em 1em),
radial-gradient(
circle at 0.78em 0.55em,
var(--coffee) 0 0.04em,
var(--champagne) 0.044em 0.045em,
var(--trans) 0.1em 1em),
/* nose */
radial-gradient(
circle at 0.775em 0.755em,
var(--terracotta) 0 0.034em,
var(--trans) 0.036em 1em),
radial-gradient(
circle at 0.755em 0.775em,
var(--terracotta) 0 0.034em,
var(--trans) 0.036em 1em),
radial-gradient(
circle at 0.78em 0.765em,
var(--clay) 0 0.034em,
var(--trans) 0.036em 1em),
radial-gradient(
circle at 0.765em 0.78em,
var(--clay) 0 0.034em,
var(--trans) 0.036em 1em),
radial-gradient(
circle at 0.78em 0.78em,
var(--strawberry-yogurt) 0,
var(--trans) 0.35em 1em),
/* face */
radial-gradient(
circle at 0.8em 0.8em,
var(--mushroom) 0,
var(--trans) 0.45em 1em),
radial-gradient(
circle at 0.8em 0.8em,
var(--mink) 0,
var(--trans) 0.55em 1em),
radial-gradient(
circle at 0.8em 0.8em,
var(--cappuccino) 0,
var(--trans) 0.65em 1em),
/* ears */
radial-gradient(
circle at 0.44em 0.7em,
var(--latte) 0 0.095em,
var(--trans) 0.15em 1em),
radial-gradient(
circle at 0.7em 0.44em,
var(--latte) 0 0.095em,
var(--trans) 0.15em 1em),
radial-gradient(
circle at 0.37em 0.7em,
var(--clay) 0 0.095em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.7em 0.37em,
var(--clay) 0 0.095em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.35em 0.7em,
var(--strawberry-yogurt) 0 0.1em,
var(--trans) 0.105em 1em),
radial-gradient(
circle at 0.7em 0.35em,
var(--strawberry-yogurt) 0 0.1em,
var(--trans) 0.105em 1em);
border-radius: 0.02em 0.02em 0.5em 0.02em;
height: 1em;
left: 0.5em;
top: 0.6em;
transform:
rotate(45deg);
width: 1em;
}
.hedgehog div::before,
.hedgehog div::after {
background-image:
radial-gradient(
circle at 0.8em 0.8em,
var(--cappuccino) 0,
var(--latte) 0.75em 1em);
border-radius: 0.02em 0.02em 0.5em 0.02em;
height: 1em;
left: 0;
top: 0;
width: 1em;
}
.hedgehog div::before {
background-image:
radial-gradient(
circle at 0.8em 0.6em,
var(--mushroom) 0,
var(--trans) 0.45em 1em),
radial-gradient(
circle at 0.8em 0.6em,
var(--mink) 0,
var(--trans) 0.55em 1em),
radial-gradient(
circle at 0.8em 0.6em,
var(--cappuccino) 0,
var(--latte) 0.65em 1em);
transform:
rotate(30deg)
translateZ(-1em);
}
.hedgehog div::after {
background-image:
radial-gradient(
circle at 0.6em 0.8em,
var(--mushroom) 0,
var(--trans) 0.45em 1em),
radial-gradient(
circle at 0.6em 0.8em,
var(--mink) 0,
var(--trans) 0.55em 1em),
radial-gradient(
circle at 0.6em 0.8em,
var(--cappuccino) 0,
var(--latte) 0.65em 1em);
transform:
rotate(-30deg)
translateZ(-1em);
top: -1em;
left: 0em;
}
.hungry-chick { background-color: var(--cappuccino); }
.hungry-chick div {
background-image:
radial-gradient(
circle at 0.16em 0.3em,
var(--salmon) 0,
var(--peach) 0.25em 0.3em,
var(--butter) 0.5em 1em);
border-radius: 1em 0.1em;
border: 0.04em solid var(--butter);
height: 0.6em;
left: 0.75em;
top: 0.65em;
transform:
rotate(-64deg);
width: 0.7em;
}
.hungry-chick div::before {
background: var(--latte);
background-image:
radial-gradient(
circle at 0.27em 0.22em,
var(--ink) 0 0.07em,
var(--butter) 0.075em 0.1em,
var(--trans) 0.105em 4em);
border-radius: 80%;
left: -0.32em;
height: 0.9em;
top: -0.16em;
transform:
translateZ(-1em);
width: 0.9em;
}
.hungry-chick div::after {
background: var(--butter);
border-radius: 0.18em 0.6em;
left: 0.08em;
height: 0.46em;
top: -0.8em;
transform:
rotate(0deg)
translateZ(-1em);
width: 0.46em;
}
.down-feather { background-color: var(--sea-fog); }
.down-feather div {
background-image:
repeating-radial-gradient(
circle at 0 -0.12em,
var(--cloud) 0 0.01em,
var(--trans5) 0.015em 0.02em,
var(--cloud) 0.025em);
background-clip: content-box;
border-radius: 100%/90%;
border-left: 0.26em solid var(--mushroom);
border-right: 0.06em solid var(--trans);
height: 1em;
left: 0.7em;
top: 0.4em;
transform:
rotate(22deg);
width: 0.36em;
}
.down-feather div::before {
background-position: 0.5em;
border-bottom: 0.12em solid var(--trans);
border-left: 0.05em solid var(--cloud);
border-radius: 100%;
height: 1.25em;
left: -0.01em;
transform:
rotate(-3deg);
width: 0.2em;
}
.down-feather div::after {
background-size: 1em 1em;
background-position: 0.5em;
border-top: 0.07em double var(--mushroom);
border-radius: 100%;
height: 0.24em;
left: -0.15em;
opacity: 0.8;
top: -0.38em;
transform:
rotate(-10deg)
translateZ(-1em);
width: 0.45em;
}
.bird-print { background-color: var(--carmine); }
.bird-print div {
background: var(--magenta);
background-position: 0.6em 0.5em;
background-size: 1.4em 2.1em;
border-radius: 1em;
height: 1em;
left: 0.94em;
top: 0.55em;
transform:
rotate(0deg)
translateZ(1em);
width: 0.12em;
}
.bird-print div::before,
.bird-print div::after {
background: var(--magenta);
border-radius: 2em;
height: 0.6em;
left: -0.17em;
top: 0.16em;
transform:
rotate(-45deg);
width: 0.12em;
}
.bird-print div::after {
left: 0.17em;
top: -0.45em;
transform:
rotate(45deg);
}
.cinnabar-caterpillar { background-color: var(--fudge); }
.cinnabar-caterpillar div {
background-color: var(--charcoal);
background-image:
repeating-radial-gradient(
circle at -0.05em 0.15em,
var(--charcoal) 0 0.2em,
var(--trans) 0.21em 2em),
repeating-radial-gradient(
circle at 0.07em 0.15em,
var(--sun) 0 0.2em,
var(--trans) 0.21em 2em);
background-clip: content-box;
background-size: 0.29em 0.32em;
border-radius: 1em;
height: 0.32em;
left: 0.3em;
top: 0.84em;
transform:
translateZ(1em);
width: 1.5em;
}
.cinnabar-caterpillar div::before {
border-bottom: 0.12em dotted var(--charcoal);
height: 0.32em;
left: 0.1em;
top: -0.05em;
transform:
translateZ(-1em);
width: 1.3em;
}
.woodlouse { background-color: var(--latte); }
.woodlouse div {
background:
repeating-radial-gradient(
circle at 0.1em 0.13em,
var(--iron) 0 0.02em,
var(--trans) 0.04em 2em),
repeating-radial-gradient(
circle at 0.54em 0.13em,
var(--iron) 0 0.02em,
var(--trans) 0.04em 2em),
repeating-radial-gradient(
circle at 0.32em 0.18em,
var(--charcoal) 0 0.24em,
var(--iron) 0.31em 0.31em,
var(--trans) 0.315em 2em);
background-size: 0.74em 0.2em;
border-radius: 0 0 100% 100%;
border: 0.1em solid var(--trans);
border-top-width: 0;
border-bottom: 0.05em solid var(--charcoal);
height: 0.72em;
left: 0.46em;
top: 0.84em;
transform:
rotate(80deg)
skew(0deg)
translateZ(1em);
width: 0.64em;
}
.woodlouse div::before {
background:
repeating-radial-gradient(
circle at 0.32em 0.52em,
var(--charcoal) 0 0.24em,
var(--iron) 0.31em 0.31em,
var(--trans) 0.315em 4em),
repeating-radial-gradient(
circle at 0.32em 0.32em,
var(--charcoal) 0 0.11em,
var(--iron) 0.18em 0.18em,
var(--trans) 0.185em 4em),
repeating-radial-gradient(
circle at 0.96em 0.26em,
var(--trans) 0 0.58em,
var(--charcoal) 0.585em 0.61em,
var(--trans) 0.615em 4em),
repeating-radial-gradient(
circle at -0.31em 0.26em,
var(--trans) 0 0.58em,
var(--charcoal) 0.585em 0.61em,
var(--trans) 0.615em 4em);
background-position: 0 0.2em;
background-size: 0.64em 2em;
border-radius: 100%;
height: 0.58em;
left: -0.03em;
top: -0.54em;
transform:
rotate(-2deg)
translateZ(-1em);
width: 0.64em;
}
.bumblebee { background-color: var(--camo); }
.bumblebee div {
background:
/* upper wing */
repeating-radial-gradient(
circle at 0.4em -0.05em,
var(--charcoal) 0 0.28em,
var(--trans) 0.32em 3em),
repeating-radial-gradient(
circle at 0.4em 0.08em,
var(--mustard) 0 0.2em,
var(--butter) 0.26em 0.25em,
var(--trans) 0.3em 3em),
repeating-radial-gradient(
circle at 0.41em 0.15em,
var(--charcoal) 0 0.28em,
var(--trans) 0.32em 3em),
repeating-radial-gradient(
circle at 0.42em 0.24em,
var(--mushroom) 0 0.28em,
var(--trans) 0.32em 3em),
repeating-radial-gradient(
circle at 0.4em 1.25em,
var(--charcoal) 0 0.28em,
var(--trans) 0.32em 3em),
repeating-radial-gradient(
circle at 0.42em 1.12em,
var(--mustard) 0 0.2em,
var(--butter) 0.26em 0.25em,
var(--trans) 0.29em 3em),
repeating-radial-gradient(
circle at 0.44em 0.92em,
var(--charcoal) 0 0.11em,
var(--trans) 0.15em 3em);
background-position: 0 0.6em;
height: 1.2em;
left: 0.65em;
top: 0.32em;
transform:
rotate(30deg)
skew(5deg)
translateZ(1em);
width: 0.76em;
}
.bumblebee div::before {
background:
repeating-radial-gradient(
circle at 0.39em 0.04em,
var(--iron) 0 0.03em,
var(--trans) 0.04em 3em),
repeating-radial-gradient(
circle at 0.04em 0.39em,
var(--iron) 0 0.03em,
var(--trans) 0.04em 3em),
repeating-radial-gradient(
circle at -0.5em 0.7em,
var(--cloud) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at 0.7em -0.5em,
var(--cloud) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at -0.49em 0.71em,
var(--mink) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at 0.71em -0.49em,
var(--mink) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at -0.46em 0.77em,
var(--white) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at 0.77em -0.46em,
var(--white) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at -0.44em 0.77em,
var(--cappuccino) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at 0.77em -0.44em,
var(--cappuccino) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at -0.41em 0.83em,
var(--ice) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at 0.83em -0.41em,
var(--ice) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at -0.4em 0.85em,
var(--latte) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at 0.85em -0.4em,
var(--latte) 0 0.6em,
var(--trans) 0.61em 3em),
repeating-radial-gradient(
circle at 0.03em -0.02em,
var(--charcoal) 0 0.5em,
var(--trans) 0.51em 3em);
border-radius: 0.5em 0.1em;
height: 1.2em;
left: -0.18em;
opacity: 0.45;
top: 0.56em;
transform:
rotate(50deg)
skew(20deg)
translateZ(1em);
width: 1.2em;
}
.starfish { background-color: var(--sand); }
.starfish div {
background: var(--melon);
background-position: 0.3em;
border-radius: 100% 100% 80% 80%;
border-bottom: 0.05em solid var(--hazelnut);
height: 0.25em;
left: 0.4em;
top: 0.8em;
transform:
rotate(-10deg);
width: 1.2em;
}
.starfish div::before {
background: var(--melon);
background-position: 0.3em;
border-radius: 100% 100% 80% 80%;
border-bottom: 0.05em solid var(--hazelnut);
height: 0.25em;
left: 0.03em;
top: 0.17em;
transform:
rotate(-20deg);
width: 1.2em;
}
.starfish div::after {
background: var(--melon);
background-clip: padding-box;
background-position: 0.3em;
border-radius: 100%;
border-right: 0.05em solid var(--hazelnut);
border-bottom: 0.005em solid var(--trans);
border-top: 0 solid var(--trans);
height: 0.34em;
left: 0.16em;
top: -0.2em;
transform:
rotate(80deg)
skew(-30deg);
width: 1em;
}
.moon-jellyfish { background-color: var(--navy); }
.moon-jellyfish div {
background:
radial-gradient(
var(--trans2) 0,
var(--trans1) 30% 65%,
var(--robins-egg) 85% 100%);
background-position: 0 0.01em;
border-radius: 2em 1.9em 2.2em 1.8em;
border: 0.018em solid var(--robins-egg);
border-left-width: 0;
border-right-width: 0;
box-shadow: 0 0 0.2em 0.01em var(--sea-fog);
height: 1em;
left: 0.5em;
top: 0.5em;
transform:
rotate(10deg);
width: 1em;
}
.moon-jellyfish div::before {
background:
repeating-radial-gradient(
circle at 0.43em 0.39em,
var(--trans) 0 0.07em,
var(--petal) 0.09em 0.1em,
var(--trans) 0.12em 2em),
repeating-radial-gradient(
circle at 0.63em 0.63em,
var(--trans) 0 0.07em,
var(--petal) 0.09em 0.1em,
var(--trans) 0.12em 2em),
repeating-radial-gradient(
circle at 0.65em 0.39em,
var(--trans) 0 0.06em,
var(--petal) 0.08em 0.09em,
var(--trans) 0.11em 2em),
repeating-radial-gradient(
circle at 0.4em 0.62em,
var(--trans) 0 0.06em,
var(--petal) 0.08em 0.09em,
var(--trans) 0.11em 2em);
background-position: 0 0.01em;
border-radius: 2em 1.9em 2em 1.8em;
height: 1em;
opacity: 0.9;
transform:
skew(5deg);
width: 1em;
}
.spider-web { background-color: var(--aubergine); }
.spider-web div,
.spider-web div::before,
.spider-web div::after {
background-image:
/*top right */
repeating-radial-gradient(
circle at 3.625em 3.63em,
var(--trans) 0 0.45em,
var(--mushroom) 0.455em 0.46em,
var(--trans) 0.465em 6em),
repeating-radial-gradient(
circle at 3.48em 3.45em,
var(--trans) 0 0.6em,
var(--mushroom) 0.605em 0.61em,
var(--trans) 0.615em 6em),
repeating-radial-gradient(
circle at 3.28em 3.25em,
var(--trans) 0 0.8em,
var(--mushroom) 0.805em 0.81em,
var(--trans) 0.815em 6em),
repeating-radial-gradient(
circle at 3.08em 3.05em,
var(--trans) 0 1em,
var(--mushroom) 1.005em 1.01em,
var(--trans) 1.015em 6em),
/*bottom left */
repeating-radial-gradient(
circle at 0.36em 0.39em,
var(--trans) 0 0.45em,
var(--cloud) 0.455em 0.46em,
var(--trans) 0.465em 6em),
repeating-radial-gradient(
circle at 0.52em 0.55em,
var(--trans) 0 0.6em,
var(--cloud) 0.605em 0.61em,
var(--trans) 0.615em 6em),
repeating-radial-gradient(
circle at 0.71em 0.75em,
var(--trans) 0 0.8em,
var(--cloud) 0.805em 0.81em,
var(--trans) 0.815em 6em),
repeating-radial-gradient(
circle at 0.91em 0.95em,
var(--trans) 0 1em,
var(--cloud) 1.005em 1.01em,
var(--trans) 1.015em 6em);
background-position: 0.6em 0.6em;
background-size: 4em 4em;
border-radius: 100%;
height: 1.2em;
left: 0.4em;
top: 0.4em;
width: 1.2em;
}
.spider-web div {
transform:
rotate(31deg)
skew(30deg);
}
.spider-web div::before {
left: 0;
top: 0;
transform:
skew(-30deg)
rotate(60deg)
skew(30deg);
opacity: 0.75;
}
.spider-web div::after {
left: 0;
top: -1.2em;
transform:
skew(-30deg)
rotate(-60deg)
skew(30deg);
opacity: 0.5;
}
.cabbage-white { background-color: var(--forest); }
.cabbage-white div {
background-image:
/* body */
repeating-radial-gradient(
circle at 1.21em 0.47em,
var(--pebble) 0,
var(--dove) 0.06em,
var(--trans) 0.065em 2em),
repeating-radial-gradient(
circle at -0.055em 0.47em,
var(--pebble) 0,
var(--dove) 0.08em,
var(--trans) 0.085em 2em),
repeating-radial-gradient(
circle at 1.45em 0.62em,
var(--gray) 0,
var(--dove) 0.32em,
var(--trans) 0.325em 2em),
repeating-radial-gradient(
circle at -0.44em 0.72em,
var(--gray) 0 0.2em,
var(--dove) 0.53em,
var(--trans) 0.535em 2em),
repeating-radial-gradient(
circle at 1.3em 0.85em,
var(--gray) 0,
var(--dove) 0.16em,
var(--trans) 0.165em 2em),
repeating-radial-gradient(
circle at 1.21em 0.94em,
var(--pebble) 0,
var(--dove) 0.08em,
var(--trans) 0.085em 2em);
background-position: 0.3em;
border-radius: 0.2em;
height: 1.1em;
left: 0.34em;
top: 0.5em;
transform:
rotate(-40deg)
skew(0deg);
width: 1.2em;
}
.cabbage-white div::after {
background-image:
repeating-radial-gradient(
circle at 0.5em 0.77em,
var(--cloud) 0 0.5em,
var(--trans) 0.51em 2em),
repeating-radial-gradient(
circle at 0.52em 0.75em,
var(--mushroom) 0 0.5em,
var(--trans) 0.51em 2em),
repeating-radial-gradient(
circle at 0.5em 0.68em,
var(--cloud) 0 0.5em,
var(--trans) 0.51em 2em),
repeating-radial-gradient(
circle at 0.52em 0.66em,
var(--mushroom) 0 0.5em,
var(--trans) 0.51em 2em),
repeating-radial-gradient(
circle at 0.5em 0.59em,
var(--cloud) 0 0.5em,
var(--trans) 0.51em 2em),
repeating-radial-gradient(
circle at 0.52em 0.57em,
var(--mushroom) 0 0.5em,
var(--trans) 0.51em 2em),
repeating-radial-gradient(
circle at 0.5em 0.52em,
var(--cloud) 0 0.5em,
var(--trans) 0.51em 2em);
border-radius: 0.2em 0.6em 0.5em 0.1em;
height: 0.6em;
left: 0.42em;
opacity: 0.95;
top: -0.2em;
transform:
rotate(55deg);
width: 0.75em;
}
.cabbage-white div::before {
background-image:
repeating-radial-gradient(
circle at 0.74em -0.08em,
var(--charcoal) 0 0.08em,
var(--trans) 0.2em 2em),
repeating-radial-gradient(
circle at 0.9em 0.07em,
var(--charcoal) 0 0.08em,
var(--trans) 0.2em 2em),
repeating-radial-gradient(
circle at 0.58em 0.34em,
var(--charcoal) 0 0.03em,
var(--trans) 0.06em 2em),
repeating-radial-gradient(
circle at 0.54em 0.5em,
var(--charcoal) 0 0.02em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 0.82em 0.78em,
var(--mushroom) 0,
var(--cloud) 0.8em,
var(--trans) 0.81em 2em),
repeating-radial-gradient(
circle at 0.77em 0.78em,
var(--mushroom) 0 0.8em,
var(--trans) 0.81em 2em);
border-radius: 0.5em 0.1em 0.32em 0.1em;
height: 0.72em;
left: 0.36em;
opacity: 0.95;
top: 0.05em;
transform:
rotate(10deg);
width: 0.84em;
}
.cat-tracks { background-color: var(--blush); }
.cat-tracks div {
background: var(--strawberry-yogurt);
border-radius: 100%;
box-shadow: 0.37em 0 0 var(--strawberry-yogurt);
height: 0.42em;
left: 0.65em;
top: 0.52em;
width: 0.32em;
}
.cat-tracks div::before {
background: var(--strawberry-yogurt);
border-radius: 100%;
box-shadow: 0.98em 0 0 var(--strawberry-yogurt);
height: 0.42em;
left: -0.3em;
top: 0.28em;
width: 0.32em;
}
.cat-tracks div::after {
background:
repeating-radial-gradient(
circle at 0.19em 0.28em,
var(--strawberry-yogurt) 0 0.26em,
var(--trans) 0.261em 1em),
repeating-radial-gradient(
circle at 0.56em 0.28em,
var(--strawberry-yogurt) 0 0.26em,
var(--trans) 0.261em 1em),
repeating-radial-gradient(
circle at 0.4em 0.1em,
var(--strawberry-yogurt) 0 0.26em,
var(--trans) 0.261em 1em);
border-radius: 1em 1em 0.6em 0.6em;
height: 0.56em;
left: -0.02em;
top: 0.06em;
width: 0.76em;
}
.common-blue { background-color: var(--powder-blue); }
.common-blue div {
background:
/* body */
repeating-radial-gradient(
circle at 1.35em 0.34em,
var(--slate) 0 0.5em,
var(--trans) 0.51em 3em),
repeating-radial-gradient(
circle at -0.43em 0.34em,
var(--slate) 0 0.5em,
var(--trans) 0.51em 3em),
/* fuzz */
repeating-radial-gradient(
circle at 1.05em 0.4em,
var(--blue-gray) 0 0.2em,
var(--trans) 0.3em 3em),
repeating-radial-gradient(
circle at -0.13em 0.4em,
var(--blue-gray) 0 0.2em,
var(--trans) 0.3em 3em),
/* upper wing */
repeating-radial-gradient(
circle at 0.46em 0.54em,
var(--forget-me-not) 0,
var(--blue-gray) 0.5em 0.54em,
var(--trans) 0.545em 3em);
background-position: 0.6em;
background-size: 0.92em;
border-radius: 0.7em 0.7em 2em 2em;
box-shadow:
-0.04em 0.02em 0 0 var(--cloud),
0.04em 0.02em 0 0 var(--cloud);
height: 0.7em;
left: 0.4em;
top: 0.6em;
transform:
rotate(30deg)
skew(5deg)
translateZ(1em);
width: 1.2em;
}
.common-blue div::before {
background:
/* body */
repeating-radial-gradient(
circle at 1.73em 0.2em,
var(--slate) 0 0.48em,
var(--trans) 0.49em 3em),
repeating-radial-gradient(
circle at -0.43em 0.2em,
var(--slate) 0 0.48em,
var(--trans) 0.49em 3em),
/* lower wing */
repeating-radial-gradient(
circle at 0.27em 0.32em,
var(--forget-me-not) 0,
var(--blue-gray) 0.24em 0.24em,
var(--trans) 0.245em 3em),
repeating-radial-gradient(
circle at 01.03em 0.32em,
var(--forget-me-not) 0,
var(--blue-gray) 0.24em 0.24em,
var(--trans) 0.245em 3em),
/* lower wing */
repeating-radial-gradient(
circle at 0.29em 0.35em,
var(--mushroom) 0 0.25em,
var(--trans) 0.255em 3em),
repeating-radial-gradient(
circle at 1.01em 0.35em,
var(--mushroom) 0 0.25em,
var(--trans) 0.255em 3em);
background-position: 0.6em;
background-size: 1.3em;
border-radius: 0em;
height: 0.7em;
left: 0em;
top: 0.4em;
transform:
rotate(0deg)
translateZ(1em);
width: 1.2em;
}
.fox-face { background-color: var(--chestnut); }
.fox-face div {
background:
/* cheeks */
repeating-radial-gradient(
circle at 1.36em 0.9em,
var(--mushroom) 0 0.4em,
var(--trans) 0.405em 3em),
repeating-radial-gradient(
circle at 0.9em 1.36em,
var(--mushroom) 0 0.4em,
var(--trans) 0.405em 3em),
/* nose */
repeating-radial-gradient(
circle at 1.12em 1.12em,
var(--clay) 0 0.3em,
var(--trans) 0.305em 3em),
/* head */
repeating-radial-gradient(
circle at 1.2em 1.2em,
var(--melon) 0 0.9em,
var(--trans) 0.905em 3em),
/* ears */
repeating-radial-gradient(
circle at 1.2em 0.1em,
var(--melon) 0 0.5em,
var(--trans) 0.505em 3em),
repeating-radial-gradient(
circle at 0.1em 1.2em,
var(--melon) 0 0.5em,
var(--trans) 0.505em 3em),
repeating-radial-gradient(
circle at 1.17em 0.1em,
var(--clay) 0 0.5em,
var(--trans) 0.505em 3em),
repeating-radial-gradient(
circle at 0.1em 1.17em,
var(--clay) 0 0.5em,
var(--trans) 0.505em 3em);
border-radius: 2em 2em 1.4em 2em;
height: 1.2em;
left: 0.4em;
top: 0.3em;
transform:
rotate(45deg)
translateZ(1em);
width: 1.2em;
}
.fox-face div::before {
background:
repeating-radial-gradient(
circle at -0.09em 0.62em,
var(--clay) 0 0.14em,
var(--trans) 0.145em 4em),
repeating-radial-gradient(
circle at 0.62em -0.09em,
var(--clay) 0 0.14em,
var(--trans) 0.145em 4em),
repeating-radial-gradient(
circle at 1.09em 0.63em,
var(--coffee) 0 0.14em,
var(--trans) 0.145em 4em),
repeating-radial-gradient(
circle at 0.63em 1.09em,
var(--coffee) 0 0.14em,
var(--trans) 0.145em 4em);
background-position: 0.8em 0.8em;
background-size: 1em 1em;
border: 0.1em solid var(--trans);
border-radius: 100%;
height: 1em;
left: 0.05em;
top: 0.05em;
transform:
skew(-0deg)
rotate(-0deg);
width: 1em;
}
.fox-face div::after {
border: 0.12em solid var(--trans);
border-bottom: 0.12em solid var(--cloud);
border-radius: 100%;
height: 0.2em;
left: 0.71em;
top: -0.54em;
transform:
rotate(-45deg);
width: 0.1em;
}
.rabbit { background-color: var(--slate); }
.rabbit div {
background:
repeating-radial-gradient(
circle at 1.26em 2.05em,
var(--coffee) 0 0.03em,
var(--trans) 0.035em 3em),
/* front-ear */
repeating-radial-gradient(
circle at 1.63em 1.82em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
/* back-ear */
repeating-radial-gradient(
circle at -0.26em 1.88em,
var(--strawberry-yogurt) 0 0.34em,
var(--trans) 0.345em 3em),
/* forehead */
repeating-radial-gradient(
circle at 1.34em 2.2em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
/* muzzle */
repeating-radial-gradient(
circle at 1.205em -0.03em,
var(--strawberry-yogurt) 0 0.13em,
var(--trans) 0.135em 3em),
/* chest */
repeating-radial-gradient(
circle at 1.48em 0.2em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
/* rump */
repeating-radial-gradient(
circle at 0.27em 0.36em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
repeating-radial-gradient(
circle at 0 0.5em,
var(--strawberry-yogurt) 0 0.38em,
var(--trans) 0.385em 3em),
/* scut */
repeating-radial-gradient(
circle at 0.54em 0.44em,
var(--mushroom) 0 0.08em,
var(--trans) 0.085em 3em),
/* foot */
repeating-radial-gradient(
circle at 1.4em 0.535em,
var(--strawberry-yogurt) 0 0.06em,
var(--trans) 0.065em 3em);
background-position: 0.6em 0.5em;
background-size: 1.4em 2.1em;
border-radius: 100%/60%;
height: 1.1em;
left: 0.3em;
top: 0.5em;
transform:
rotate(0deg)
translateZ(1em);
width: 1.4em;
}
.rabbit div::before {
border: 0.1em solid var(--trans);
border-bottom: 0.2em solid var(--strawberry-yogurt);
border-radius: 100%;
height: 0.4em;
left: 0.54em;
top: 0.06em;
transform:
rotate(55deg);
width: 0.4em;
}
.rabbit div::after {
background:
repeating-radial-gradient(
circle at 1.26em 2.05em,
var(--purple-slate) 0 0.03em,
var(--trans) 0.035em 3em),
/* front-ear */
repeating-radial-gradient(
circle at 1.63em 1.82em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
/* back-ear */
repeating-radial-gradient(
circle at -0.26em 1.88em,
var(--strawberry-yogurt) 0 0.34em,
var(--trans) 0.345em 3em),
/* forehead */
repeating-radial-gradient(
circle at 1.34em 2.2em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
/* muzzle */
repeating-radial-gradient(
circle at 1.205em -0.03em,
var(--strawberry-yogurt) 0 0.13em,
var(--trans) 0.135em 3em),
/* chest */
repeating-radial-gradient(
circle at 1.48em 0.2em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
/* rump */
repeating-radial-gradient(
circle at 0.27em 0.36em,
var(--strawberry-yogurt) 0 0.28em,
var(--trans) 0.285em 3em),
repeating-radial-gradient(
circle at 0 0.5em,
var(--strawberry-yogurt) 0 0.38em,
var(--trans) 0.385em 3em),
/* scut */
repeating-radial-gradient(
circle at 0.54em 0.44em,
var(--mushroom) 0 0.08em,
var(--trans) 0.085em 3em),
/* foot */
repeating-radial-gradient(
circle at 1.4em 0.535em,
var(--strawberry-yogurt) 0 0.06em,
var(--trans) 0.065em 3em);
background-position: 0.6em 0.5em;
background-size: 1.4em 2.1em;
border-radius: 100%/60%;
height: 1.1em;
left: 0.01em;
top: -0.71em;
transform:
rotate(0deg)
translateZ(1em);
width: 1.4em;
}
.goats-eye { background-color: var(--clay); }
.goats-eye div {
background-color: var(--walnut);
background-image:
repeating-radial-gradient(
var(--bronze) 0 0.44em,
var(--chocolate) 0.54em 0.55em,
var(--walnut) 0.56em 3em);
background-position: -0.52em 1.5em;
background-size: 2em 2em;
border-radius: 0.75em 0.2em;
border: 0.03em solid var(--walnut);
height: 1.1em;
left: 0.45em;
transform:
rotate(45deg)
skew(-6deg);
top: 0.45em;
width: 1.1em;
}
.goats-eye div::before {
background: var(--walnut);
background-position: 0.5em;
border-radius: 0.22em/0.3em;
box-shadow: 0 0 0.09em 0.06em var(--chocolate);
height: 0.3em;
left: 0.16em;
top: 0.37em;
transform:
rotate(-45deg);
width: 0.7em;
}
.goats-eye div::after {
background-image:
repeating-radial-gradient(
circle at 0.34em 0.1em,
var(--trans1) 0 0.12em,
var(--trans) 0.4em 4em),
repeating-radial-gradient(
circle at 0.45em 0.77em,
var(--melon) 0,
var(--trans) 0.14em 4em);
background-size: 1em 1em;
background-position: 0.15em;
border-radius: 1em;
height: 1em;
left: 0.04em;
opacity: 0.6;
top: -0.2em;
width: 1em;
}
.spider-dangle { background-color: var(--eucalyptus); }
.spider-dangle div {
background:
repeating-radial-gradient(
circle at 0.5em 0.52em,
var(--walnut) 0 0.18em,
var(--trans) 0.185em 3em),
repeating-radial-gradient(
circle at 0.5em 0.35em,
var(--walnut) 0 0.1em,
var(--trans) 0.105em 3em),
repeating-radial-gradient(
circle at 0.45em 0.26em,
var(--walnut) 0 0.02em,
var(--trans) 0.025em 3em),
repeating-radial-gradient(
circle at 0.55em 0.26em,
var(--walnut) 0 0.02em,
var(--trans) 0.025em 3em);
border-radius: 0.8em 1em;
height: 1em;
left: 0.5em;
top: 0.6em;
transform:
rotate(0deg);
width: 1em;
}
.spider-dangle div::before,
.spider-dangle div::after {
background:
repeating-radial-gradient(
circle at 0.25em -0.86em,
var(--walnut) 0 0.9em,
var(--trans) 0.905em 3em),
repeating-radial-gradient(
circle at 0.25em 1.36em,
var(--walnut) 0 0.9em,
var(--trans) 0.905em 3em),
repeating-radial-gradient(
circle at -0.86em 0.25em,
var(--walnut) 0 0.9em,
var(--trans) 0.905em 3em),
repeating-radial-gradient(
circle at 1.36em 0.25em,
var(--walnut) 0 0.9em,
var(--trans) 0.905em 3em);
height: 0.5em;
left: 0.24em;
top: -0.23em;
transform:
rotate(58deg)
skew(35deg);
width: 0.5em;
filter: drop-shadow(0.42em 0.4em 0 var(--walnut));
}
.spider-dangle div::after {
left: 0.24em;
top: -0.58em;
transform:
rotate(42deg)
skew(-6deg);
}
.mouse { background-color: var(--terracotta); }
.mouse div {
background:
repeating-radial-gradient(
circle at 0.92em 0.295em,
var(--strawberry-yogurt) 0 0.02em,
var(--trans) 0.025em 3em),
repeating-radial-gradient(
circle at 0.93em 0.3em,
var(--coffee) 0 0.04em,
var(--trans) 0.045em 3em),
repeating-radial-gradient(
circle at 0.45em -1.28em,
var(--mink) 0 0.7em,
var(--latte) 1.7em 1.8em,
var(--trans) 1.81em 3em);
border-radius: 70% 100%;
height: 1em;
left: 0.4em;
top: 0.7em;
transform:
rotate(0deg)
translateZ(1em);
width: 1.2em;
}
.mouse div::before {
border: 0.01em solid var(--trans);
border-left: 0.07em solid var(--strawberry-yogurt);
border-bottom: 0.07em solid var(--strawberry-yogurt);
border-radius: 100%;
height: 0.4em;
left: -0.075em;
top: 0.27em;
transform:
rotate(15deg)
translateZ(-1em);
width: 0.7em;
}
.mouse div::after {
background: var(--strawberry-yogurt);
border-radius: 1em 1.2em 0.4em 1em;
border-right: 0.05em solid var(--latte);
height: 0.34em;
left: 0.46em;
top: -0.54em;
transform:
rotate(-5deg);
width: 0.32em;
}
.bat { background-color: var(--charcoal); }
.bat div {
background:
repeating-radial-gradient(
circle at 0.09em 0.05em,
var(--trans) 0 0.05em,
var(--clay) 0.055em 1em
);
border-radius: 1em/2em;
height: 0.36em;
left: 1em;
top: 0.9em;
transform:
rotate(5deg)
translateZ(1em);
width: 0.18em;
}
.bat div::before,
.bat div::after {
background-image:
repeating-radial-gradient(
circle at 0.16em 0.4em,
var(--trans) 0 0.16em,
var(--navy) 0.17em 0.2em,
var(--purple-slate) 0.32em 0.36em,
var(--clay) 0.37em 3em);
background-size: 0.32em 2em;
border-radius: 2em 1.2em 0 0;
height: 0.42em;
left: -0.72em;
top: -0.16em;
transform:
rotate(60deg)
translateZ(-1em);
width: 0.9em;
}
.bat div::after {
background-image:
repeating-radial-gradient(
circle at 0.16em 0.39em,
var(--trans) 0 0.16em,
var(--navy) 0.17em 0.2em,
var(--purple-slate) 0.32em 0.36em,
var(--clay) 0.37em 3em);
background-clip: padding-box;
background-position: -0.05em 0;
background-size: 0.32em 2em;
border-radius: 1.1em 2em 0 0;
left: 0.02em;
top: -0.55em;
transform:
rotate(-55deg)
translateZ(-1em);
}
.sparrow { background-color: var(--coffee); }
.sparrow div {
background: var(--latte);
border-radius: 2em 0;
border-bottom: 0.08em solid var(--clay);
height: 0.85em;
left: 0.75em;
top: 0.55em;
transform:
rotate(30deg);
width: 0.5em;
}
.sparrow div::before {
background: var(--clay);
border-radius: 2em 0;
height: 0.55em;
left: -0.15em;
top: 0.25em;
transform:
rotate(0deg);
width: 0.55em;
}
.cats-nose { background-color: var(--cappuccino); }
.cats-nose div {
background: var(--hazelnut);
background:
linear-gradient(
var(--hazelnut) 0.2em,
var(--chocolate) 0.4em 0.55em,
var(--bronze) 0.7em
);
border-radius: 25% 25% 40% 40%;
height: 0.86em;
left: 0.8em;
top: 0.7em;
transform:
rotate(-1deg)
translateZ(1em);
width: 0.45em;
}
.cats-nose div::before {
background-image:
repeating-radial-gradient(
circle at 0.12em 0.66em,
var(--trans) 0 0.4em,
var(--bronze) 0.41em 3em),
repeating-radial-gradient(
circle at 0.44em 0.06em,
var(--chocolate) 0 0.48em,
var(--trans) 0.49em 3em);
background-clip: padding-box;
border-radius: 0.32em 0.22em 0 0.32em;
height: 0.7em;
left: -0.48em;
top: -0.01em;
transform:
translateZ(1em);
width: 0.7em;
}
.cats-nose div::after {
background-image:
repeating-radial-gradient(
circle at 0.58em 0.66em,
var(--trans) 0 0.4em,
var(--bronze) 0.41em 3em),
repeating-radial-gradient(
circle at 0.26em 0.06em,
var(--chocolate) 0 0.48em,
var(--trans) 0.49em 3em);
background-clip: padding-box;
border-bottom: 0.08em solid var(--trans);
border-radius: 0.22em 0.32em 0.32em 0;
height: 0.7em;
left: 0.24em;
top: -0.71em;
transform:
translateZ(1em);
width: 0.7em;
}
.ladybird { background-color: var(--sage); }
.ladybird div {
background: var(--ink);
background-image:
repeating-radial-gradient(
circle at 0.07em 0.03em,
var(--mushroom) 0 0.06em,
var(--trans) 0.07em 4em),
repeating-radial-gradient(
circle at 0.35em 0.03em,
var(--mushroom) 0 0.06em,
var(--trans) 0.07em 4em);
border-radius: 0.24em/0.8em;
height: 0.8em;
left: 0.8em;
top: 0.6em;
transform:
rotate(3deg)
translateZ(1em);
width: 0.42em;
}
.ladybird div::before {
background: var(--coral);
background-image:
repeating-radial-gradient(
circle at 0.2em 0.2em,
var(--trans2) 0 0.08em,
var(--trans) 0.09em 3em),
repeating-radial-gradient(
circle at 0.02em 0.08em,
var(--raspberry-jam) 0 0.07em,
var(--trans) 0.08em 3em),
repeating-radial-gradient(
circle at 0.16em 0.3em,
var(--raspberry-jam) 0 0.07em,
var(--trans) 0.08em 3em),
repeating-radial-gradient(
circle at 0.2em 0.54em,
var(--raspberry-jam) 0 0.05em,
var(--trans) 0.06em 3em),
repeating-radial-gradient(
circle at 0.3em 0.15em,
var(--raspberry-jam) 0 0.04em,
var(--trans) 0.05em 3em),
repeating-radial-gradient(
circle at 0.06em 0.28em,
var(--trans) 0 0.36em,
var(--rouge) 0.37em 3em);
border-radius: 0.1em 1em 1.2em 0.1em;
height: 0.7em;
left: 0.25em;
top: 0.12em;
transform:
rotate(-5deg)
translateZ(1em);
width: 0.34em;
}
.ladybird div::after {
background: var(--coral);
background-image:
repeating-radial-gradient(
circle at 0.32em 0.08em,
var(--raspberry-jam) 0 0.07em,
var(--trans) 0.08em 3em),
repeating-radial-gradient(
circle at 0.21em 0.32em,
var(--raspberry-jam) 0 0.07em,
var(--trans) 0.08em 3em),
repeating-radial-gradient(
circle at 0.16em 0.54em,
var(--raspberry-jam) 0 0.05em,
var(--trans) 0.06em 3em),
repeating-radial-gradient(
circle at 0.04em 0.15em,
var(--raspberry-jam) 0 0.04em,
var(--trans) 0.05em 3em),
repeating-radial-gradient(
circle at 0.38em 0.28em,
var(--trans) 0 0.36em,
var(--rouge) 0.37em 3em);
border-radius: 1em 0.1em 0.1em 1.2em;
height: 0.7em;
left: -0.17em;
top: -0.58em;
transform:
rotate(5deg)
translateZ(1em);
width: 0.34em;
}
.money-spider { background-color: var(--sea-fog); }
.money-spider div {
background: var(--clay);
border-right: 0.02em solid var(--twilight);
border-radius: 0.8em 1em;
height: 0.36em;
left: 0.7em;
top: 0.73em;
transform:
rotate(24deg);
width: 0.36em;
filter: drop-shadow(0.01em 0.01em 0 var(--twilight));
}
.money-spider div::before {
border: 0.005em solid var(--trans);
border-top: 0.05em solid var(--clay);
border-radius: 100%;
height: 0.2em;
left: -0.24em;
top: 0.1em;
transform:
rotate(-29deg);
width: 0.9em;
filter: drop-shadow(0.01em 0.1em 0 var(--clay));
}
.money-spider div::after {
border: 0.005em solid var(--trans);
border-top: 0.05em solid var(--clay);
border-radius: 100%;
height: 0.2em;
left: -0.26em;
top: -0.18em;
transform:
rotate(-70deg);
width: 0.9em;
filter: drop-shadow(0 0.1em 0 var(--clay));
}
.swift { background-color: var(--dusty-purple); }
.swift div {
border: 0.004em solid var(--trans);
border-right: 0.05em solid var(--walnut);
background-clip: padding-box;
background-image:
repeating-radial-gradient(
circle at 1.67em 0.7em,
var(--mushroom) 0 0.5em,
var(--trans) 0.51em 4em),
repeating-radial-gradient(
circle at 1.45em 0,
var(--walnut) 0 0.54em,
var(--trans) 0.55em 3em),
repeating-radial-gradient(
circle at 1.45em 1.4em,
var(--walnut) 0 0.54em,
var(--trans) 0.55em 3em),
repeating-radial-gradient(
circle at 1.58em 0.7em,
var(--iron) 0 0.5em,
var(--trans) 0.51em 3em);
border-radius: 100%;
height: 1.4em;
left: 0.12em;
top: 0.22em;
transform:
rotate(44deg)
translateZ(1em);
width: 1.4em;
}
.swift div::after {
background-image:
repeating-radial-gradient(
circle at 1em 1.7em,
var(--walnut) 0 0.11em,
var(--trans) 0.115em 3em),
repeating-radial-gradient(
circle at 1em -0.02em,
var(--walnut) 0 0.11em,
var(--trans) 0.115em 3em),
repeating-radial-gradient(
circle at 0.75em 2.05em,
var(--mushroom) 0 0.49em,
var(--trans) 0.495em 3em),
repeating-radial-gradient(
circle at 0.75em -0.35em,
var(--mushroom) 0 0.49em,
var(--trans) 0.495em 3em),
repeating-radial-gradient(
circle at 1.07em 1.75em,
var(--walnut) 0 0.085em,
var(--trans) 0.09em 3em),
repeating-radial-gradient(
circle at 1.07em -0.06em,
var(--walnut) 0 0.085em,
var(--trans) 0.09em 3em);
background-position: 0 -1em;
background-size: 2em 1.7em;
height: 1em;
left: 0.45em;
top: -0.22em;
transform:
rotate(-5deg)
translateZ(1em);
width: 1.4em;
}
.swift div::before {
border: 0.036em solid var(--walnut);
border-right: 0.26em solid var(--walnut);
border-left: 0.03em solid var(--trans);
border-radius: 0 100% 100% 0;
height: 0.14em;
left: 0.42em;
top: 0.63em;
transform:
rotate(-5deg)
translateZ(1em);
width: 0.36em;
}
.blackbird { background-color: var(--powder-blue); }
.blackbird div {
border: 0 solid var(--trans);
border-bottom: 0.4em solid var(--ink);
border-left: 0.12em solid var(--ink);
border-radius: 0em 0.5em 0.5em 1em;
height: 0.7em;
left: 0.55em;
top: 0.4em;
transform:
rotate(-15deg)
translateZ(1em);
width: 0.7em;
}
.blackbird div::before {
background-image:
repeating-radial-gradient(
circle at 1.02em 1.64em,
var(--trans) 0 0.02em,
var(--yellow) 0.023em 0.04em,
var(--trans) 0.045em 3em),
repeating-radial-gradient(
circle at 1em 1.65em,
var(--ink) 0 0.14em,
var(--trans) 0.145em 3em),
repeating-radial-gradient(
circle at 1em -0.05em,
var(--ink) 0 0.14em,
var(--trans) 0.145em 3em),
repeating-radial-gradient(
circle at 0.5em -0.25em,
var(--ink),
var(--iron) 0.44em,
var(--trans) 0.445em 3em),
repeating-radial-gradient(
circle at 1.13em 1.75em,
var(--yellow) 0 0.085em,
var(--trans) 0.09em 3em),
repeating-radial-gradient(
circle at 1.12em -0.05em,
var(--butter) 0 0.085em,
var(--trans) 0.09em 3em);
background-position: 0 -1em;
background-size: 2em 1.7em;
height: 1em;
left: -0.4em;
width: 1.4em;
}
.blackbird div::after {
border: 0.04em solid var(--clay);
border-bottom: 0.0em solid var(--trans);
border-radius: 0.12em 0.12em 0 0;
height: 0.22em;
left: 0.15em;
transform:
rotate(-10deg)
skew(-15deg)
translateZ(-1em);
width: 0.06em;
}
.mussel { background-color: var(--navy); }
.mussel div {
background-image:
radial-gradient(
var(--powder-blue) 0 0.08em,
var(--blue-gray) 0.09em 0.3em);
border: 0.05em solid var(--slate);
border-top-width: 0.12em;
border-radius: 100%;
height: 0.5em;
left: 0.75em;
top: 1.1em;
transform:
rotate(20deg)
skew(25deg);
width: 0.3em;
}
.mussel div::before {
background-image:
radial-gradient(
var(--blue-gray) 0 0.2em,
var(--slate) 0.21em 0.26em);
border-radius: 1em/1.6em;
height: 1em;
left: -0.11em;
top: -0.48em;
transform:
rotate(10deg)
translateZ(-1em);
width: 0.54em;
}
.mussel div::after {
background-image:
radial-gradient(
var(--blue-gray) 0 0.22em,
var(--slate) 0.23em 0.28em);
border-radius: 1em/1.6em;
border-top: 0.2em solid var(--trans1);
border-right: 0.02em solid var(--trans1);
border-left: 0.01em solid var(--trans1);
height: 1.2em;
left: -0.06em;
top: -2em;
transform:
rotate(45deg)
skew(15deg)
translateZ(-2em);
width: 0.67em;
}
.earthworm { background-color: var(--latte); }
.earthworm div {
background-image:
repeating-radial-gradient(
circle at 0.16em 0.25em,
var(--trans2) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 0.12em 0.30em,
var(--trans4) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 0.095em 0.35em,
var(--trans5) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 0.08em 0.41em,
var(--trans4) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 0.09em 0.47em,
var(--trans2) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 1.19em 0.65em,
var(--trans2) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 1.24em 0.68em,
var(--trans4) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 1.29em 0.74em,
var(--trans5) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 1.32em 0.81em,
var(--trans4) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 1.31em 0.87em,
var(--trans2) 0 0.04em,
var(--trans) 0.05em 2em),
repeating-radial-gradient(
circle at 0.89em 0.22em,
var(--ambrosia) 0 0.09em,
var(--trans) 0.1em 2em),
repeating-radial-gradient(
circle at 0.81em 1.05em,
var(--ambrosia) 0 0.09em,
var(--trans) 0.1em 2em);
height: 1.2em;
left: 0.3em;
transform:
translateZ(1em);
top: 0.4em;
width: 1.4em;
}
.earthworm div::before {
border: 0.16em solid var(--ambrosia);
border-left: 0.2em solid var(--trans);
border-right: 0.2em solid var(--ambrosia);
border-radius: 100%;
height: 0.3em;
left: 0.6em;
top: 0.55em;
transform:
rotate(-10deg)
translateZ(-1em);
width: 0.4em;
}
.earthworm div::after {
border: 0.16em solid var(--ambrosia);
border-left: 0.2em solid var(--ambrosia);
border-right: 0.2em solid var(--trans);
border-radius: 100%;
height: 0.5em;
left: 0;
transform:
translateZ(-1em);
top: -0.6em;
width: 0.7em;
}
.dove { background-color: var(--blue-gray); }
.dove div {
background: var(--mushroom);
border-radius: 0 1em 0.1em 1em;
height: 0.6em;
left: 1em;
top: 0.8em;
transform:
rotate(-40deg)
translateZ(1em);
width: 0.16em;
}
.dove div::before {
border: 0.01em solid var(--trans);
border-bottom: 0.16em solid var(--cloud);
border-right: 0.3em solid var(--mushroom);
border-radius: 0.1em 0.4em;
height: 0.5em;
left: -0.15em;
top: -0.26em;
transform:
rotate(55deg)
skew(-25deg)
translateZ(-1em);
width: 0.4em;
}
.minnow { background-color: var(--pond-bottom); }
.minnow div {
background-image:
repeating-radial-gradient(
circle at 1em 0.1em,
var(--iron) 0 0.03em,
var(--powder-blue) 0.04em 0.05em,
var(--trans) 0.06em 2em),
repeating-radial-gradient(
circle at 1.2em -0.1em,
var(--sea-foam) 0 0.13em,
var(--sage) 0.62em,
var(--sea-fog) 1.1em 1.7em);
border-radius: 3em/1em;
border-top: 0.06em solid var(--sea-fog);
height: 0.35em;
left: 0.5em;
opacity: 0.9;
top: 0.8em;
transform:
rotate(-5deg)
translateZ(1em);
width: 1.25em;
}
.minnow div::before,
.minnow div::after {
background-size: 1em 1em;
background-position: 0.5em;
border: 0 solid var(--trans);
border-bottom: 0.16em solid var(--sea-fog);
border-radius: 100%;
height: 0.3em;
left: -0.21em;
opacity: 0.9;
top: -0.27em;
transform:
rotate(20deg)
translateZ(-1em);
width: 0.5em;
}
.minnow div::after {
left: -0.24em;
top: -0.36em;
transform:
rotate(155deg)
translateZ(-2em);
}
.shell { background-color: var(--purple-slate); }
.shell div {
border-radius: 100%;
height: 2em;
width: 2em;
}
.shell div::before {
background-image:
repeating-radial-gradient(
circle at 1.13em 0.44em,
var(--hazelnut) 0 0.16em,
var(--trans) 0.17em 4em),
repeating-radial-gradient(
circle at 1.08em 0.46em,
var(--bronze) 0 0.16em,
var(--trans) 0.17em 4em),
repeating-radial-gradient(
circle at 1.05em 0.56em,
var(--hazelnut) 0 0.3em,
var(--trans) 0.31em 4em),
repeating-radial-gradient(
circle at 0.99em 0.58em,
var(--bronze) 0 0.3em,
var(--trans) 0.31em 4em),
repeating-radial-gradient(
circle at 0.86em 0.77em,
var(--hazelnut) 0 0.5em,
var(--trans) 0.51em 4em),
repeating-radial-gradient(
circle at 0.78em 0.81em,
var(--bronze) 0 0.51em,
var(--trans) 0.52em 4em);
border-radius: 100%;
height: 2em;
left: 0.4em;
top: -0.1em;
transform:
rotate(-50deg)
skew(40deg);
width: 2em;
}
.shell div::after {
background-image:
repeating-radial-gradient(
circle at 0.2em 0.12em,
var(--chocolate) 0 0.22em,
var(--trans) 0.23em 4em),
repeating-radial-gradient(
circle at 0.22em 0.22em,
var(--bronze) 0 0.26em,
var(--trans) 0.27em 4em);
border-radius: 100%;
height: 0.6em;
left: 1.23em;
top: -1.15em;
transform:
rotate(10deg)
skew(-15deg);
width: 0.6em;
}
.crow-feather { background-color: var(--sea-fog); }
.crow-feather div {
background: var(--iron);
background-image:
repeating-radial-gradient(
circle at 0.2em -0.5em,
var(--ink) 0 0.01em,
var(--trans) 0.02em 0.03em,
var(--ink) 0.04em);
border-radius: 100%;
border-left: 0.15em solid var(--ink);
height: 1.1em;
left: 0.8em;
top: 0.35em;
transform:
rotate(-5deg)
skew(-40deg);
width: 0.4em;
}
.crow-feather div::before {
background-size: 1em 1em;
background-position: 0.5em;
border-bottom: 0.17em solid var(--trans);
border-left: 0.08em solid var(--dove);
border-radius: 100%;
height: 1.18em;
left: -0.08em;
top: 0.23em;
transform:
rotate(35deg)
skew(40deg);
width: 0.7em;
}
.cats-eye { background-color: var(--cappuccino); }
.cats-eye div {
background-image:
radial-gradient(
var(--melon),
var(--bud),
var(--sea-foam),
var(--pond-bottom),
var(--rainforest));
border-radius: 0.75em 0;
border-top: 0.05em solid var(--ink);
border-bottom: 0.03em solid var(--ink);
height: 1em;
left: 0.4em;
top: 0.5em;
width: 1.2em;
}
.cats-eye div::before {
background-image:
repeating-radial-gradient(
circle at -0.82em 0.5em,
var(--ink) 0 0.9em,
var(--trans) 0.91em 4em),
repeating-radial-gradient(
circle at 1.82em 0.5em,
var(--ink) 0 0.9em,
var(--trans) 0.91em 4em);
background-size: 1em 1em;
background-position: 0.5em;
border-radius: 2em;
height: 1em;
left: 0.09em;
top: 0.04em;
width: 1em;
}
.cats-eye div::after {
background-image:
repeating-radial-gradient(
circle at -0.82em 0.5em,
var(--ink) 0 0.9em,
var(--trans) 0.91em 4em),
repeating-radial-gradient(
circle at 1.82em 0.5em,
var(--ink) 0 0.9em,
var(--trans) 0.91em 4em),
repeating-radial-gradient(
circle at 0.24em 0.1em,
var(--trans2) 0 0.12em,
var(--trans) 0.13em 4em),
repeating-radial-gradient(
circle at 0.13em 0.2em,
var(--trans5) 0 0.05em,
var(--trans) 0.06em 4em);
background-size: 1em 1em;
background-position: 0.5em;
border-radius: 1em 0.4em;
height: 1em;
left: 0.09em;
top: -0.94em;
width: 1em;
}
.frog-submerged { background-color: var(--pond-bottom); }
.frog-submerged div {
background-image:
repeating-radial-gradient(
circle at 2.54em 3.73em,
var(--walnut) 0 0.03em,
var(--trans) 0.04em 9em),
repeating-radial-gradient(
circle at 2.57em 3.73em,
var(--trans1) 0 0.05em,
var(--trans) 0.06em 9em),
repeating-radial-gradient(
circle at 2.1em 3.7em,
var(--walnut) 0 0.09em,
var(--trans) 0.1em 9em),
repeating-radial-gradient(
circle at 2.1em 3.7em,
var(--walnut) 0.09em,
var(--chocolate) 0.1em 0.12em,
var(--walnut) 0.17em 0.18em,
var(--camo) 0.19em 0.22em,
var(--trans) 0.23em 5em),
repeating-radial-gradient(
circle at 2.02em 3.78em,
var(--camo) 0 0.22em,
var(--trans) 0.23em 5em),
repeating-radial-gradient(
circle at 2.4em 4.1em,
var(--camo) 0 0.5em,
var(--trans) 0.51em 5em),
repeating-radial-gradient(
circle at 2.1em 4.7em,
var(--camo) 0 1em,
var(--trans) 1.01em 5em),
repeating-radial-gradient(
circle at 2.35em 3.63em,
var(--latte),
var(--camo) 0.22em,
var(--trans) 0.23em 5em);
border-radius: 2em;
height: 4em;
left: -1.1em;
top: -2.6em;
width: 4em;
}
.frog-submerged div::before {
border: 0.005em solid var(--trans);
border-right: 0.05em solid var(--forest);
border-left: 0.05em solid var(--forest);
border-radius: 6em/3em;
height: 0.25em;
left: 1.26em;
top: 3.75em;
transform: rotate(-2deg);
width: 1.65em;
}
.slug { background-color: var(--conker); }
.slug div {
background: var(--raspberry-jam);
border-radius: 1em 0.12em;
height: 0.6em;
left: 0.4em;
top: 0.9em;
transform:
rotate(-6deg);
width: 1.3em;
}
.slug div::before {
background-image:
repeating-radial-gradient(
circle at 0.2em -0.02em,
var(--trans) 0 0.2em,
var(--raspberry-jam) 0.21em 0.5em,
var(--trans) 0.51em 3em);
background-position: 0.15em;
background-size: 0.4em 0.8em;
border-right: 0.05em solid var(--raspberry-jam);
border-top: 0.15em solid var(--trans);
border-radius: 4em;
height: 0.5em;
left: 0.69em;
top: -0.3em;
transform:
rotate(-25deg);
width: 0.55em;
}
.slug div::after {
background-image:
repeating-radial-gradient(
circle at 0.1em 0.21em,
var(--raspberry-jam) 0 0.04em,
var(--trans) 0.05em 3em),
repeating-radial-gradient(
circle at 0.45em 0.26em,
var(--raspberry-jam) 0 0.04em,
var(--trans) 0.05em 3em);
height: 0.6em;
left: 0.64em;
top: -1.2em;
transform:
rotate(-25deg);
width: 0.6em;
}
.moth { background-color: var(--mink); }
.moth div {
background-image:
repeating-radial-gradient(
circle at 0.02em 0.02em,
var(--clay) 0 0.22em,
var(--trans) 0.37em 3em),
repeating-radial-gradient(
circle at -0.2em 0.4em,
var(--latte) 0 0.67em,
var(--clay) 0.68em 0.7em,
var(--trans) 0.71em 2em),
repeating-radial-gradient(
circle at 0.6em -0.3em,
var(--latte) 0 0.67em,
var(--clay) 0.68em 0.7em,
var(--trans) 0.71em 2em);
border-radius: 0.2em;
height: 1.1em;
left: 0.5em;
top: 0.92em;
transform:
rotate(55deg)
skew(40deg);
width: 1.2em;
}
.moth div::before {
background-image:
repeating-radial-gradient(
circle at 0.09em 0.07em,
var(--trans) 0 0.16em,
var(--clay) 0.17em 0.21em,
var(--trans) 0.22em 3em);
left: -0.16em;
height: 1em;
top: -0.12em;
transform:
skew(-10deg)
translateZ(-1em);
width: 1em;
}
.songbird-eggs { background-color: var(--clay); }
.songbird-eggs div,
.songbird-eggs div::before,
.songbird-eggs div::after {
background-image:
radial-gradient(
var(--robins-egg),
var(--slate));
border-radius: 1em/0.76em;
height: 0.5em;
left: 0.75em;
top: 1em;
transform: rotate(-10deg);
width: 0.67em;
}
.songbird-eggs div::before {
left: 0.24em;
top: -0.3em;
transform:
rotate(50deg)
translateZ(-1em);
}
.songbird-eggs div::after {
left: -0.25em;
top: -0.75em;
transform:
rotate(130deg)
translateZ(-1em);
}
.caterpillar { background-color: var(--forest); }
.caterpillar div {
background-image:
repeating-radial-gradient(
circle at 1.3em 0.9em,
var(--grassy) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 1.15em 1.05em,
var(--bud) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 1.25em 1.2em,
var(--bud) 0 0.07em,
var(--trans) 0.08em 2em),
repeating-radial-gradient(
circle at 1.07em 1.22em,
var(--bud) 0 0.07em,
var(--trans) 0.08em 2em),
repeating-radial-gradient(
circle at 0.98em 1.02em,
var(--grassy) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 0.88em 0.86em,
var(--bud) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 0.8em 0.7em,
var(--grassy) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 0.65em 0.71em,
var(--bud) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 0.53em 0.83em,
var(--grassy) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 0.43em 0.96em,
var(--bud) 0 0.18em,
var(--trans) 0.19em 2em),
repeating-radial-gradient(
circle at 0.47em 1.13em,
var(--bud) 0 0.07em,
var(--trans) 0.08em 2em),
repeating-radial-gradient(
circle at 0.32em 1.08em,
var(--bud) 0 0.07em,
var(--trans) 0.08em 2em),
repeating-radial-gradient(
circle at 0.3em 0.89em,
var(--grassy) 0 0.15em,
var(--trans) 0.16em 2em);
border-radius: 2em/1.5em;
height: 1.6em;
left: 0.2em;
top: 0.2em;
width: 1.6em;
}
.gnat { background-color: var(--bronze); }
.gnat div {
background: var(--iron);
border-radius: 1em/0.8em;
height: 0.4em;
left: 0.9em;
top: 0.9em;
transform: rotate(-10deg);
width: 0.55em;
}
.gnat div::before,
.gnat div::after {
background: var(--robins-egg);
border-radius: 0.5em 1em 0.5em 0.5em;
height: 0.4em;
left: 0.04em;
opacity: 0.8;
top: -0.3em;
transform:
rotate(-60deg)
skew(-20deg, -15deg);
width: 0.4em;
}
.gnat div::after {
font-family: comic-sans;
left: -0.05em;
top: -0.68em;
transform:
rotate(-90deg)
skew(-15deg, -20deg)
translateZ(-1em);
}
</style>
';
$first_run = true;
} else {
$css = '';
}
// css class names for each letter (array or string)
$settings = array(
'A' => array('ant', 'antler'),
'B' => array('bat', 'blackbird', 'bumblebee', 'bunny-face'),
'C' => array('cabbage-white', 'caterpillar', 'cats-eye', 'centipede', 'cinnabar-caterpillar', 'common-blue', 'crow-flying'),
'D' => array('damselfly', 'down-feather', 'dragonfly', 'duckling'),
'E' => 'earthworm',
'F' => array('fox-face', 'frog-submerged', 'frogspawn'),
'G' => array('gnat', 'goats-eye', 'grasshopper', 'grove-snail'),
'H' => 'hungry-chick',
'I' => 'hedgehog',
'J' => 'moon-jellyfish',
'K' => 'ladybird',
'L' => 'woodlouse',
'M' => array('minnowv', 'money-spider', 'moth', 'mouse', 'mussel'),
'N' => 'cats-nose',
'O' => 'easter-eggs',
'P' => 'peacock-feather',
'Q' => 'pet-rock',
'R' => array('rabbit', 'ray', 'robin'),
'S' => array('scallop', 'sheep', 'shell', 'shield-bug', 'slow-worm', 'slug', 'songbird-eggs', 'sparrow', 'spider-dangle', 'spider-web', 'starfish', 'swan', 'swift'),
'T' => 'tadpole',
'U' => 'seagull',
'V' => 'crow-feather',
'W' => array('wasp', 'wing', 'wood-mouse'),
'X' => 'cat-tracks',
'Y' => 'bird-print',
'Z' => 'seagull-foot',
);
// if there are several classnames for one letter (array)
if (isset($settings[$char2]) and is_array($settings[$char2])) {
$index = rand(0, count($settings[$char2])-1);
$style = $settings[$char2][$index];
$value = '';
// if there is only one classname for one letter (string)
} else if (isset($settings[$char2])) {
$style = $settings[$char2];
$value = '';
// if there is no classname because of number or special letters (no array and no string in $settings)
} else {
$style = 'letter';
$value = $char1.$char2;
}
// set extra css class if called (flip / stripes / darkmode)
if(strpos($class, 'flip') !== false) {
$style .= ' flip';
}
if(strpos($class, 'stripes') !== false) {
$style .= ' stripes';
}
if(strpos($class, 'darkmode') !== false) {
$style .= ' darkmode';
}
// if there is no nick name only return the css
if ($nick==null) {
$html = '';
} else {
$html = '<div class="avatar '.$style.'"><div>'.$value.'</div></div>';
}
return $css.$html;
}
echo '<meta charset="utf-8"><body style="background:#223;margin:2em;font-size:1.18em;color:#ede8d5">';
#echo 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
echo css_avatar();
echo css_avatar('Harry');
echo css_avatar('Tom van Tadis');
echo css_avatar('Nick Nolte');
echo '<br>';
echo css_avatar('Harry', 'stripes');
echo css_avatar('Tom van Tadis', 'stripes');
echo css_avatar('Nick Nolte', 'stripes');
echo '<br>';
echo css_avatar('Harry', 'flip');
echo css_avatar('Tom van Tadis', 'flip');
echo css_avatar('Nick Nolte', 'flip');
echo '<br>';
echo css_avatar('Harry', 'flip stripes darkmode');
echo css_avatar('Tom van Tadis', 'flipstripesdarkmode');
echo css_avatar('Nick Nolte', 'flip,stripes,darkmode');
echo '<br>';
echo css_avatar('4711');
echo css_avatar('47 11');
echo css_avatar('EE 11');
echo '<br style="clear:both">';
echo css_avatar('Die Ärzte');
echo css_avatar('ßß ßß');
echo css_avatar('\\ \\', 'darkmode');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment