<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Equilateral Triangle Inscribed in a Circle</title>
</head>
<body>
    <svg id="svg" width="600" height="600"></svg>

    <script>
        const width = 600;
        const height = 600;
        const centerX = width / 2;
        const centerY = height / 2;
        const circleRadius = 190; // Adjust the radius as needed

        // Calculate the coordinates of the triangle vertices
        const triangleVertices = [
            { x: centerX, y: centerY - circleRadius },
            { x: centerX - (Math.sqrt(3) / 2) * circleRadius, y: centerY + (circleRadius / 2) },
            { x: centerX + (Math.sqrt(3) / 2) * circleRadius, y: centerY + (circleRadius / 2) }
        ];

        // Create an SVG element
        const svg = document.getElementById('svg');

        // Draw the circle
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute('cx', centerX);
        circle.setAttribute('cy', centerY);
        circle.setAttribute('r', circleRadius);
        circle.setAttribute('fill', 'blue'); // Change the fill color here (e.g., 'blue')
        circle.setAttribute('stroke', 'black');
        svg.appendChild(circle);

        // Define colors for the divided parts
        const colors = ['red', 'green', 'yellow'];

        // Draw lines to divide the circle into three equal parts
        for (let i = 0; i < 3; i++) {
            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
            line.setAttribute('x1', centerX);
            line.setAttribute('y1', centerY - circleRadius);
            line.setAttribute('x2', triangleVertices[i].x);
            line.setAttribute('y2', triangleVertices[i].y);
            line.setAttribute('stroke', 'black');
            svg.appendChild(line);
        }

        // Fill the divided parts of the circle with colors
        const circleParts = [];
        for (let i = 0; i < 3; i++) {
            const part = document.createElementNS("http://www.w3.org/2000/svg", "path");
            const arc = `M ${centerX},${centerY - circleRadius} L ${triangleVertices[i].x},${triangleVertices[i].y} A ${circleRadius},${circleRadius} 0 0,1 ${triangleVertices[(i + 1) % 3].x},${triangleVertices[(i + 1) % 3].y} Z`;
            part.setAttribute('d', arc);
            part.setAttribute('fill', colors[i]);
            part.setAttribute('stroke', 'black');
            svg.appendChild(part);
        }
    </script>
</body>
</html>
