<div class="pattern1">
  <div>

body,
html {
  height: 100%;
  display: grid;
}

body {
  background: #fff;
  animation: invert 4s cubic-bezier(0.25, 0.125, 0.25, 0.85) infinite -0.65s;
  margin: 0px;
  padding: 0px;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
    z-index: 10;
    mix-blend-mode: lighten;
  }
}

.pattern1 {
  position: relative;
  width: 60px;
  height: 224px;
  margin: auto;
  &:before,
  &:after {
    content: "";
    box-shadow: 0 0 0 2px #000;
    position: absolute;
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24'  style='transform:scaleY(-1)' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.dot%7Bstroke:%23000;stroke-linecap:round; stroke-width:4px; animation:bounce 1s cubic-bezier(0.75,0.125,0.25,0.85) infinite;%7D @keyframes bounce%7B 50%25%7B transform:translateY(-9px); %7D %7D.dash%7Bstroke:%23000;stroke-width:2px;transform-origin:6px 6.5px;stroke-linecap:round;animation:turn 1s cubic-bezier(0.25,0.125,0.25,0.45) infinite%7D @keyframes turn%7B 50%25%7B transform:rotate(90deg); %7D 100%25%7B transform:rotate(180deg); %7D %7D;%3C/style%3E%3C/defs%3E%3Cpath class='dash' d='M 6 0 L 6 13'/%3E%3Cpath class='dot' d='M 6 18 L 6 18' /%3E%3C/svg%3E"),
      url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' style='transform:scaleY(-1)' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.dot%7Bstroke:%23000;stroke-linecap:round; stroke-width:4px; animation:bounce 1s cubic-bezier(0.75,0.125,0.25,0.85) infinite;%7D @keyframes bounce%7B 50%25%7B transform:translateY(-9px); %7D %7D.dash%7Bstroke:%23000;stroke-width:2px;transform-origin:6px 6.5px;stroke-linecap:round;animation:turn 1s cubic-bezier(0.25,0.125,0.25,0.45) infinite%7D @keyframes turn%7B 50%25%7B transform:rotate(90deg); %7D 100%25%7B transform:rotate(180deg); %7D %7D;%3C/style%3E%3C/defs%3E%3Cpath class='dash' d='M 6 0 L 6 13'/%3E%3Cpath class='dot' d='M 6 18 L 6 18' /%3E%3C/svg%3E"),
      linear-gradient(to right, #fff, #fff);
    background-position: 0 calc(50% + 12px), 12px 50%;
    @keyframes bgShift {
      to {
        background-position: 24px calc(50% + 36px), 36px calc(50% + 24px);
      }
    }
  }
  &:before {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    bottom: 100%;
    left: calc(50% - 37.5px);
    animation: bgShift 5s linear infinite,
      bounce 1s cubic-bezier(0.85, 0.25, 0.25, 0.85) infinite,
      invert 4s cubic-bezier(0.25, 0.125, 0.25, 0.85) infinite -0.65s;
    transform: translateY(0) scaleY(0.85) scaleX(1.15);
    transform-origin: bottom;
    @keyframes bounce {
      50% {
        transform: translateY(-112.5px) scaleY(1.05) scaleX(1);
      }
    }
    @keyframes invert {
      12.49% {
        filter: invert(0);
      }
      12.5% {
        filter: invert(1);
      }
      62.49% {
        filter: invert(1);
      }
      62.5% {
        filter: invert(0);
      }
    }
  }
  &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #000;
    -webkit-mask: radial-gradient(ellipse at top, transparent 50px, #000 50px) 50%
        calc(0% - 20px) / 600px 180px no-repeat,
      radial-gradient(ellipse at bottom, transparent 50px, #000 50px) 50%
        calc(100% + 20px) / 600px 180px no-repeat;
    -webkit-mask-position: 50% calc(0% - 50px), 50% calc(100% + 50px);
    animation: bgShift 5s linear infinite,
      turn 4s cubic-bezier(0.25, 0.125, 0.25, 1.15) infinite -0.05s,
      bend 4s ease-in-out infinite;
    @keyframes bend {
      0% {
        -webkit-mask-position: 50% calc(0% - 20px), 50% calc(100% + 50px);
      }
      12.5% {
        -webkit-mask-position: 50% calc(0% - 50px), 50% calc(100% + 50px);
      }
      25% {
        -webkit-mask-position: 50% calc(0% - 20px), 50% calc(100% + 50px);
      }
      37.5% {
        -webkit-mask-position: 50% calc(0% - 50px), 50% calc(100% + 50px);
      }
      50% {
        -webkit-mask-position: 50% calc(0% - 50px), 50% calc(100% + 20px);
      }
      62.5% {
        -webkit-mask-position: 50% calc(0% - 50px), 50% calc(100% + 50px);
      }
      75% {
        -webkit-mask-position: 50% calc(0% - 50px), 50% calc(100% + 20px);
      }
      87.5% {
        -webkit-mask-position: 50% calc(0% - 50px), 50% calc(100% + 50px);
      }
      100% {
        -webkit-mask-position: 50% calc(0% - 20px), 50% calc(100% + 50px);
      }
    }
    @keyframes turn {
      33% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(-180deg);
      }
      82% {
        transform: rotate(-180deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }
  }
}