# conicGradient

> Builds a `conic-gradient(...)` value string for any `background-image` use.

```ts
import { conicGradient } from "@sdxc/u/color";
```

Builds a `conic-gradient(...)` value string for any `background-image` use.
A numeric `angle` is treated as degrees and wrapped in the `from` keyword
CSS requires; a string passes through as the full `from ... at ...` clause.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.conicGradient(45, "red", "blue")` | `"conic-gradient(from 45deg, red, blue)"` |
| `u.conicGradient("from 45deg at top left", "red", "blue")` | `"conic-gradient(from 45deg at top left, red, blue)"` |

## Examples

### Basic example

Use `conicGradient` with a starting angle and two or more colors to sweep colors around a center point:

```tsx
<div
	mix={[
		bg({
			image: conicGradient(
				0,
				"var(--ui-color-danger-500)",
				"var(--ui-color-warning-400)",
				"var(--ui-color-success-500)",
				"var(--ui-color-brand-500)",
				"var(--ui-color-danger-500)",
			),
		}),
		circle(),
		is(32),
		bs(32),
	]}
/>
```

### Pie charts

Place each stop with a start and an end position, like `0% 40%`, to draw hard-edged slices:

```tsx
<div
	mix={[
		bg({
			image: conicGradient(
				0,
				{ color: "var(--ui-color-brand-500)", position: "0% 40%" },
				{ color: "var(--ui-color-success-500)", position: "40% 75%" },
				{ color: "var(--ui-color-warning-400)", position: "75% 100%" },
			),
		}),
		circle(),
		is(32),
		bs(32),
	]}
/>
```

### Rotation and center

Pass the full clause, like `from 90deg at top left`, to rotate the sweep and move its center:

```tsx
<div
	mix={[
		bg({
			image: conicGradient(
				"from 90deg at top left",
				"var(--ui-color-brand-600)",
				"var(--ui-color-warning-300)",
			),
		}),
		fg("brand.onSolid"),
		is(64),
		bs(32),
		...,
	]}
>
	from 90deg at top left
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.conicGradient(45, "red", "blue"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.conicGradient(45, "red", "blue"))
```

## Signature

```ts
u.conicGradient(angle: number | `from ${number}deg` | `from ${number}deg at ${GradientPosition}` | (string & {}), ...stops: GradientStop[])
```