CSS - Double Circle

This is an example of how to create a double circle shape using HTML and CSS.

This HTML code sets the class name "double-circle" for the <div> element, which will be used to draw a double circle.

<div class="double-circle"></div>

The two circular borders are specified using the pseudo-elements "before" and "after".
The thickness of the borders varies with the width of the "border."

/* Double Circle */
.double-circle {
  --w: 300px; /* Base size */
  --angle: 0deg; /* Rotation */
  position: relative;
  width: var(--w);
  height: var(--w);
  transform: rotate(var(--angle));
}

/* Outer Circle */
.double-circle::before {
  content: "";
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border: solid calc(var(--w) * 0.07) #00fa9a;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Inner Circle */
.double-circle::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border: solid calc(var(--w) * 0.07) #00fa9a;
  border-radius: 50%;
  box-sizing: border-box;
}