<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>D3 Face Drawing</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>

<script>
// Set SVG dimensions
const width = 400;
const height = 400;

// Create SVG canvas
const svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("background", "#f0f8ff");

// Face (head)
svg.append("circle")
    .attr("cx", 200)
    .attr("cy", 200)
    .attr("r", 120)
    .attr("fill", "#FFD700")
    .attr("stroke", "black")
    .attr("stroke-width", 3);

// Left Eye
svg.append("circle")
    .attr("cx", 150)
    .attr("cy", 170)
    .attr("r", 20)
    .attr("fill", "white")
    .attr("stroke", "black");

// Right Eye
svg.append("circle")
    .attr("cx", 250)
    .attr("cy", 170)
    .attr("r", 20)
    .attr("fill", "white")
    .attr("stroke", "black");

// Left Pupil
svg.append("circle")
    .attr("cx", 150)
    .attr("cy", 170)
    .attr("r", 10)
    .attr("fill", "black");

// Right Pupil
svg.append("circle")
    .attr("cx", 250)
    .attr("cy", 170)
    .attr("r", 10)
    .attr("fill", "black");

// Nose (triangle)
svg.append("polygon")
    .attr("points", "200,190 180,230 220,230")
    .attr("fill", "orange")
    .attr("stroke", "black");

// Smile (arc path)
const smile = d3.arc()
    .innerRadius(0)
    .outerRadius(70)
    .startAngle(Math.PI / 6)
    .endAngle(Math.PI - Math.PI / 6);

svg.append("path")
    .attr("d", smile())
    .attr("transform", "translate(200,230)")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("stroke-width", 4);

</script>

</body>
</html>
