- var data = [
- 	{
- 		slist: ['#dc1f25', '#c71c22', '#8f0e12', '#640a0c', '#9e1117'], 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups. Brownie ice cream gingerbread cookie lemon drops.', 
- 		icon: '❤️'
- 	}, 
- 	{
- 		slist: ['#de27c1', '#de25cb', '#b01289', '#951574', '#b51b8b'], 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate apple pie soufflé topping dessert macaroon.', 
- 		icon: '💜'
- 	}, 
- 	{
- 		slist: ['#e9ef4d', '#e0e847', '#aec62a', '#9cb428', '#bacd4d'], 
- 		ptext: 'Dessert jelly gingerbread cake soufflé chocolate cake. Apple pie chocolate bar topping donut powder muffin cake tart. Liquorice marzipan sugar plum.', 
- 		icon: '💚'
- 	}
- ], n = data.length;

style :root { --n: #{n} }
h1 Infographic
- for(var i = 0; i < n; i++)
	- var c = data[i], s = c.slist
	p(style=`--c0: ${s[0]}; --c1: ${s[1]}; --c2: ${s[2]}; --c3: ${s[3]}; --c4: ${s[4]}`
		data-icon=`${c.icon}`) #{c.ptext}

@import 'compass/css3';

// #f8f8f8, #f5f5f7, #eaeaec, #e8e8ea
$base-w: 10rem; // base width (of light grey area)
$base-h: 3.25*$base-w; // base height (of light grey area)
$base-p: .075*$base-w; // base padding (inside light grey area)
$sh-tan: $base-w/$base-h; // tangent of shadow angle wrt horizontal
$sh-ang: atan($sh-tan)*180deg/pi(); // shadow angle wrt horizontal
$rond-r: .1*$base-w; // corner radius (of grey area)
$bite-r: .65*$base-w; // bite radius
$bite-y: $bite-r + 1.5*$rond-r; // vertical bite offset
$in-off: .5*$rond-r; // inner offset
$back-w: $base-w - 2*$in-off; // width of neon part showing through bite
$back-h: $base-h - 2*$in-off; // height of neon part showing through bite
$back-p: $rond-r - $in-off; // "padding" of neon part (incl in its content-box)
$off-dx: $rond-r*sin($sh-ang); // inner horizontal offset
$off-dy: $rond-r*cos($sh-ang); // inner vertical offset
$out-dx: .75*$base-w; // outer horizontal offset
$out-dy: $sh-tan*$out-dx; // outer vertical offset
$full-w: $base-w - $rond-r + $off-dx + $out-dx; // full width of <p>
$full-h: $base-h - $rond-r + $off-dy + $out-dy; // full height of <p>
// "right margin" = distance between right edge of light grey area and right edge of <p>
$full-m: $out-dx + $off-dx - $rond-r;

* { margin: 0 }

html { font: 2vw/ 1.25 bubbler one, trebuchet ms, sans-serif }

body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	height: 100vh;
	background: #404042
}

h1 {
	order: var(--n);
	color: #fff;
	font-size: 5em;
	font-weight: 900;
	text-shadow: -1px -1px #999;
	text-transform: uppercase
}

p {
	box-sizing: border-box;
	position: relative;
	margin: 1em 0;
	padding: 
		/* top    */ $bite-y + $bite-r + $base-p 
		/* right  */ $full-m + $base-p  
		/* bottom */ 0 
		/* left   */ $base-p;
	width: $full-w; height: $full-h;
	text-indent: 1em;
	filter: drop-shadow(1px 1px 2px rgba(#000, .35));
	counter-increment: c;
	
	&:last-of-type { margin-right: -$full-m }
	
	&:before, &:after {
		position: absolute;
		z-index: -1;
		top: 0; left: 0;
		border-radius: $rond-r
	}
	
	&:before {
		--points: 0 0,
			$base-w - $rond-r + $off-dx $rond-r - $off-dy, 
			100% $rond-r - $off-dy + $out-dy, 
			100% 100%, 
			$rond-r - $off-dx + $out-dx 100%, 
			$rond-r - $off-dx $base-h - $rond-r + $off-dy;
		padding: 
			/* top    */ $in-off 
			/* right  */ $full-m + $in-off 
			/* bottom */ $out-dy + $off-dy - $rond-r + $in-off 
			/* left   */ $in-off;
		width: $back-w; height: $back-h;
		background: 
			radial-gradient(circle at calc(100% + .5rem) #{$bite-y - $in-off + .25rem}, transparent calc(#{$bite-r} - .5rem),  rgba(#000, .5) $bite-r) content-box, 
			Linear-gradient(90deg, var(--c0), var(--c1) 50%, var(--c2) 0, var(--c3) 85%, var(--c4)) content-box, 
			linear-gradient($sh-ang - 90deg, transparent,  rgba(#000, .65));
		font: #{.625*$base-w}/ #{2*$bite-y} ubuntu, trebuchet ms, verdana, arial, sans-serif;
		color: #fff;
		text-indent: .8125em;
		text-shadow: 1px 1px 1px #000;
		-webkit-clip-path: polygon(var(--points));
						clip-path: polygon(var(--points));
		content: counter(c)
	}
	
	&:after {
		--mask: Radial-gradient(circle at 100% #{$bite-y}, transparent calc(#{$bite-r} - 1px), red #{$bite-r});
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding: $base-p;
		width: $base-w; height: $base-h;
		background: Linear-gradient(90deg, #f8f8f8, #f5f5f7 50%, #eaeaec 0, #e8e8ea);
		font-size: 2em;
		-webkit-mask: var(--mask);
						mask: var(--mask);
		content: attr(data-icon)
	}
}