SVG: svg, circle: Overlap Colored Circles at 50% Opacity
Feb 25, 2017 · 1 min read

<svg width="720" height="400"> SVG tag sets canvas dimensions and encloses three circle tags. The first circle tag, <circle cx="150" cy="150" r="100" style="fill:red" opacity="0.5", locates the circle within the canvas using cx="150" cy="150 location attributes. Sets radius using the r="100" attribute. Fills the circle red using the style="fill:red" style attribute. And sets opacity at 50% using the opacity="0.5' attribute, which allows circle overlap to display four additional colors.
