1 element pure CSS pencil set (buggy)

1-element-pure-css-pencil-set-buggy.markdown

1 element pure CSS pencil set (buggy)

Saw this Pen and thought I could do a 1 element pencil set.

Sadly, this doesn't work quite as intended in any browser. Chrome introduces gradient blurriness (bug 958085) and also has little edge matching issues for the masking gradients. Firefox only uses one mask layer (bug 1548091)

A Pen by Ana Tudor on CodePen.

License.

index.html

<div id='pencil-set'></div>

style.scss

@import 'compass/css3';

$pencils: 
	#ffffff, #ffffad, #f2ff00, 
	#ffde00, #ffb800, #ff9100, 
	#ff6300, #ff4500, #e00000, 
	#ac0000, #ff71c2, #fb3995, 
	#e2006c, #b9006f, #a60086, 
	#871865, #b669ee, #a935cb, 
	#5f01a1, #002585, #061ef9, 
	#3470e6, #6ec6f7, #1eb9db, 
	#009498, #007850, #00a12d, 
	#9bc200, #b44c00, #b0b0b0, #000000;
$n: length($pencils);
$su: 100%/$n;
$sl: ();
$w: 93vw;
$b: 8vw;
$p: $w/$n;
$u: $p/3;
$h: 80vmin;
$a: 90deg - atan(.5*$p/$b)*180deg/pi();
$l2: red 66%, transparent 67%;

@for $i from 1 to $n {
	$sl: $sl, nth($pencils, $i) $i*$su, nth($pencils, $i + 1) 0
}

body {
	overflow: hidden;
	display: grid;
	place-content: center;
	margin: 0;
	height: 100vh;
	background: linear-gradient(#def2f3 9%, #669cab)
}

#pencil-set {
	position: relative;
	min-height: 13em;
	width: $w; height: $h;
	background:  
		linear-gradient(90deg, 
				#e6cd84 30%, #f5e7bf 50%, #e6cd84 70%) 
			0/ #{$p};
	--mask: 
		Linear-gradient(transparent calc(#{$b} - 1px), red 0), 
		Linear-gradient(#{$a}, #{$l2}) 
			0 0/ #{$p $b} repeat-x, 
		Linear-gradient(#{-$a}, #{$l2}) 
			0 0/ #{$p $b} repeat-x;
	-webkit-mask: var(--mask);
	-webkit-mask-composite: source-over, source-in, source-over;
					mask: var(--mask);
					mask-composite: add, intersect, add;
	
	&:before {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		border-top: solid $b transparent;
		padding-top: .5*$u;
		background: Linear-gradient(90deg, $sl);
		--mask: 
			Linear-gradient(red #{$b/5}, transparent 0) 
				border-box, 
			Radial-gradient(closest-side, 
					red calc(100% - 1px), transparent calc(100% - .5px)) 
				0 0/ #{$u} #{$u} repeat-x padding-box, 
			Linear-gradient(90deg, transparent 1px, red 0) 
				-.5px 0/ #{$u} content-box;
		-webkit-mask: var(--mask);
						mask: var(--mask);
		content: ''
	}
}