SVG: svg, circle: Overlap Colored Circles at 50% Opacity

nick3499
nick3499
Feb 25, 2017 · 1 min read
circle_opacity.html

<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.

nick3499

Written by

nick3499

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade