Revision history [back]

There are multiple ways to create a semi-circular shape divided into 8 parts using HTML, CSS or SVG. Here's one solution using SVG:

1. Start by creating an SVG element in your HTML code using the <svg> tag.

<svg viewBox="0 0 100 50">
</svg>

1. Add a circle element using the <circle> tag. The circle should be half the width and height of the viewBox to make it a semi-circle. Also, add a fill color and remove the stroke.

<svg viewBox="0 0 100 50">
  <circle cx="50" cy="25" r="25" fill="#F9A10C" stroke="none"></circle>
</svg>

1. Add 8 <path> elements with the d attribute to create the 8 sections. Use the arc command to draw a portion of a circle with a specified radius and angle. Use the M command to set the starting point.

<svg viewBox="0 0 100 50">
  <circle cx="50" cy="25" r="25" fill="#F9A10C" stroke="none"></circle>
  <path d="M 50 25 A 25 25 0 0 0 50 0 L 50 25 Z" fill="#FFDCA7"></path>
  <path d="M 50 25 A 25 25 0 0 0 70.71 7.07 L 50 25 Z" fill="#FFECD9"></path>
  <path d="M 50 25 A 25 25 0 0 0 75 18.85 L 50 25 Z" fill="#FFDBA7"></path>
  <path d="M 50 25 A 25 25 0 0 0 84.26 34.64 L 50 25 Z" fill="#FFECD9"></path>
  <path d="M 50 25 A 25 25 0 0 0 86.6 40 L 50 25 Z" fill="#FFDBA7"></path>
  <path d="M 50 25 A 25 25 0 0 0 90 45 L 50 25 Z" fill="#FFECD9"></path>
  <path d="M 50 25 A 25 25 0 0 0 87.85 49.63 L 50 25 Z" fill="#FFDBA7"></path>
  <path d="M 50 25 A 25 25 0 0 0 70 43 L 50 25 Z" fill="#FFECD9"></path>
</svg>

Note: The d attribute is a path data attribute that describes the path to be drawn. The A command is used to draw an elliptical arc segment. The parameters for the A command are as follows:

• rx: the x-radius of the ellipse
• ry: the y-radius of the ellipse
• x-axis-rotation: the angle of the x-axis of the ellipse relative to the horizontal axis
• large-arc-flag: a boolean value (0 or 1) indicating the size of the arc segment
• sweep-flag: a boolean value (0 or 1) indicating the direction of the arc segment
• x: the x-coordinate of the endpoint of the arc segment
• y: the y-coordinate of the endpoint of the arc segment

1. Set the fill color for each path element to create the desired color scheme.

And that's it! You should now have a semi-circular shape divided into 8 parts using SVG.