- let palettes = {
- '🦁': '#a728a9 #ce3ec1 #f2408a #ffa26c #ffdb83',
- '🐯': '#7019fb #6b5bfc #4799fc #34d6fd #32fcfe',
- '🦊': '#360b76 #5717b6 #7322e9 #a437f2 #d255fb',
- '🐺': '#006dee #0093fa #00bbee #00eadf #88ffe9',
- '🦝': '#f75759 #ff7f52 #ff9352 #ffba4a #fade73',
- '🐮': '#26a7fb #45c3fd #75d9fd #a0ebff #e7faff',
- '🐭': '#ffb528 #ff8c40 #f86759 #e14b71 #bb3e85',
- '🐱': '#95ffdc #00e1fa #00c1f6 #419fe3 #717dbf',
- '🐼': '#b5ce4f #eed54e #fbb64b #fc7c64 #eb6575',
- '🐻': '#885789 #cf6c84 #f7966f #f6d169 #8bbd69',
- '🐨': '#00aab7 #2889ac #48678f #8478ac #fd98b3',
- '🐰': '#ffca81 #f29e85 #94688c #595678 #4c7ba3',
- '🦔': '#f9ffce #e7cab2 #b8a09f #91ffe2 #00b3ff',
- '🐥': '#92ffe1 #5baeff #fdffcd #ff82a3 #a06eb2'
- }
p While this still works as intended, I now find it a bit clunky and would probably go with a simple SVG filter that can also create a random dithering effect - see it in
a(href='https://codepen.io/thebabydino/pen/WNVzBRY' target='_blank') this Pen
| .
- for(let p in palettes) {
- let curr = palettes[p].split(' ');
- let n = curr.length;
- let up = Math.ceil(.5*n);
- let c0 = curr.filter((c, i) => !(i%2));
- let slist0 = c0.slice(1).map((c, i) => `${c0[i]} ${+((i + 1)*100/up).toFixed(1)}%, ${c} 0`);
- let dn = Math.floor(.5*n);
- let c1 = curr.filter((c, i) => (i%2));
- let slist1 = c1.slice(1).map((c, i) => `${c1[i]} ${+((i + 1)*100/dn).toFixed(1)}%, ${c} 0`);
- slist1 = `${c1[0]} 0, ${slist1}, ${c1[dn - 1]} ${100 - 50/n}%`;
.card(style=`--slist0: ${slist0}; --slist1: ${slist1}; --dn: ${dn}`) #{p}
- }
View Compiled
@import 'compass/css3';
$w: 13rem;
$f: 1.5;
$h: $f*$w;
$n: 7;
$g: 1rem;
@function dots($n: 2) { // generate dither pixels
$dots: ();
@for $i from 0 to $n {
$sx: ($i + 1)*4px;
@for $j from 0 to 2 {
$sg: pow(-1, $j);
$dx: if(($i + $j)%2 > 0, 50%, calc(50% + #{.5*$sx}));
$dy: $sx - 2px + $sg*1px;
@for $k from 0 to 2 {
$dots: $dots,
var(--disc) $dx calc(.5*var(--unit) + #{pow(-1, $k)*$dy})/ #{$sx} var(--unit)
}
}
}
@return $dots
}
body { /* just layout stuff, nothing to do with card backgrounds */
--h: #{$f*$w};
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(var(--n, #{$n}), var(--w, #{$w}));
grid-gap: $g;
place-content: center;
margin: 0;
padding: $g;
min-height: 100vh;
background: #333;
@for $i from 1 through $n {
@media (max-width: ($n - $i + 1)*$w + ($n - $i + 2)*$g) {
@if $i == $n {
--w: 100%;
--h: #{$f*100vw};
--fs: 25vw
}
@else { --n: #{$n - $i} }
}
}
}
p {
grid-column: 1/ -1;
color: #ededed;
font: clamp(.875em, 3vw, 1.5em) cursive;
text-align: center;
text-wrap: balance
}
a { color: hotpink }
.card {
display: grid; /* emoji placement */
place-content: center;
position: relative;
width: var(--w); height: var(--h);
border-radius: 7px;
box-shadow: 2px 2px 17px #000;
font-size: var(--fs, 4em); /* emoji size */
&:before, &:after {
/* use absolutely positioned pseudos covering
* entire card to create dithered background */
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
content: ''
}
&:before {
/* striped background on the :before (bottom layer) */
background: Linear-Gradient(var(--slist0))
}
&:after { /* masking magic on top background layer */
--n: calc(2*var(--dn) + 1);
--unit: calc(var(--h)/var(--n));
--stripe: linear-gradient(transparent 50%, red 0) 0 0/ 100% calc(2*var(--unit));
--disc: radial-gradient(circle, red .5px, transparent 1px);
--dots: #{dots()};
background: Linear-Gradient(transparent calc(50%/var(--n)), var(--slist1), transparent 0);
mask: var(--stripe), var(--dots);
mask-composite: exclude
}
}
View Compiled
// NO JS AT ALL
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.