# Congra

## spec

- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22

# Example 15

## Below are various ways of specifying the same basic conic gradient:

`conic-gradient(#f06, gold)`
`conic-gradient(at 50% 50%, #f06, gold)`
`conic-gradient(from 0deg, #f06, gold)`
`conic-gradient(from 0deg at center, #f06, gold)`
`conic-gradient(#f06 0%, gold 100%)`
`conic-gradient(#f06 0deg, gold 1turn)`

# Example 16

## Below are various ways of specifying the same basic conic gradient. This demonstrates how even though color stops with angles outside [0deg, 360deg) are not directly painted, they can still affect the color of the painted part of the gradient.

`conic-gradient(white -50%, black 150%)`
`conic-gradient(white -180deg, black 540deg)`
`conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%))`

# Example 17

## Below are two different ways of specifying the same rotated conic gradient, one with a rotation angle and one without:

`conic-gradient(from 45deg, white, black, white)`
`conic-gradient(hsl(0,0%,75%), white 45deg, black 225deg, hsl(0,0%,75%))`

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

`conic-gradient(white 45deg, black 225deg, white 405deg)`

# Example 18

## A conic gradient with a radial gradient overlaid on it, to draw a hue & saturation wheel:

`conic-gradient(red, magenta, blue, aqua, lime, yellow, red)`

# Example 19

## A conic gradient used to draw a simple pie chart. The 0deg 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.

`conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg)`

# Example 20

## Basic repeating conic gradient:

`repeating-conic-gradient(gold, #f06 20deg)`

# Example 21

## Repeating color stops with abrupt transitions creates a starburst-type background:

`repeating-conic-gradient(hsla(0,0%,100%,.2) 0deg 15deg, hsla(0,0%,100%,0) 0deg 30deg)`

# Example 22

## Here repeating color stops with abrupt transitions are used to create a checkerboard:

`repeating-conic-gradient(black 0deg 25%, white 0deg 50%)`