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")