<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.opacity1 {
fill: red;
}
.opacity2 {
fill: #228B22;
}
.opacity3 {
fill: rgb(255, 165, 0);
}
.opacity4 {
fill: hsl(248, 53%, 58%)
}
</style>
</head>
<body>
<h3>CSS | fill</h3>
<div class="contnerai">
<svg viewBox="0 0 800 800">
<circle class="opacity1" cx="150" cy="150" r="50" />
<circle class="opacity2" cx="300" cy="150" r="50" />
<circle class="opacity3" cx="450" cy="150" r="50" />
<circle class="opacity4" cx="600" cy="150" r="50" />
</svg>
</div>
</body>
</html>