<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
<title>3 circles</title>
<circle cx="100" cy="100" r="25" fill="red"></circle>
<circle cx="200" cy="100" r="25" fill="green"></circle>
<circle cx="300" cy="100" r="25" fill="blue"></circle>
</svg>Last updated
<!-- inline SVG -->
<svg id="c1" viewBox="0 0 400 200">
<circle cx="100" cy="100" r="25" class="first"></circle>
<circle cx="200" cy="100" r="25" class="second"></circle>
<circle cx="300" cy="100" r="25" class="third"></circle>
</svg>
<!-- inline SVG -->
<svg viewBox="0 0 400 200" id="c2">
<circle cx="112" cy="112" r="25" class="overlap"></circle>
<circle cx="100" cy="100" r="25" class="first"></circle>
<circle cx="200" cy="100" r="25" class="second"></circle>
<circle cx="300" cy="100" r="25" class="third"></circle>
</svg>
<!-- SVG img -->
<img src="flex-direction.svg" alt="flex-direction">
<img src="circles.svg" alt="circles">body {
background-color: gray;
}
/* styles for SVG */
svg {
border: 1px solid black;
}
circle {
fill: rgba(255,0,0,1);
stroke: black;
}
#c2 {
width: 50vw;
background-color: #ccc;
}
.first {
opacity: .75;
}
.overlap {
fill: rgba(0, 0, 200, .75);
}
.second {
stroke-width: 3px;
}
.third {
fill: rgba(0,200,0,.75);
}