Overlapping Circles Bleeding

Overlapping circles bleeding

In your radial progress bar scenario, you can use the approach described here : Circular percent progress bar. Using inline svg and animating the stroke-dasharray attribute for the progress bar.

Adapted to your use case, it can look like this:

body{background:lavender;}

svg{width:200px;height:200px;}

<svg viewbox="-2.5 -2.5 105 105">

  <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="25" stroke="#fff"/>

  <path fill="none" stroke-width="25" stroke="tomato"  stroke-dasharray="251.2,0" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">

    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           

  </path>

</svg>

Drawing overlapping shapes in drawRect with different color causes edge-bleeding when anti-aliassing is enabled

The problem is that with drawRect, you're basically drawing on an image, and each draw method renders over the previous one. There is no culling.

To really resolve the issue, you may wish to use OpenGL, where there's only one render pass, so hidden objects aren't rendered.

How to visually connect 2 circles?

As the other answers so far slightly miss the correct solution, here is one that connects two circles of equal size:

using (Pen pen = new Pen(Color.Blue, radius)
 { EndCap = LineCap.Round, StartCap = LineCap.Round }  )
     g.DrawLine(pen, x1, y1, x2, y2);

Notes:

• Usually is is good idea to set the smoothing mode of the graphics object to anti-alias..

• To connect two circles of different sizes will take some math to calculate the four outer tangent points. From these one can get a polygon to fill or, if necessary one could create a GraphicsPath to fill, in case the color has an alpha < 1.

• Jimi's comments point to a different solution that make use of GDI+ transformation capabilities.

• Some of the answers or comments refer to the desired shape as an oval. While this ok in common speech, here, especially when geometry books are mentioned, this is wrong, as an oval will not have any straight lines.

• As Jimi noted, what you call radius is really the diameter of the circles. I left the wrong term in the code but you should not!

Circle with two borders

I'd suggest, with the following HTML:

<div></div>

The CSS:

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}

div {

  width: 20em;

  height: 20em;

  border-radius: 50%;

  background-color: red;

  border: 4px solid #fff;

  box-shadow: 0 0 0 5px red;

}

<div></div>

Two borders on top of each other, are not lined up

Your problem is anti-aliasing, which causes the colors to blend to prevent "jaggies" and makes it appear that the colors are bleeding. However, if you zoom in, you can see that there is no bleeding. That, and floating point numbers aren't stored exactly, so CSS's calculation of the circles is very slightly off.

I would use something like Adobe Illustrator or InkScape or even an online vector graphics tool and make an SVG of what you want.

VERDICT: Use something like Adobe Illustrator or InkScape or even an online vector graphics tool and make an SVG of what you want.

css circles using border radius need to change the color of intersected section of circles

A bit simpler version: Fiddle

<div class='circle-holder'>
    <div id='circle-1' class='circle'></div>
    <div id='circle-2' class='circle'></div>
    <div id='circle-3' class='circle'></div>
    <div id='circle-4' class='circle'></div>
    <div id='circle-5' class='circle'></div>
</div>

CSS:

.circle {
    width: 201px;
    height: 201px;
    border-radius: 101px;
    float: left;
    position: relative;
    overflow: hidden;
    margin-right: -30px;
}

.circle + .circle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -170px;
    background: #fff;
    border-radius: 101px;
}

---

Related Topics