Skip to content

Commit

Permalink
[css-images-4] Add the use of “longer” hue interpolation for the colo…
Browse files Browse the repository at this point in the history
…r wheel in the example

Fix w3c#1222
  • Loading branch information
yisibl committed Feb 20, 2025
1 parent ca17ac4 commit a75f3e6
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion css-images-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1701,7 +1701,18 @@ Conic Gradient Examples</h4>
width: 200px; height: 200px;
</pre>

<img src="images/conic5.png" alt="" >
You can also achieve the same effect using "longer" hue interpolation. This is more concise and makes it easy to switch to other color spaces.

<pre class=lang-css>
background: radial-gradient(closest-side, gray, transparent),
conic-gradient(in hsl longer hue, red 0 100%);
transform: scaleX(-1);

border-radius: 50%;
width: 200px; height: 200px;
</pre>

<img src="images/conic5.png" alt="color wheel">
</div>

<div class='example' id='ex-conic-pie'>
Expand Down

0 comments on commit a75f3e6

Please sign in to comment.