<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>
.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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.