“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” ― Antoine de Saint-Exupéry
Public
Edited
Jul 15, 2024
Paused
Comments locked
1 star
inline = ({
style: [
["--width", "var(--scale) * var(--cqw)"],
["--height", "var(--scale) * var(--cqh)"],
["width", "min(var(--width), var(--aspect-ratio) * var(--height))"],
["height", "min(var(--height), var(--width) / (var(--aspect-ratio)))"],
["background", "var(--has-conic-gradient, none) currentColor"]
]
.map((declaration) => declaration.join(": "))
.join("; ")
})
available = CSS.supports("(aspect-ratio: 1)")
ratios = ["16:9", "4:3", "3:4", "2:3", "1:3", "1"]
cqw = (width - padding * 2) / 100
cqh = (height - padding * 2) / 100
padding = 50
height = Math.min(Math.floor(width / 2), 480)
(root.style.setProperty("--angle", angle), angle)
(root.style.setProperty("--tint", hue), hue)
root = document.documentElement
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.
