[css-images-4] Added rotation angle to conic-gradient(), added several examples

Author: LeaVerou

css-images-4/Overview.bs

@@ -572,14 +572,16 @@ Gradients</h2>
 <h3 id='conic-gradients'>
 Conic Gradients: the ''conic-gradient()'' notation</h3>
 
+	
+
 	A conic gradient starts by specifying the center of a circle,
 	similar to radial gradients,
 	except that conic gradient color-stops are placed <em>around</em> the circumference of the circle,
 	rather than on a line emerging from the center,
 	causing the color to smoothly transition as you spin around the center,
 	rather than as you progress outward from the center.
 
-	A conic gradient is specified by indicating the center of the gradient,
+	A conic gradient is specified by indicating a rotation angle, the center of the gradient,
 	and then specifying a list of color-stops.
 	Unlike linear and radial gradients,
 	whose color-stops are placed by specifying a <<length>>,
@@ -590,6 +592,16 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 	Note: These gradients are called "conic" or "conical"
 	because, if the color stops are chosen to be significantly lighter on one side than the other,
 	it produces a pattern that looks like a cone observed from above.
+	They are also known as "angle" gradients in some contexts,
+	since they are produced by varying the rotation angle of a ray.
+
+	<div class=example>
+		<div style="overflow: hidden">
+			<img style="float: right; margin-left: 1em;" src='images/conic-diagram.png' alt="[An image showing a box with a background shading gradually clockwise from white to black, starting from the top. A gradient circle is shown, and the colors at 0 and 216 degrees respectively.]">
+
+			This example visually illustrates how conic-gradient(at 25% 30%, white, black 60%) would be drawn. Note that since color stop positions always resolve to angles, the only effect of the center center is a 2D translation of the gradient, i.e. it does not affect how the gradient is drawn.
+		</div>
+	</div>
 
 <h4 id='conic-gradient-syntax' class='no-toc'>
 ''conic-gradient()'' Syntax</h4>
@@ -598,16 +610,28 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 
 	<pre class='prod'>
 		<dfn>conic-gradient()</dfn> = conic-gradient(
-			[ at <<position>> , ]?
+			[ from <<angle>> ]? [ at <<position>> ]?,
 			<<angular-color-stop-list>>
 		)
 	</pre>
 
-	The <<position>> argument is defined in [!CSS3VAL],
-	and is resolved using the center-point as the object area
-	and the gradient box as the positioning area.
-	If this argument is omitted,
-	it defaults to 'at center'.
+	The arguments are defined as follows:
+
+	<dl dfn-type=value dfn-for="conic-gradient(), repeating-conic-gradient()">
+		<dt><dfn><<angle>></dfn>
+		<dd>
+			The entire gradient is rotated by this angle.
+			If omitted, defaults to ''<angle>|0deg''.
+
+		<dt><dfn><<position>></dfn>
+		<dd>
+			Determines the <dfn dfn>gradient center</dfn> of the gradient.
+			The <<position>> value type (which is also used for 'background-position')
+			is defined in [[!CSS3VAL]],
+			and is resolved using the center-point as the object area
+			and the <a>gradient box</a> as the positioning area.
+			If this argument is omitted, it defaults to ''<position>/center''.
+	</dl>
 
 	<p class='issue'>
 		Anything else that might be useful?  Defining the shape of the gradient as elliptical, perhaps?
@@ -640,12 +664,68 @@ Placing Color Stops</h4>
 <h4 id='conic-gradient-examples' class='no-toc'>
 Conic Gradient Examples</h4>
 
-	<p class='issue'>
-		Produce examples.
-		Better yet, strike this section, and intermix some examples into the sections above.
-		Do this for the other two types of gradients as well.
+	All of the following ''conic-gradient()'' examples are presumed to be applied to a box that is 300px wide and 200px tall, unless otherwise specified.
+
+	<div class=example>
+		Below are various ways of specifying the same basic conic gradient:
+
+		<pre>
+			background: conic-gradient(#f06, gold);
+			background: conic-gradient(at 50% 50%, #f06, gold);
+			background: conic-gradient(from 0deg, #f06, gold);
+			background: conic-gradient(from 0deg at center, #f06, gold);
+			background: conic-gradient(#f06 0%, gold 100%);
+			background: conic-gradient(#f06 0deg, gold 1turn);
+		</pre>
+
+		<img src="images/conic1.png" alt="" >
+	</div>
+
+	<div class=example>
+		Below are two different ways of specifying the same rotated conic gradient, one with a rotation angle and one without:
+
+		<pre>
+			background: conic-gradient(from 45deg, white, black, white);
+			background: conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%));
+		</pre>
+
+		<img src="images/conic2.png" alt="" >
 
+		Note that offsetting every color stop by the rotation angle instead would not work and produces an entirely different gradient:
+
+		<pre>
+			background: conic-gradient(white 45deg, black 225deg, white 405deg);
+		</pre>
 
+		<img src="images/conic3.png" alt="" >
+	</div>
+
+	<div class=example>
+		A conic gradient used to draw a hue wheel:
+
+		<pre>
+			background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
+			border-radius: 50%;
+			width: 200px; height: 200px;
+		</pre>
+
+		<img src="images/conic4.png" alt="" >
+	</div>
+
+	<div class=example>
+		A conic gradient used to draw a simple pie chart. 
+		The 0 color stop positions will be fixed up to be equal to the position of the color stop before them.
+		This will produce infinitesimal (invisible) transitions between the color stops with different colors,
+		effectively producing solid color segments.
+
+		<pre>
+			background: conic-gradient(yellowgreen 40%, gold 0 75%, #f06 0);
+			border-radius: 50%;
+			width: 200px; height: 200px;
+		</pre>
+
+		<img src="images/conic5.png" alt="" >
+	</div>
 
 <!--
 ████████  ████████ ████████  ████████    ███    ████████ ████ ██    ██  ██████