📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
b = htl.html`<button style=${{
border: "none",
background: "#ff004d",
width: "80px",
height: "80px",
borderRadius: "50%",
display: "inline-block",
color: "white"
}}>t`
{
do {
b.innerHTML = Math.floor(animation.currentTime / 100) / 10;
yield animation.playState;
} while (true);
}
{
const b = htl.html`<button onclick=${() =>
animation.playState === "running"
? ((b.innerHTML = "play"), animation.pause())
: ((b.innerHTML = "pause"), animation.play())}>${
animation.playState === "paused" ? "play" : "pause"
}`;
return b;
}
htl.html`<button onclick=${() => (animation.currentTime = 0, animation.play())}>restart`
htl.html`<button onclick=${() => (animation.commitStyles(), animation.cancel())}>commit & cancel`
htl.html`<button onclick=${() => animation.cancel()}>cancel`
animation = b.animate(
[
{ background: "#ff004d", offset: 0 },
{ background: "#ff77ab", offset: 0.2 },
{ background: "#00e756", offset: 0.5 },
{ background: "#29adff", offset: 0.8 },
{ background: "#ff77ab", offset: 1 }
],
{
duration: 2000,
direction: "alternate",
iterations: Infinity
}
)
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.
