Conic Gradients

Svelte Component

Create conic gradient data visualizations for pie charts, loading spinners, and more.

Import

Types

Package

@brainandbones/skeleton

Source

View Source

Docs

Doc Source

Heat Map

Orange 10%
Yellow 25%
Red 65%

Primary 33%
Accent 33%
Warning 34%

Provide one or more color stops that start at 0% and end at 100%. The data set below will create a half red/green conic gradient.

import type { ConicStop } from '@brainandbones/skeleton';

const conicStops: ConicStop[] = [
	{ color: 'red', start: 0, end: 50 },
	{ color: 'green', start: 50, end: 100 }
];

html

<ConicGradient stops={conicStops} legend={false} spin={false}>(caption)</ConicGradient>

Display a Legend

A legend can be enabled by setting legend as true and provided labels for each stop.

const conicStops: ConicStop[] = [
	{ label: 'Label 1', color: 'red', start: 0, end: 33 },
	{ label: 'Label 2', color: 'green', start: 33, end: 66 },
	{ label: 'Label 3', color: 'blue', start: 66, end: 100 }
];

Colors

Via Theme Colors

Provide a theme color CSS custom property var(--color-primary-500) wrapped in rgb().

const conicStops: ConicStop[] = [
	{ label: 'Primary', color: 'rgb(var(--color-primary-500))', start: 0, end: 33 },
	{ label: 'Accent', color: 'rgb(var(--color-warning-500))', start: 33, end: 66 },
	{ label: 'Warning', color: 'rgb(var(--color-accent-500))', start: 66, end: 100 }
];

Via Tailwind Colors

To utilize default Tailwind colors, supply an array with the format [name: string, shade: number].

const conicStops: ConicStop[] = [
	{ label: 'Orange', color: ['orange', 500], start: 0, end: 10 },
	{ label: 'Yellow', color: ['yellow', 500], start: 10, end: 35 },
	{ label: 'Red', color: ['red', 500], start: 35, end: 100 }
];

Via Custom Colors

You can provide standard CSS color values as a string, including: color names, hex, rgba, HSL, or similar.

const conicStops: ConicStop[] = [
	{ label: 'Name', color: 'orange', start: 0, end: 10 },
	{ label: 'HSL', color: 'hsl(60deg 100% 50%)', start: 10, end: 35 },
	{ label: 'Hex', color: '#bada55', start: 35, end: 100 }
];

Spinner Gradient

To create a spinner, set spin to true, and created a smooth gradient transition between transparent and filled color stops. Note the numeric gap between stops.