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:
<svg viewBox="0 0 100 50">
</svg>
<svg viewBox="0 0 100 50">
<circle cx="50" cy="25" r="25" fill="#F9A10C" stroke="none"></circle>
</svg>
<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:
And that's it! You should now have a semi-circular shape divided into 8 parts using SVG.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-06-20 11:00:00 +0000
Seen: 13 times
Last updated: Sep 01 '21
What is Fullscreen Activity in Android?
What does 'Invalid argument (callbackUrlScheme): must be a valid URL scheme' mean?
How can SSL passthrough be implemented with Traefik in Kubernetes?
What is the way to name parameters and REST API urls in Spring Boot?
How can ASP.NET Core be configured to incorporate various authorization strategies?
What are the steps to adjust the dot size in a plot created with mpl-scatter-density?