# fill-opacity

> Sets the SVG `fill-opacity` paint property.

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

Sets the SVG `fill-opacity` paint property. A bare number is read as a 0-100
integer, matching `u.opacity()`. The ratio is stringified because the
serializer appends `px`, and `fill-opacity: 0.5px` is dropped as invalid.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.fillOpacity(50)` | `css({ fillOpacity: "0.5" })` |
| `u.fillOpacity("var(--chart-fill-opacity)")` | `css({ fillOpacity: "var(--chart-fill-opacity)" })` |

## Examples

### Basic example

Use `fillOpacity` with a number from 0 to 100 to make the fill of an SVG shape see-through, leaving its stroke alone:

```tsx
<svg width={240} height={64} viewBox="0 0 240 64" aria-hidden="true">
	<circle cx={32} cy={32} r={28} mix={[fill("brand"), fillOpacity(25)]} />
	<circle cx={88} cy={32} r={28} mix={[fill("brand"), fillOpacity(50)]} />
	<circle cx={144} cy={32} r={28} mix={[fill("brand"), fillOpacity(75)]} />
	<circle cx={200} cy={32} r={28} mix={[fill("brand"), fillOpacity(100)]} />
</svg>
```

### Overlapping areas

Lower the fill opacity of overlapping shapes, like the areas of a chart, so each stays visible through the other:

```tsx
<svg width={240} height={96} viewBox="0 0 240 96" aria-hidden="true">
	<path
		d="M0 96 L0 60 L60 30 L120 50 L180 10 L240 40 L240 96 Z"
		mix={[fill("brand"), fillOpacity(40), stroke("brand"), strokeWidth(2)]}
	/>
	<path
		d="M0 96 L0 40 L60 70 L120 20 L180 60 L240 30 L240 96 Z"
		mix={[fill("success"), fillOpacity(40), stroke("success"), strokeWidth(2)]}
	/>
</svg>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.fillOpacity("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.fillOpacity(50))
```

## Responsive design

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

```ts
u.at("md", u.fillOpacity(50))
```

## Signature

```ts
u.fillOpacity(value: number | (string & {}))
```