sfp_front_vue_serprati_associado_app/src/pages/login/component/WavePattern.vue

<template>
  <div class="overflow-hidden full-height" v-bind="$attrs">
    <div class="element-with-wave"></div>
  </div>
</template>
<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss";

.element-with-wave {
  position: relative;
  background: rgba(map.get($colors-dark, "primary"), 1) !important;
  margin-top: 60dvh;
  width: 100%;
  height: 100dvh;
  transform: translateZ(0);
}

.element-with-wave::before {
  content: "";
  position: absolute;
  top: -240px;
  left: 0;
  width: 100%;
  height: 240px;
  background-color: rgba(map.get($colors-dark, "primary"), 1) !important;
  will-change: clip-path;
  animation: organic-swell 20s ease-in-out infinite alternate;
  clip-path: polygon(
    0% 100%,
    0% 50%,
    5% 45%,
    10% 55%,
    18% 40%,
    25% 60%,
    33% 45%,
    42% 60%,
    50% 40%,
    58% 60%,
    67% 45%,
    75% 60%,
    82% 40%,
    91% 60%,
    100% 50%,
    100% 100%
  );
}

@keyframes organic-swell {
  0% {
    clip-path: polygon(
      0% 100%,
      0% 50%,
      5% 45%,
      10% 55%,
      18% 40%,
      25% 60%,
      33% 45%,
      42% 60%,
      50% 40%,
      58% 60%,
      67% 45%,
      75% 60%,
      82% 40%,
      91% 60%,
      100% 50%,
      100% 100%
    );
  }
  12.5% {
    clip-path: polygon(
      0% 100%,
      0% 10%,
      5% 20%,
      10% 15%,
      18% 30%,
      25% 40%,
      33% 35%,
      42% 50%,
      50% 55%,
      58% 65%,
      67% 60%,
      75% 70%,
      82% 65%,
      91% 75%,
      100% 60%,
      100% 100%
    );
  }
  25% {
    clip-path: polygon(
      0% 100%,
      0% 40%,
      5% 30%,
      10% 50%,
      18% 20%,
      25% 30%,
      33% 15%,
      42% 40%,
      50% 50%,
      58% 60%,
      67% 55%,
      75% 65%,
      82% 60%,
      91% 70%,
      100% 55%,
      100% 100%
    );
  }
  37.5% {
    clip-path: polygon(
      0% 100%,
      0% 30%,
      5% 25%,
      10% 35%,
      18% 20%,
      25% 25%,
      33% 20%,
      42% 30%,
      50% 20%,
      58% 35%,
      67% 25%,
      75% 30%,
      82% 20%,
      91% 35%,
      100% 30%,
      100% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 100%,
      0% 60%,
      5% 70%,
      10% 60%,
      18% 50%,
      25% 40%,
      33% 30%,
      42% 10%,
      50% 20%,
      58% 30%,
      67% 40%,
      75% 50%,
      82% 60%,
      91% 70%,
      100% 60%,
      100% 100%
    );
  }
  62.5% {
    clip-path: polygon(
      0% 100%,
      0% 80%,
      5% 75%,
      10% 85%,
      18% 70%,
      25% 80%,
      33% 65%,
      42% 75%,
      50% 60%,
      58% 50%,
      67% 35%,
      75% 25%,
      82% 40%,
      91% 20%,
      100% 30%,
      100% 100%
    );
  }
  75% {
    clip-path: polygon(
      0% 100%,
      0% 70%,
      5% 85%,
      10% 75%,
      18% 90%,
      25% 80%,
      33% 85%,
      42% 70%,
      50% 80%,
      58% 75%,
      67% 85%,
      75% 80%,
      82% 90%,
      91% 75%,
      100% 80%,
      100% 100%
    );
  }
  87.5% {
    clip-path: polygon(
      0% 100%,
      0% 55%,
      5% 50%,
      10% 55%,
      18% 50%,
      25% 55%,
      33% 50%,
      42% 55%,
      50% 50%,
      58% 55%,
      67% 50%,
      75% 55%,
      82% 50%,
      91% 55%,
      100% 50%,
      100% 100%
    );
  }
  100% {
    clip-path: polygon(
      0% 100%,
      0% 45%,
      5% 40%,
      10% 50%,
      18% 35%,
      25% 55%,
      33% 40%,
      42% 55%,
      50% 35%,
      58% 55%,
      67% 40%,
      75% 55%,
      82% 35%,
      91% 55%,
      100% 45%,
      100% 100%
    );
  }
}
</style>