How to make Half Circle Line with perfect rounded edge in CSS?

Question

I tried to make a perfect half-rounded circle as the mockup in this picture:

But it does not look very much well since I could not a perfect rounded-edge of both sides of big line, and the blur background of the big line

Here my current code I tried to make:

* {
  box-sizing: border-box;
}

.ellipse-container {
  height: 323px;
  width: 317px;
}

.ellipse {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 35px solid rgba(122, 211, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ellipse::before {
  content: ' ';
  width: 254px;
  height: 252px;
  background: #FFF;
  position: absolute;
  bottom: -41px;
  right: -39px;
  /*border: 1px solid;*/
}

.ellipse-2 {
  width: 231.73px;
  height: 231.73px;
  border: 2px dashed #373838;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.ellipse-2::before {
  content: ' ';
  position: absolute;
  bottom: -3px;
  left: 28%;
  width: 120px;
  height: 30px;
  background: #FFFF;
}

.ellipse-2 p {
  margin: 0;
}

.ellipse-2 p.title {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
}

.ellipse-2 p.grade {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 54px;
}

.ellisep-edge-1,
.ellisep-edge-2 {
  width: 45.5px;
  height: 45.5px;
  border-radius: 50%;
  position: absolute;
}

.ellisep-edge-1 {
  background: rgba(122, 211, 255, 1);
  top: 26px;
  right: -11.5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ellisep-edge-1 .dot {
  width: 7px;
  height: 7px;
  background: #FFFF;
  border-radius: 50%;
}

.ellisep-edge-2 {
  background: rgba(122, 211, 255, 1);
  bottom: -7px;
  left: 18px;
}

<div class="ellipse-container">
  <div class="ellipse">
    <div class="ellisep-edge-1"><span class="dot"></span></div>
    <div class="ellisep-edge-2"></div>
    <div class="ellipse-2">
      <p class="title">Credit Score</p>
      <p class="grade">780</p>
    </div>
  </div>
</div>

Any tip to make a perfect circle rounded-edge like this? Thank you very much.

I’d recommend doing this using [SVG arcs](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs) rather than html. — Noleli, Aug 09 '21 at 18:12
@Noleli, since I will need to apply with server side, CSS would be better for dynamic update and scalable accordingly. Thanks :) — Houy Narun, Aug 09 '21 at 18:27
You can dynamically manipulate SVGs with JS just like you can manipulate CSS or the DOM. Doesn’t have to be just static image assets — Noleli, Aug 09 '21 at 19:22
While you can draw it using CSS, using a background image formed by a combination of conic and radial gradients, it would be more straightforward to use an SVG arc as @Noleli suggests. — A Haworth, Aug 09 '21 at 21:15
@AHaworth, thanks so much, how can I draw it in svg? I don't have much knowledge about it and why it is svg over CSS style? as far as I could imagine it would end up with so complicated combination of path tag and some kinds of Shap tag like which I am feeling hard to manipulate it. So coule you please help with simple and manipulatable of shape of svg code like one in question? Thanks very much, — Houy Narun, Aug 09 '21 at 22:52
@Noleli thank you very, how can I draw svg code of picture like in question? I don't know much for svg code to make up that shape. Thanks. — Houy Narun, Aug 09 '21 at 22:58
There's all sorts of examples of drawing similar shapes on SO. For example the accepted answer on [link]https://stackoverflow.com/questions/50649381/svg-arc-progress-bar-with-constant-stroke-dasharray-object has an arc within the SVG, but searching 'arc svg stackoverflow progress' reveals more examples and [link]https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths (go down to the section on arcs) gives a more general view. — A Haworth, Aug 10 '21 at 05:44
In addition to what @AHaworth said, [d3-shape](https://github.com/d3/d3-shape/#arcs) offers a nice API for generating arcs. Rather than writing svg path code directly, you specify inner and outer radius, start and end angles, corner radius, etc. Maybe overkill for what you need, but figured I’d mention it. — Noleli, Aug 10 '21 at 13:20

How to make Half Circle Line with perfect rounded edge in CSS?

0 Answers0