8000 [css-images-4] repeating-conic-gradient() examples, more conic-gradie… · simonwuelker/csswg-drafts@1f69411 · GitHub
Skip to content

Commit 1f69411

Browse files
LeaVerouLeaVerou
committed
[css-images-4] repeating-conic-gradient() examples, more conic-gradient() examples
1 parent 08d0b92 commit 1f69411

9 files changed

Lines changed: 55 additions & 10 deletions

File tree

‎css-images-4/Overview.bs‎

Lines changed: 55 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -681,6 +681,20 @@ Conic Gradient Examples</h4>
681681
<img src="images/conic1.png" alt="" >
682682
</div>
683683

684+
<div class=example>
685+
Below are various ways of specifying the same basic conic gradient.
686+
This demonstrates how even color stop angles outside [0deg, 360deg) are not directly painted,
687+
they can still affect the color of the painted part of the gradient.
688+
689+
<pre>
690+
background: conic-gradient(white -50%, black 150%);
691+
background: conic-gradient(white -180deg, black 540deg);
692+
background: conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%));
693+
</pre>
694+
695+
<img src="images/conic2.png" alt="" >
696+
</div>
697+
684698
<div class=example>
685699
Below are two different ways of specifying the same rotated conic gradient, one with a rotation angle and one without:
686700

@@ -689,27 +703,28 @@ Conic Gradient Examples</h4>
689703
background: conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%));
690704
</pre>
691705

692-
<img src="images/conic2.png" alt="" >
706+
<img src="images/conic3.png" alt="" >
693707

694708
Note that offsetting every color stop by the rotation angle instead would not work and produces an entirely different gradient:
695709

696710
<pre>
697711
background: conic-gradient(white 45deg, black 225deg, white 405deg);
698712
</pre>
699713

700-
<img src="images/conic3.png" alt="" >
714+
<img src="images/conic4.png" alt="" >
701715
</div>
702716

703717
<div class=example>
704-
A conic gradient used to draw a hue wheel:
718+
A conic gradient with a radial gradient overlaid on it, to draw a hue & saturation wheel:
705719

706720
<pre>
707-
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
721+
background: radial-gradient(gray, transparent),
722+
conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
708723
border-radius: 50%;
709724
width: 200px; height: 200px;
710725
</pre>
711726

712-
<img src="images/conic4.png" alt="" >
727+
<img src="images/conic5.png" alt="" >
713728
</div>
714729

715730
<div class=example>
@@ -719,12 +734,12 @@ Conic Gradient Examples</h4>
719734
effectively producing solid color segments.
720735

721736
<pre>
722-
background: conic-gradient(yellowgreen 40%, gold 0 75%, #f06 0);
737+
background: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
723738
border-radius: 50%;
724739
width: 200px; height: 200px;
725740
</pre>
726741

727-
<img src="images/conic5.png" alt="" >
742+
<img src="images/conic6.png" alt="" >
728743
</div>
729744

730745
<!--
@@ -749,8 +764,36 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
749764
as their respective non-repeating siblings defined previously.
750765

751766
<div class=example>
752-
<pre>repeating-conic-gradient(at 20%, white 0deg, white 20deg, red 20deg, red 40deg)</pre>
753-
<p class='issue'>Insert rendering here.
767+
Basic repeating conic gradient:
768+
769+
<pre>background: repeating-conic-gradient(gold, #f06 20deg);</pre>
770+
771+
<img src="images/repeating-conic1.png" alt="">
772+
</div>
773+
774+
<div class=example>
775+
Repeating color stops with abrupt transitions creates a starburst-type background:
776+
777+
<pre>background: repeating-conic-gradient(
778+
hsla(0,0%,100%,.2) 0deg 15deg,
779+
hsla(0,0%,100%,0) 0deg 30deg
780+
) #0ac;</pre>
781+
782+
<img src="images/repeating-conic2.png" alt="">
783+
</div>
784+
785+
<div class=example>
786+
Here repeating color stops with abrupt transitions are used to create a checkerboard:
787+
788+
<pre>background: repeating-conic-gradient(black 0deg 25%, white 0deg 50%);
789+
background-size: 60px 60px;</pre>
790+
791+
<img src="images/repeating-conic3.png" alt="">
792+
793+
The same checkerboard can be created via non-repeating conic gradients:
794+
795+
<pre>background: conic-gradient(black 25%, white 0deg 50%, black 0deg 75%, white 0deg);
796+
background-size: 60px 60px;</pre>
754797
</div>
755798

756799

@@ -796,7 +839,9 @@ Gradient Color-Stops</h3>
796839
T: ,
797840
N: <color-stop>
798841
</pre>
799-
842+
843+
<p class='issue'>
844+
Are lengths useful in <<angular-color-stop>>, for a given gradient circle?
800845

801846
<p class='issue'>
802847
This is past the complexity point where it can be easily understood with just prose.

‎css-images-4/images/conic2.png‎

-10.6 KB
Loading

‎css-images-4/images/conic3.png‎

1020 Bytes
Loading

‎css-images-4/images/conic4.png‎

523 Bytes
Loading

‎css-images-4/images/conic5.png‎

19.1 KB
Loading

‎css-images-4/images/conic6.png‎

5.16 KB
Loading

‎css-images-4/images/repeating-conic1.png‎

47.6 KB
Loading

‎css-images-4/images/repeating-conic2.png‎

6.2 KB
Loading

‎css-images-4/images/repeating-conic3.png‎

1.02 KB
Loading

0 commit comments

Comments
 (0)