Public
Edited
Nov 17, 2023
{
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 200 150");
svg.setAttribute("style", "background-color: #fff");
const head = document.createElementNS("http://www.w3.org/2000/svg", "circle");
head.setAttribute("cx", "50");
head.setAttribute("cy", "75");
head.setAttribute("r", "25");
head.setAttribute("fill", "#f00");
const leftEar = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);
leftEar.setAttribute("d", "M30,75 C15,60 15,90 30,75");
leftEar.setAttribute("fill", "#f00");
const rightEar = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);
rightEar.setAttribute("d", "M70,75 C85,90 85,60 70,75");
rightEar.setAttribute("fill", "#f00");
const leftEye = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
leftEye.setAttribute("cx", "35");
leftEye.setAttribute("cy", "65");
leftEye.setAttribute("r", "5");
leftEye.setAttribute("fill", "#000");
const rightEye = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
rightEye.setAttribute("cx", "65");
rightEye.setAttribute("cy", "65");
rightEye.setAttribute("r", "5");
rightEye.setAttribute("fill", "#000");
const mouth = document.createElementNS("http://www.w3.org/2000/svg", "path");
mouth.setAttribute("d", "M45,90 C40,100 60,100 55,90");
mouth.setAttribute("stroke", "#000");
mouth.setAttribute("stroke-width", "2");
const body = document.createElementNS("http://www.w3.org/2000/svg", "path");
body.setAttribute("d", "M50,100 C35,125 65,125 50,100");
body.setAttribute("fill", "#f00");
const tail = document.createElementNS("http://www.w3.org/2000/svg", "path");
tail.setAttribute("d", "M75,100 C75,110 90,115 85,125");
tail.setAttribute("fill", "#f00");
svg.appendChild(head);
svg.appendChild(leftEar);
svg.appendChild(rightEar);
svg.appendChild(leftEye);
svg.appendChild(rightEye);
svg.appendChild(mouth);
svg.appendChild(body);
svg.appendChild(tail);
// document.body.appendChild(svg);
return svg;
}
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.
