css-variable-demo
/
demo-5.html

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