Polar interpolation discontinuity

dabblet.css

/**
 * Polar interpolation discontinuity
 */

div:nth-of-type(1) {
	background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 180));
}

div:nth-of-type(2) {
	background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 179));
}

div:nth-of-type(3) {
	background: linear-gradient(to right in oklch, oklch(70% 0.1 1), oklch(70% 0.1 180));
}

/* Demo styling */
div {
	padding: 1em;
	flex: 1;
}

body {
	padding: 2em;
	display: flex;
	flex-flow: column;
	gap: 1em;
	height: 100vh;
}

* {
	margin: 0;
	box-sizing: border-box;
}

dabblet.html

<p>0 to 180:
<div></div>

<p>0 to 179:
<div></div>

<p>1 to 180:
<div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}