:root {
  --clientWidth: var(--jsClientWidth, 100vw);
}

body {
  margin: 0;
}

.image img {
  display: block;
  width: 100%;
  height: auto;
}

.waveDemo {
  width: 100%;
}

.svgWave {
  position: relative;
  width: 100%;
  height: calc(var(--clientWidth) * 0.0638235294);
  margin-top: -6.3823529412%;
  overflow: hidden;
}

.svgWaveInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: svgWaveAnime2 8s ease-in-out infinite;
          animation: svgWaveAnime2 8s ease-in-out infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

/*.content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5em;
  color: white;
  background-color: #3469f9;
}*/

.svgWave1,
.svgWave2,
.svgWave3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 100% 100%;
}

.svgWave1 {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202720%20173.6%22%20style%3D%22enable-background%3Anew%200%200%202720%20173.6%22%20xml%3Aspace%3D%22preserve%22%20preserveAspectRatio%3D%22none%22%3E%3Cswitch%3E%3Cg%3E%3Cpath%20d%3D%22M2720%204.5s-198.3%200-330%2018.7c-101.4%2013.4-145.1%2025-227.6%2029.2-194.7%209.9-380.4-33.3-577.9-31.1-162.9%201.8-301.6%2033.7-455%2049.9-153.1%2016.1-325.2%2016.2-478.5.3-121.4-12.7-228.7-34.7-346.2-50.2C209.6%208.7%20105.3%204.2%200%204.5v168.7h2720%22%20style%3D%22fill%3A%23389fe5%22%2F%3E%3C%2Fg%3E%3C%2Fswitch%3E%3C%2Fsvg%3E");
  -webkit-animation: svgWaveAnime1 90s linear infinite;
          animation: svgWaveAnime1 90s linear infinite;
  animation-direction: reverse;
}

.svgWave2 {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202720%20173.6%22%20style%3D%22enable-background%3Anew%200%200%202720%20173.6%22%20xml%3Aspace%3D%22preserve%22%20preserveAspectRatio%3D%22none%22%3E%3Cswitch%3E%3Cg%3E%3Cpath%20d%3D%22M2627.1%2064.1c-61.3%202.6-120.1%209.7-182%2010.5-179.4%202.4-335.5-48.3-513.2-40.6-98.8%204.3-176.9%2025.7-264%2040.1-125.3%2020.6-277.8%2026.6-417.2%2016.3-108.5-8-206.8-25.1-313.9-34.6C809%2044.5%20669.7%2044.6%20542%2056c-78.3%207-152.5%2018.2-233%2022.6C205.5%2084.4%20100.8%2077%200%2066.9v106.3h2720V66.9c-29.6-2.4-62.5-4-92.9-2.8z%22%20style%3D%22fill%3A%2364d6f9%22%2F%3E%3C%2Fg%3E%3C%2Fswitch%3E%3C%2Fsvg%3E");
  -webkit-animation: svgWaveAnime1 80s linear infinite;
          animation: svgWaveAnime1 80s linear infinite;
}

.svgWave3 {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202720%20173.6%22%20style%3D%22enable-background%3Anew%200%200%202720%20173.6%22%20xml%3Aspace%3D%22preserve%22%20preserveAspectRatio%3D%22none%22%3E%3Cswitch%3E%3Cg%3E%3Cpath%20d%3D%22M2483.1%20117.1c-150.3-30.1-172.9-28.7-256.7-20.7-102.7%209.9-190%2025.7-289.8%2037.2-99.9%2011.5-212.7%2018.9-313.6%208.2-119.4-12.7-198.5-48.1-319-59.8-86.5-8.4-181.8-3.2-267.6%205.8-85.8%209-166.9%2021.8-254.5%2029.2-100.1%208.4-207.4%209.4-309.1%202.8-71.1-4.6-138.8-14-210.9-16.6-126.5-4.5-178%2015.8-261.9%2024v46.4h2720v-46.4c-103.8%2013.8-174.1%202.5-236.9-10.1z%22%20style%3D%22fill%3A%233469f9%22%2F%3E%3C%2Fg%3E%3C%2Fswitch%3E%3C%2Fsvg%3E");
  -webkit-animation: svgWaveAnime1 60s linear infinite;
          animation: svgWaveAnime1 60s linear infinite;
  animation-direction: reverse;
}

@-webkit-keyframes svgWaveAnime1 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(-1 * var(--clientWidth)) 0;
  }
}

@keyframes svgWaveAnime1 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(-1 * var(--clientWidth)) 0;
  }
}
@-webkit-keyframes svgWaveAnime2 {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(calc(var(--clientWidth) * 0.01 + 1px));
  }
}
@keyframes svgWaveAnime2 {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(calc(var(--clientWidth) * 0.01 + 1px));
  }
}