Dividing an SVG Circle into Three Equal Parts with Responsive Design in Ionic Mobile App

Question

I'm working on an Ionic mobile application, and I need to divide an SVG circle into three equal parts with a focus on responsive design. I've experimented with the element, but I'm facing challenges in achieving both equal division and responsiveness.

Here's a simplified example of what I've attempted:

<svg width="1000" height="1000" viewBox="0 0 1020 1040" fill="none" xmlns="http://www.w3.org/2000/svg">
  
<!-- Green Stroke -->
  <path
    d="M240 120 A120 120 0 0 1 360 240"
    stroke="green"
    stroke-width="60"
    fill="none"
  />
  <!-- Red Stroke -->
  <path
    d="M240 360 A120 120 0 0 1 240 120"
    stroke="red"
    stroke-width="60"
    fill="none"
  />

  <!-- Yellow Stroke -->
  <path
    d="M360 240 A120 120 0 0 1 240 360"
    stroke="yellow"
    stroke-width="60"
    fill="none"
  />
</svg>

I've attached screenshots illustrating the desired outcome. Could anyone provide guidance on adjusting the parameters for both equal parts and responsiveness to achieve a similar look in my Ionic mobile app? Any insights or code examples would be greatly appreciated. Thank you!

Answer 1

you need understand a bit about the values of viewBox and width and height

In your case simple write some like:

<svg width="100%"  
     viewBox="80 80 320 320" fill="none" 
     xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

See that the two first parameters of the viewbox translate the svg, the two last is a "scale" the svg.

NOTE: In general viewbox in the way

  viewBox="minX minY width height"

• minX+width have the same value than the point more right in the svg
• minY+heigth have the same value than the point more bottom in your svg

Arcs are the more difficult svg concept. We can use some arcs generators like

http://xahlee.info/js/svg_circle_arc.html#google_vignette

or

https://milevski.co/svg-arc-corners/demo/

e.g. we can write

    <svg width="100%" viewBox="50 50 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
      
    <!-- Green Stroke -->
      <path
        d="M 209 100 A 100 100 275 0 1 291 242"
        stroke="green"
        stroke-width="60"
        fill="none"
      />
      <path
        d="M 282 257 A 100 100 395 0 1 118 257"
        stroke="red"
        stroke-width="60"
        fill="none"
      />
      <path
        d="M 109 242 A 100 100 515 0 1 191 100"
        stroke="yellow"
        stroke-width="60"
        fill="none" 
      />
    </svg>