Different Ways to Create Solid and Hollow Semi-Circles in Front-End Development

In front-end development, we sometimes encounter scenarios where semi-circles are used, such as in coupons, as shown in the image below:

This article will cover how to create solid and hollow semi-circles using different technologies. We will explore three main methods: CSS, SVG, and Canvas. Each method includes detailed code examples and explanations.

Creating Solid Semi-Circles

Using CSS

You can create a solid semi-circle by adjusting the border-radius property. Here is an example:

1
<div class="square-solid-half-circle"></div>
2

3
<style>
4
  .square-solid-half-circle {
5
    width: 100px;
6
    height: 50px; /* Height is half of the circle's height */
7
    background-color: #3498db;
8
    border-top-left-radius: 50px;
9
    border-top-right-radius: 50px;
10
  }
11
</style>

Explanation:

• width and height set the dimensions.
• background-color sets the fill color of the semi-circle.
• border-top-left-radius and border-top-right-radius create the rounded edges to form the semi-circle shape.

Using SVG

SVG provides precise drawing capabilities for semi-circles. Here is an example of creating a solid semi-circle:

1
<svg width="100" height="50">
2
  <path d="M 0 50 A 50 50 0 0 1 100 50" fill="#3498db" />
3
</svg>

Explanation:

• The path element’s A command draws the semi-circle arc, and fill sets the fill color.

Using Canvas

The Canvas API allows dynamic drawing of graphics with JavaScript. Here is how to create a solid semi-circle:

1
<canvas id="solid-half-circle" width="100" height="50"></canvas>
2

3
<script>
4
  const solidCanvas = document.getElementById("solid-half-circle");
5
  const solidCtx = solidCanvas.getContext("2d");
6

7
  solidCtx.beginPath();
8
  solidCtx.arc(50, 50, 50, Math.PI, 0, false); // Center (50,50), Radius 50, from π to 0 radians
9
  solidCtx.fillStyle = "#3498db"; // Set fill color
10
  solidCtx.fill(); // Fill the path
11
</script>

Explanation:

• The arc method draws the arc of the semi-circle, fillStyle sets the fill color, and fill fills the semi-circle.

Creating Hollow Semi-Circles

Using CSS

We can achieve a hollow semi-circle by setting border colors on a square and making the bottom and right borders transparent, then rotating the element. Here is the code:

1
<div class="square-hollow-half-circle"></div>
2

3
<style>
4
  .square-hollow-half-circle {
5
    width: 100px;
6
    height: 100px;
7
    border: 5px solid #3498db; /* Set border color and width */
8
    border-radius: 100%; /* Make the border circular */
9
    border-bottom-color: transparent; /* Hide the bottom border */
10
    border-right-color: transparent;
11
    box-sizing: border-box; /* Include border in width and height calculations */
12
    transform: rotate(45deg); /* Rotate 45 degrees */
13
  }
14
</style>

Explanation:

• border sets the border, border-radius makes it circular.
• border-bottom-color and border-right-color are set to transparent to hide the borders.
• transform: rotate(45deg) rotates the element.

Using SVG

In SVG, you can use two paths, one for the large semi-circle and one for the smaller semi-circle mask, to create a hollow semi-circle:

1
<svg width="100" height="50">
2
  <!-- Solid Semi-Circle -->
3
  <path d="M 0 50 A 50 50 0 0 1 100 50 L 0 50 Z" fill="#3498db" />
4
  <!-- Overlapping White Semi-Circle -->
5
  <path d="M 5 50 A 45 45 0 0 1 95 50 L 5 50 Z" fill="#ffffff" />
6
</svg>

Explanation:

• The first path element draws the solid semi-circle.
• The second path element draws a smaller white semi-circle that masks the larger one.

Using Canvas

Similarly, in Canvas, you can use two arc calls to draw an outer circle and an inner circle to create a hollow semi-circle:

1
<canvas id="canvas-hollow-half-circle-overlay" width="100" height="50"></canvas>
2

3
<script>
4
  const canvasOverlay = document.getElementById(
5
    "canvas-hollow-half-circle-overlay",
6
  );
7
  const ctxOverlay = canvasOverlay.getContext("2d");
8

9
  // Solid Semi-Circle
10
  ctxOverlay.beginPath();
11
  ctxOverlay.arc(50, 50, 50, Math.PI, 0, false);
12
  ctxOverlay.fillStyle = "#3498db";
13
  ctxOverlay.fill();
14

15
  // Overlapping White Semi-Circle
16
  ctxOverlay.beginPath();
17
  ctxOverlay.arc(50, 50, 45, Math.PI, 0, false);
18
  ctxOverlay.fillStyle = "#ffffff";
19
  ctxOverlay.fill();
20
</script>

Explanation:

• Draw the outer solid semi-circle and then overlay a smaller white semi-circle to create the hollow effect.

By using these methods, you can create various effects of solid and hollow semi-circles in front-end development.