Concentric circles (Donut SVG style)

Place to talk about website HTM elements, CSS style and design, and get help with HTML, CSS codes.
WillATT
Posts: 2

Concentric circles (Donut SVG style)

Hi all,

First of all, thank you to this community for giving life to a wonderful place to share & learn about HTML & CSS.

I would like to ask about my HTML /CSS /SVG Code because I can't make it to do what I need; Two concentric circles. The one on the outside is colored and the one on the inside is just white so we achieve a donut-like image.

Code: Select all

<head>
    <style>
    :root{
        --fontSize: 30px;
    }
      .circleBase,
      .circleBase {
        border-radius: 50%;
      }
      .circle1 {
        width: 100%;
        height: 100%;
        background: transparent linear-gradient(135deg, #FFF200 0%, #8FE4DE 50%,#8FE4DE 0%) 0% 0% no-repeat padding-box;
      }
    </style>
  </head>
  <body>
    <div class='circleBase circle1'>
        <svg viewBox='0 0 500 500'>
            <circle style='fill: white;' cx='250' cy='260' r='230' />
        </svg>
    </div>
    
  </body>
The resulting image looks concentric but for some reason, the colored "circle" is not 100% round, especially if you make the image smaller in size.


Should I change my approach? Thanks!
MarPlo Posts: 186
Hello,
Put the "cy" value the same as "cx" (250 in your code).
Try the following code:

Code: Select all

<head>
<style>
:root{
  --fontSize: 30px;
}
.circleBase {
  border-radius: 50%;
}
.circle1 {
  width:500px;
  height:500px;
  background: transparent linear-gradient(135deg, #FFF200 0%, #8FE4DE 50%,#8FE4DE 0%) 0% 0% no-repeat padding-box;
}
</style>
</head>
<body>
<div class='circleBase circle1'>
  <svg viewBox='0 0 500 500'>
      <circle style='fill: white;' cx='250' cy='250' r='230' />
  </svg>
</div>
</body>

Demo:
WillATT Posts: 2
Hi MarPlo,

thank you!! That works perfectly. I notice that you also changed the width and height to be 500px instead of the 100% that I had in my code that was causing some trouble.

Best,

Guillermo

Similar Topics