display-p3CYM spectral mixHello, apcachHello, spectral.jsHello, Color.jsMetbrewer color schemesFabio Crameri’s ColormapsColorcetXKCD painbow color mapNamed CSS colorsOil SlickUMAP SleepwalkSliced Optimal TransportCanvas path blurBlue FluoriteWalk on Spheres — segments editionWalk on SpheresGraphene Moiré 1.1CMasher color interpolators (#27)Interpolate colors with Catmull-Rom/Cubic/Monotone…?“Perceptually uniform”?Hue blurcmocean color interpolators (#27)Linde–Buzo–Gray RGB Color stipplingAutochromeforcePolarforceAngularcolor2cssRandom ColorsCanvas SpiralFrida Kahlo’s paletteHello glitchBlack and white colored castelo
Grid illusions
svg`<svg width=${width} height=${height} style="background:gray">
${Array.from({ length: 1 + width / 40 }, (_, i) =>
Array.from(
{ length: 1 + height / 40 },
(_, j) =>
svg`<rect width=32 height=32 x=${i * 40} y=${j *
40} fill=black /><circle cx=${i * 40 - 4} cy=${j * 40 -
4} r=5 fill=white>`
)
).flat()}
`
svg`<svg width=${width} height=${height}>
${Array.from({ length: 1 + width / 40 }, (_, i) =>
Array.from(
{ length: 1 + height / 40 },
(_, j) => svg`<rect width=33 height=33 x=${i * 40} y=${j * 40} fill=black>`
)
).flat()}
`
import { height } from "@fil/height"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
