Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Last active April 24, 2024 17:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeaVerou/70c83eced9bb64d59a9c2e3796d212f3 to your computer and use it in GitHub Desktop.
Save LeaVerou/70c83eced9bb64d59a9c2e3796d212f3 to your computer and use it in GitHub Desktop.
Polar interpolation issues
/**
* Polar interpolation issues
*/
div {
padding: 2em;
flex: 1;
}
div:nth-of-type(1) {
background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 359));
}
div:nth-of-type(2) {
background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 180), oklch(70% 0.1 360));
}
div:nth-of-type(3) {
background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 90), oklch(70% 0.1 180), oklch(70% 0.1 270), oklch(70% 0.1 360));
}
/* 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;
}
<p>0 to 359:
<div></div>
<p>0 to 180 to 360:
<div></div>
<p>0 to 90 to 180 to 270 to 360:
<div></div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment