- 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'
- }

- 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}
- }

@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} }
		}
	}
}

.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;
		top: 0; right: 0; bottom: 0; left: 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);
		-webkit-mask: var(--stripe), var(--dots);
		-webkit-mask-composite: xor; /* non-standard, WebKit */
						mask: var(--stripe), var(--dots);
						mask-composite: exclude /* standard */
	}
}

// NO JS AT ALL