“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
May 20, 2023
Paused
1 fork
padding = 50
wave = svg`<svg viewBox="0 0 ${segments.reduce((a, b) => a + b)} 100">
${Array.from(
segments,
($_, i) =>
`<path id="wave-${i}" fill="none" stroke="currentColor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="1" transform="translate(${
segments[i]
}, 0)" /><animate xlink:href="#wave-${i}" attributeName="d" dur="0.${
15 + !!i
}s" repeatCount="indefinite" from="M ${origin} L ${from.join(
" "
)}" to="M ${origin} L ${to.join(" ")}" />`
).join("")}
</svg>`
segments = Array.from({ length: 3 }, (_, i) => i * tail.x)
to = [
{ x: 18, y: 10 },
{ x: 52, y: 80 },
{ x: 65, y: 20 },
{ x: 65, y: 70 },
{ x: 80, y: 90 },
{ x: 90, y: 30 },
{ x: 100, y: 40 },
{ x: 110, y: 75 },
{ x: 120, y: 30 },
{ x: 130, y: 80 },
{ x: 140, y: 10 },
tail
].map(pair)
from = [
{ x: 20, y: 60 },
{ x: 50, y: 0 },
{ x: 60, y: 100 },
{ x: 70, y: 40 },
{ x: 80, y: 90 },
{ x: 90, y: 10 },
{ x: 100, y: 40 },
{ x: 110, y: 30 },
{ x: 120, y: 80 },
{ x: 130, y: 50 },
{ x: 140, y: 80 },
tail
].map(pair)
origin = pair({ x: 0, y: 50 })
pair = (p) => [p.x, p.y].join(",")
tail = ({ x: 150, y: 50 })
height = Math.min(Math.floor(width / 2), 480)
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.
