Forum

Posted: **15 Feb 2022, 14:03**

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!

Posted: **16 Feb 2022, 05:54**

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:

Posted: **17 Feb 2022, 16:16**

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

Forum

Concentric circles (Donut SVG style)

Concentric circles (Donut SVG style)

Concentric circles (Donut SVG style)

Concentric circles (Donut SVG style)