Create a Two Color Circle

Create a two color circle

Here is a working snippet of what I'll do, using border:

% values instead of px for border-radius, it simplifies a lot!
border-color to add the correct color for each side.
transform: rotate(45deg); to turn it like you want.

body{  background: #ccc;}
.halves-circle{  background: #fff;  height: 200px;  width: 200px;  border: 20px solid;  border-radius: 50%;  border-color: green green red red;  transform: rotate(45deg);}

<div class="halves-circle">

How to create a multi colored circle in html and css

Try something like this:
http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/

It should be noted that I found that once by using google to find this question/answer: HTML5 Canvas pie chart

CSS: Circle with half one color and the other half another color?

A linear-gradient will do that, and use border-radius to make it a circle.

div {  width: 50vw;  height: 50vw;  background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% );   border-radius: 50%;}

<div></div>

Multi-coloured circular div using background colours?

You can make this with using borders:

.chart {  position: absolute;  width: 0;  height: 0;  border-radius: 60px;  -moz-border-radius: 60px;  -webkit-border-radius: 60px;}
#chart1 {  border-right: 60px solid red;  border-top: 60px solid transparent;  border-left: 60px solid transparent;  border-bottom: 60px solid transparent;}
#chart2 {  border-right: 60px solid transparent;  border-top: 60px solid green;  border-left: 60px solid transparent;  border-bottom: 60px solid transparent;}
#chart3 {  border-right: 60px solid transparent;  border-top: 60px solid transparent;  border-left: 60px solid blue;  border-bottom: 60px solid transparent;}
#chart4 {  border-right: 60px solid transparent;  border-top: 60px solid transparent;  border-left: 60px solid transparent;  border-bottom: 60px solid yellow;}

<div id="chart1" class="chart"></div><div id="chart2" class="chart"></div><div id="chart3" class="chart"></div><div id="chart4" class="chart"></div>

How to draw multi-color segmented circle using OpenCV?

Using cv.ellipse you can draw segments pretty easily:

from matplotlib import pyplot as plt
import cv2
import numpy as np
import random

ANGLE_DELTA = 360 // 8

img = np.zeros((700, 700, 3), np.uint8)
img[::] = 255

for size in range(300, 0, -100):
    for angle in range(0, 360, ANGLE_DELTA):
        r = random.randint(0, 256)
        g = random.randint(0, 256)
        b = random.randint(0, 256)
        cv2.ellipse(img, (350, 350), (size, size), 0, angle, angle + ANGLE_DELTA, (r, g, b), cv2.FILLED)

plt.gcf().set_size_inches((8, 8))
plt.imshow(img)
plt.show()

gives

How to keep two colors circles together

If I understand your intent correctly, you need to keep two lists of points, one for each color. Then, when you click somewhere, put the clicked point in the appropriate list (red or black). Then, in your Paint event handler, replace the conditional code with two loops, one through each list of points (drawing the points from the red list in red and the points from the black list in black).

Code:

List<Point> redPoints = new List<Point>();
List<Point> blackPoints = new List<Point>();

private void panel1_MouseDown(object sender, MouseEventArgs e)
{
    if (radioButton1.Checked)
        redPoints.Add(e.Location);
    else
        blackPoints.Add(e.Location);
    panel1.Invalidate();
}

private void panel1_Paint(object sender, PaintEventArgs e)
{
    int count = 0;
    Graphics g = e.Graphics;
    foreach (Point p in redPoints)
    {
        g.FillEllipse(Brushes.Red, p.X, p.Y, 10, 10);
    }
    foreach (Point p in blackPoints)
    {
        g.FillEllipse(Brushes.Black, p.X, p.Y, 10, 10);
    }
}

Note: if your circles overlap one another and you care about maintaining the layering order (first-clicked circles drawing first), then @Blorgbeard's solution is better because it keeps all the circles in the same list, thus maintaining the original layering. Feel free to switch the accepted answer.

How can I draw a circle in SVG with 2 colors?

You can actually create a circle with two colours with only a single path. Simply set two different stop-color. Here, the first stop-color is #00f (blue), and the secnd stop-color is #f0f (purple):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">  <defs>    <linearGradient id="colour" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="1">        <stop offset="0%" stop-color="#00f"/>           <stop offset="100%" stop-color="#f0f"/>       </linearGradient>  </defs>
  <g fill="none" stroke-width="15" transform="translate(100,120)">    <path d="M 0 -100 a 50 50 0 1 0 0.00001 0" stroke="url(#colour)"/>  </g></svg>

Create a Two Color Circle