The avatar for @anaglyph-ic
Anaglyphic
Public
Edited
Feb 20, 2023
Fork of Anaver.se interactive icon
1 star
Insert cell
Insert cell
Insert cell
anaverseIcon("LOADING", 400)
Insert cell
Insert cell
Insert cell
anaverseIcon = (text, size) => {
let width = size;
let height = size;

const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("xmlns", "http://www.w3.org/2000/svg")
.style("cursor", "pointer");
//.style("border", "1px solid black");

var bg = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width * text.length)
.attr("height", height)
.attr("fill", color === "Clear" ? "white" : "#1E1E1E");

var cyan = svg
.append("text")
.attr("font-family", "sans-serif")
.attr("x", width / 2)
.attr("y", height / 2)
.attr("fill", "rgb(0,255,235)")
.attr("font-size", "20px")
.attr("font-weight", "bolder")
.style("mix-blend-mode", blendmode)
.text(text);

var red = svg
.append("text")
.attr("font-family", "sans-serif")
.attr("x", width / 2)
.attr("y", height / 2)
.attr("fill", "rgb(255,0,0)")
.attr("font-size", "20px")
.attr("font-weight", "bolder")
.style("mix-blend-mode", blendmode)
.text(text);

var delta = 2;
var dur = 2000;
setInterval(() => {
cyan
.transition()
.duration(dur / 2)
.attr("transform", `translate(${delta},0)`);
red
.transition()
.duration(dur / 2)
.attr("transform", `translate(${-delta},0)`);

cyan
.transition()
.duration(dur / 2)
.delay(dur / 2)
.attr("transform", `translate(${-delta},0)`);
red
.transition()
.duration(dur / 2)
.delay(dur / 2)
.attr("transform", `translate(${delta},0)`);
}, dur);

return svg.node();
}
Insert cell
height = 200
Insert cell
width = height
Insert cell

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.
Learn more