87 lines
1.7 KiB
JavaScript
87 lines
1.7 KiB
JavaScript
const canvas = d3.select(".canva");
|
|
|
|
// Add SVG element
|
|
const svg = canvas.append("svg")
|
|
.attr('width', '800')
|
|
.attr('height', '800');
|
|
|
|
// Hat
|
|
svg.append("rect")
|
|
.attr("width", 70)
|
|
.attr("height", 45)
|
|
.attr("x", "165")
|
|
.attr("y", "80")
|
|
|
|
svg.append("line")
|
|
.attr("x1", 150)
|
|
.attr("x2", 250)
|
|
.attr("y1", 125)
|
|
.attr("y2", 125)
|
|
.attr("stroke", "black")
|
|
|
|
// Body
|
|
svg.append("circle")
|
|
.attr("cx", "200")
|
|
.attr("cy", "170")
|
|
.attr("r", "45")
|
|
.attr("stroke", "black")
|
|
.attr("stroke-width", 5)
|
|
.attr("fill", "white")
|
|
|
|
svg.append("circle")
|
|
.attr("cx", "200")
|
|
.attr("cy", "270")
|
|
.attr("r", "60")
|
|
.attr("stroke", "black")
|
|
.attr("stroke-width", 5)
|
|
.attr("fill", "white")
|
|
|
|
svg.append("circle")
|
|
.attr("cx", "200")
|
|
.attr("cy", "400")
|
|
.attr("r", "80")
|
|
.attr("stroke", "black")
|
|
.attr("stroke-width", 5)
|
|
.attr("fill", "white")
|
|
|
|
svg.append("rect")
|
|
.attr("width", 10)
|
|
.attr("height", 50)
|
|
.attr("x", 120)
|
|
.attr("y", 0)
|
|
.attr("fill", "green")
|
|
.attr("rx", 15)
|
|
.attr("ry", 15);
|
|
|
|
// Face
|
|
svg.append("circle")
|
|
.attr("cx", "180")
|
|
.attr("cy", "170")
|
|
.attr("r", "5")
|
|
.attr("fill", "black")
|
|
|
|
svg.append("circle")
|
|
.attr("cx", "220")
|
|
.attr("cy", "170")
|
|
.attr("r", "5")
|
|
.attr("fill", "black")
|
|
|
|
// Shirt
|
|
svg.append("circle")
|
|
.attr("cx", "200")
|
|
.attr("cy", "240")
|
|
.attr("r", "5")
|
|
.attr("fill", "black")
|
|
|
|
svg.append("circle")
|
|
.attr("cx", "200")
|
|
.attr("cy", "270")
|
|
.attr("r", "5")
|
|
.attr("fill", "black")
|
|
|
|
svg.append("circle")
|
|
.attr("cx", "200")
|
|
.attr("cy", "300")
|
|
.attr("r", "5")
|
|
.attr("fill", "black")
|