<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bubble {
--direction-y: 30px;
--transparency: 0;
animation: bubbling 3s forwards infinite;
}
/* g element wrapping up the three small fish */
.small-fish {
--dir-left: -800px;
--dir-right: 800px;
--transparency: 0;
}
.small-fish-1 {
animation: move-x 6s linear forwards infinite;
}
.small-fish-2 {
animation: move-x 8s linear forwards infinite;
}
.small-fish-3 {
animation: move-x 10s linear forwards infinite;
}
@keyframes bubbling {
0% {
transform: translatey(var(--direction-y));
opacity: var(--transparency);
}
40% {
opacity: calc(var(--transparency) + 0.2);
}
70% {
opacity: calc(var(--transparency) + 0.1);
}
100% {
opacity: var(--transparency);
}
}
@keyframes move-x {
0% {
transform: translatex(var(--dir-right));
}
50% {
opacity: calc(var(--transparency) + 0.3);
}
100% {
transform: translatex(var(--dir-left));
opacity: var(--transparency);
}
}
/* General styles */
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
width: 100vw;
height: 100vh;
}
.image-container {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
padding-bottom: 80%;
position: relative;
background: black;
}
svg {
display: inline-block;
stroke: none;
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1000px;
border-radius: 50%;
background: linear-gradient(aqua, blue);
}
</style>
</head>
<body>
<div class="image-container">
<!-- SVG -->
<svg viewBox="0 0 875.88501 656.15442" xmlns="http://www.w3.org/2000/svg" aria-labelledby="fish-title" role="img">
<title id="fish-title">
Smiling Big Fish and Three Small Swimming Fish
</title>
<g class="fish">
<ellipse class="bubble" cx="192.421" cy="83.529" rx="39.897" ry="31.224" fill="rgba(36,115,242, 0.5)" />
<ellipse class="bubble" cx="92.421" cy="43.529" rx="39.897" ry="31.224" fill="rgba(36,115,242, 0.8)" />
<ellipse class="bubble" cx="175.977" cy="67.617" rx="21.078" ry="18.067" fill="rgba(36,115,242, 0.5)" />
<ellipse class="bubble" cx="52.522" cy="106.762" rx="21.078" ry="19.572" fill="rgba(50,80,132, 0.6)" />
<ellipse class="bubble" cx="72.847" cy="121.064" rx="23.336" ry="20.325" fill="rgba(65,72,84, 0.8)" />
<ellipse class="bubble" cx="25.422" cy="166.984" rx="15.055" ry="15.055" fill="rgba(181,183,188, 0.5)" />
<ellipse class="bubble" cx="95.422" cy="266.984" rx="15.055" ry="15.055" fill="rgba(181,183,188, 0.3)" />
<ellipse class="bubble" cx="88.655" cy="206.881" rx="34.628" ry="30.864" fill="rgba(15,28,61, 0.7)" />
<ellipse class="bubble" cx="80.419" cy="320.214" rx="24.842" ry="23.336" fill="rgba(181,183,188, 0.8)" />
<g class="small-fish">
<g class="small-fish-1">
<ellipse class="small-fish-body" cx="88" cy="606" rx="54" ry="30" fill="#f2ae76" />
<ellipse class="small-fish-eye" cx="50" cy="606" rx="8" ry="8" fill="#555" />
<ellipse class="small-fish-tail" cx="170" cy="606" rx="30" ry="20" fill="#f2ae76" />
</g>
<g class="small-fish-2">
<ellipse class="small-fish-body" cx="630" cy="500" rx="54" ry="30" fill="#f2ae76" />
<ellipse class="small-fish-eye" cx="600" cy="500" rx="8" ry="8" fill="#555" />
<ellipse class="small-fish-tail" cx="710" cy="500" rx="30" ry="20" fill="#f2ae76" />
</g>
<g class="small-fish-3">
<ellipse class="small-fish-body" cx="318" cy="40" rx="54" ry="30" fill="#f2ae76" />
<ellipse class="small-fish-eye" cx="290" cy="40" rx="8" ry="8" fill="#555" />
<ellipse class="small-fish-tail" cx="398" cy="40" rx="30" ry="20" fill="#f2ae76" />
</g>
</g>
<g class="rear-finn">
<path d="M447.86 606.577l.28.562c-41.918 89.377 57.398 128.87 64.157 131.436l.125.25c.03-.064.063-.124.094-.188.11.04.437.187.437.187l10.74-43.864c41.922-89.38-68.42-85.57-75.177-88.135l-.125-.25c-.03.064-.062.123-.092.187-.11-.04-.438-.187-.438-.187z"
fill="coral" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"
transform="matrix(.8715 0 0 .8574 -11.782 -31.657)" />
</g>
<path class="tail" d="M879.42 146.35c32.525-29.2 98.488-61.128 136.65-64.25-66.304 53.08-66.485 85.228-73.308 129.95s-31.785 104.41-29.228 191.34c2.334 79.365 32.144 153.89 38.554 200.36s2.584 85.817 63.078 135.66c-37.25-2.303-119.38-45.23-133.51-58.795-55.168-52.97-35.343-128.25-25.104-171.91 17.702-75.49-25.09-44.893-39-98.25 13.91-53.358 55.867-26.254 39.282-100.53-8.57-38.376-32.233-114.37 22.58-163.58z"
fill="coral" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" transform="matrix(.8715 0 0 .8574 -11.782 -31.657)"
/>
<path class="top-finn" d="M476.54 164.03c31.92-14.784 57.418-25.23 84.893-32.808s63.49-15.874 122.68-23.67c-60.114 47.205-57.4 67.512-37.792 104.92-11.006-5.393-38.82-20.01-67.303-26.895-34.763-8.404-51.818-7.263-79.346-7.457s-46.724 5.308-55.44 8.167c-8.02 2.63-3.92-4.207 32.314-22.257z"
fill="coral" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" transform="matrix(.8715 0 0 .8574 -11.782 -31.657)"
/>
<path class="fish-face" d="M588.07 400.18c0 57.47-22.2 109.53-58.076 147.21s-97.634 60.568-123.29 60.885c-16.332.202-156.19-33.57-192.07-71.258-41.127-35.165-57.613-61.813-62.64-98.6-1.965-23.01 18.247-108.21 60.047-144.93 35.878-37.69 145.49-101.53 200.19-101.53s81.89 23.32 117.76 61.01 58.078 89.744 58.078 147.21z"
fill="orange" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" transform="matrix(.8715 0 0 .8574 -11.782 -31.657)"
/>
<path class="fish-mouth" d="M375.59 325.14c100.45 203.24-219.75 122.9-219.75 122.9m205.41-115.09l26.262-13.7" fill="none"
stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" transform="matrix(.8715 0 0 .8574 -11.782 -31.657)"
/>
<path class="fish-body" d="M502.22 175.85c-34.267 0-66.994 5.684-97 15.945 96.538 33.01 164.81 113.77 164.81 208.12s-68.273 175.14-164.81 208.16c30.006 10.26 62.732 15.945 97 15.945 72.26 0 137.71-25.103 185.1-65.667 23.694-20.282 63.923-69.753 116.6-94.258s71.806-24.045 71.806-54.967-24.19-32.12-76.868-61.226-87.846-86.122-111.54-106.4c-47.387-40.556-112.84-65.652-185.1-65.652z"
fill="#ff4500" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.006" transform="matrix(.8715 0 0 .8574 -11.782 -31.657)"
/>
<g class="front-finn">
<path d="M634.72 775.1c-33.585 62.113-109.38-9.405-127.88-40.656-20.997-33.278-34.915-77.19 18-160.63 7.392-9.693-4.554-27.644 33.604-24.312 24.736 2.16 3.667 34.484 19.95 51.974 18.013 16.735 37.725 44.57 50.116 69.017 14.302 28.216 23.132 72.162 6.206 104.61z"
fill="coral" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" transform="matrix(.8715 0 0 .8574 -11.782 -31.657)"
/>
</g>
<ellipse class="front-eye" cx="252" cy="215" rx="50" ry="50" stroke="#080A01" stroke-width="4" fill="#fff" />
<ellipse class="eye-pupil" transform="translate(-162.772 -21.21)" cx="415.531" cy="236.371" rx="15" ry="15" />
</g>
</svg>
</div>
</body>
</html>