ZF promo - slide bg

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>
<script src="https://unpkg.com/trianglify/dist/trianglify.bundle.js"></script>
<div></div>

SCSS

*, :before, :after { margin:0; padding:0; box-sizing:border-box; }

$green: rgba(55,182,156,1);
$dblue: rgba(23,67,103,1);
$blue: rgba(59,160,209,1);

div {
	width: 320px;
	height: 180px;
	background:
		// linear-gradient(180deg, rgba(#fff, 1) 0%, rgba(#fff, 0) 50%, rgba($dblue, 0) 50%, rgba($dblue, 1) 100%),
		//radial-gradient(ellipse farthest-corner at 50% 0%, rgba($dblue, 1) 0%, rgba($dblue, 0) 100%),
		linear-gradient(0deg, rgba($dblue, 0) 0%, rgba($dblue, 1) 100%),
		linear-gradient(90deg,
			rgba($green, 1) 0%, rgba($blue, 1) 100%
		)
		//linear-gradient(90deg, rgba($green, 1) 0%, rgba($blue, 1) 100%)
		;
}

JavaScript

const pattern = trianglify({
	width: 16*40,
	height: 9*40,
	cellSize: 20,
	variance: 0.65,
	seed: 'zfenneus',
	xColors: ['#37B69C', '#3BA0D1'],
	yColors: ['rgba(23,67,103,1)', 'rgba(23,67,103,1)'],
	fill: true,
	//palette: trianglify.colorbrewer,
	colorSpace: 'lab',
	// colorFunction: trianglify.colorFunctions.interpolateLinear(0.5),
	// colorFunction: trianglify.colorFunctions.sparkle(0.15),
	colorFunction: function(params) {
		/*
			params.centroid, // centroid of polygon, non-normalized
			params.xPercent, // x-coordinate of centroid, normalized to [0, 1]
			params.yPercent, // y-coordinate of centroid, normalized to [0, 1]
			params.vertexIndices, // vertex indices of the polygon
			params.vertices, // [x, y] vertices of the polygon
			params.xScale, // x-colors scale for the pattern
			params.yScale, // y-colors scale for the pattern
			params.points, // array of generated points for the pattern
			params.opts, // options used to initialize the pattern
			params.random: cRand // seeded randomization function for use by color functions
		*/
		const jitter = () => (params.random() - 0.5) * 0.1;
		let a = params.xScale(params.xPercent + jitter());
		let b = chroma.rgb(23,67,103, 1);
		let p = params.yPercent + jitter();
		let p_from = 0;//.2;
		p = 1 - (Math.max(0, p-p_from) / (1-p_from));

		return chroma.mix(
			a, b,
			p,
			params.opts.colorSpace
		);
	},
	strokeWidth: 0,
	points: null

});
document.body.appendChild(pattern.toCanvas());