Creating a 3 circle Venn diagram with pure css/html

Question

Maybe there\'s not a way, but I\'m looking to create 3 circles that would appear to overlap, yet would be actually individual objects with pure css. I can easily create a c

Answer 1

I have SVG solution for your question:

DEMO: http://jsfiddle.net/kboksc04/

The code recreates the circles and intersections with polygons.

var r = 200,              // radius of the circles

// colors of the circles
// you can create functions for colors or load them from array etc.
    colors = {            
        a: "#ADD8E6",     
        b: "#FFFACD",     
        c: "#FA8072",
        ab: "#008000",
        bc: "#FF0000",
        ca: "#0000FF",
        abc: "#000000"
    };

// the body of the picture
var board = d3.select("body").append("svg:svg").attr({
    width: 3 * r,
    height: 3 * r
});

// function creates array of x,y pairs for dots
// uses parametric function of circle
// @param {float} x_0, y_0 - center of the circle
// @param {float} r - radius
// @param {integer} n - number of sections  
// @returns {Array} - array of coordinates for "n" dots of polygon
function dots(x_0, y_0, r, n) {
    var a = [],
        d_alpha = 2 * Math.PI / n;
    for (var alpha = 0; alpha < 2 * Math.PI; alpha += d_alpha) {
        a.push([
        x_0 + r * Math.cos(alpha),
        y_0 + r * Math.sin(alpha)]);
    }
    return (a);
}

// the coordinates for points of three basic circles
var shape_a = d3.geom.polygon(dots(r, r, r, 80));
var shape_b = d3.geom.polygon(dots(2 * r, r, r, 80));
var shape_c = d3.geom.polygon(dots(1.5 * r, 2 * r, r, 80));

// intersections of circles in pairs
var shape_a_x_b = shape_a.slice();
shape_b.reverse().clip(shape_a_x_b);

var shape_b_x_c = shape_c.slice();
shape_b.clip(shape_b_x_c);

var shape_c_x_a = shape_c.slice();
shape_a.reverse().clip(shape_c_x_a);

// central intersection for all the circles
// actually it is intersection of pair previous calculated intersections
var shape_abc = shape_c_x_a.slice();
d3.geom.polygon(shape_b_x_c.reverse()).clip(shape_abc);

// drawing
board.append("svg:polygon")
    .attr({
    points: shape_a,
    fill: colors.a
});
board.append("svg:polygon")
    .attr({
    points: shape_b,
    fill: colors.b
});
board.append("svg:polygon")
    .attr({
    points: shape_c,
    fill: colors.c
});
board.append("svg:polygon")
    .attr({
    points: shape_a_x_b,
    fill: colors.ab
});
board.append("svg:polygon")
    .attr({
    points: shape_b_x_c,
    fill: colors.bc
});
board.append("svg:polygon")
    .attr({
    points: shape_c_x_a,
    fill: colors.ca
});
board.append("svg:polygon")
    .attr({
    points: shape_abc,
    fill: colors.abc
});

Finally, there you can see a version with clickable-responsible pieces:

http://jsfiddle.net/kboksc04/2/

You can click on a green or black pieces.