/* 
  MIXIN(S)
  =================
 https://codepen.io/chriscoyier/pen/XWrNyZy?editors=0110


  (TEXT) PARAMS
  =================
  1. Namespace
  2. Intensity
  3. Text color
  4. Background color (flat)
  5. Highlight #1 color
  6. Highlight #2 color
  7. Width (px)
  8. Height (px)
*/
.example-one {
  font-size: 100px;
  color: white;
  position: relative;
}
@keyframes example-one-anim-1 {
  0% {
    clip-path: inset(9% 0 29% 0);
  }
  5.8823529412% {
    clip-path: inset(94% 0 3% 0);
  }
  11.7647058824% {
    clip-path: inset(53% 0 34% 0);
  }
  17.6470588235% {
    clip-path: inset(61% 0 26% 0);
  }
  23.5294117647% {
    clip-path: inset(77% 0 10% 0);
  }
  29.4117647059% {
    clip-path: inset(96% 0 3% 0);
  }
  35.2941176471% {
    clip-path: inset(7% 0 72% 0);
  }
  41.1764705882% {
    clip-path: inset(53% 0 16% 0);
  }
  47.0588235294% {
    clip-path: inset(40% 0 21% 0);
  }
  52.9411764706% {
    clip-path: inset(11% 0 26% 0);
  }
  58.8235294118% {
    clip-path: inset(26% 0 32% 0);
  }
  64.7058823529% {
    clip-path: inset(32% 0 66% 0);
  }
  70.5882352941% {
    clip-path: inset(26% 0 54% 0);
  }
  76.4705882353% {
    clip-path: inset(68% 0 20% 0);
  }
  82.3529411765% {
    clip-path: inset(20% 0 10% 0);
  }
  88.2352941176% {
    clip-path: inset(11% 0 87% 0);
  }
  94.1176470588% {
    clip-path: inset(55% 0 25% 0);
  }
  100% {
    clip-path: inset(44% 0 34% 0);
  }
}
@keyframes example-one-anim-2 {
  0% {
    clip-path: inset(52% 0 38% 0);
  }
  5.8823529412% {
    clip-path: inset(39% 0 32% 0);
  }
  11.7647058824% {
    clip-path: inset(33% 0 68% 0);
  }
  17.6470588235% {
    clip-path: inset(40% 0 32% 0);
  }
  23.5294117647% {
    clip-path: inset(63% 0 37% 0);
  }
  29.4117647059% {
    clip-path: inset(93% 0 6% 0);
  }
  35.2941176471% {
    clip-path: inset(46% 0 10% 0);
  }
  41.1764705882% {
    clip-path: inset(82% 0 10% 0);
  }
  47.0588235294% {
    clip-path: inset(91% 0 9% 0);
  }
  52.9411764706% {
    clip-path: inset(53% 0 5% 0);
  }
  58.8235294118% {
    clip-path: inset(33% 0 42% 0);
  }
  64.7058823529% {
    clip-path: inset(20% 0 55% 0);
  }
  70.5882352941% {
    clip-path: inset(97% 0 4% 0);
  }
  76.4705882353% {
    clip-path: inset(85% 0 16% 0);
  }
  82.3529411765% {
    clip-path: inset(2% 0 93% 0);
  }
  88.2352941176% {
    clip-path: inset(75% 0 5% 0);
  }
  94.1176470588% {
    clip-path: inset(75% 0 26% 0);
  }
  100% {
    clip-path: inset(51% 0 8% 0);
  }
}
.example-one::before, .example-one::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
}
.example-one::after {
  left: 2px;
  text-shadow: -1px 0 red;
  animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
  left: -2px;
  text-shadow: 2px 0 blue;
  animation: example-one-anim-2 3s infinite linear alternate-reverse;
}

.example-two {
  font-size: 52px;
  color: red;
  position: relative;
}
@keyframes example-two-anim-1 {
  0% {
    clip-path: inset(6% 0 95% 0);
  }
  10% {
    clip-path: inset(28% 0 33% 0);
  }
  20% {
    clip-path: inset(10% 0 32% 0);
  }
  30% {
    clip-path: inset(18% 0 68% 0);
  }
  40% {
    clip-path: inset(42% 0 18% 0);
  }
  50% {
    clip-path: inset(6% 0 36% 0);
  }
  60% {
    clip-path: inset(47% 0 27% 0);
  }
  70% {
    clip-path: inset(78% 0 15% 0);
  }
  80% {
    clip-path: inset(10% 0 23% 0);
  }
  90% {
    clip-path: inset(4% 0 21% 0);
  }
  100% {
    clip-path: inset(51% 0 15% 0);
  }
}
@keyframes example-two-anim-2 {
  0% {
    clip-path: inset(58% 0 5% 0);
  }
  10% {
    clip-path: inset(38% 0 50% 0);
  }
  20% {
    clip-path: inset(25% 0 73% 0);
  }
  30% {
    clip-path: inset(74% 0 22% 0);
  }
  40% {
    clip-path: inset(60% 0 24% 0);
  }
  50% {
    clip-path: inset(32% 0 69% 0);
  }
  60% {
    clip-path: inset(20% 0 2% 0);
  }
  70% {
    clip-path: inset(100% 0 1% 0);
  }
  80% {
    clip-path: inset(22% 0 68% 0);
  }
  90% {
    clip-path: inset(35% 0 66% 0);
  }
  100% {
    clip-path: inset(10% 0 78% 0);
  }
}
.example-two::before, .example-two::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: green;
}
.example-two::after {
  left: 2px;
  text-shadow: -1px 0 white;
  animation: example-two-anim-1 2s infinite linear alternate-reverse;
}
.example-two::before {
  left: -2px;
  text-shadow: 2px 0 green;
  animation: example-two-anim-2 3s infinite linear alternate-reverse;
}

/* 
  (IMAGE) PARAMS
  =================
  @mixin imgGlitch($name, $intensity, $width, $height, $top, $left)
  =================
  1. Namespace
  2. Intensity
  3. Width (px)
  4. Height (px)
  5. Top (px, abs pos)
  6. Left (px, abs pos)
*/
@keyframes example-three-anim-1 {
  0% {
    clip-path: inset(79% 0 22% 0);
  }
  6.6666666667% {
    clip-path: inset(18% 0 81% 0);
  }
  13.3333333333% {
    clip-path: inset(79% 0 9% 0);
  }
  20% {
    clip-path: inset(39% 0 60% 0);
  }
  26.6666666667% {
    clip-path: inset(92% 0 8% 0);
  }
  33.3333333333% {
    clip-path: inset(100% 0 1% 0);
  }
  40% {
    clip-path: inset(97% 0 4% 0);
  }
  46.6666666667% {
    clip-path: inset(97% 0 1% 0);
  }
  53.3333333333% {
    clip-path: inset(92% 0 2% 0);
  }
  60% {
    clip-path: inset(93% 0 2% 0);
  }
  66.6666666667% {
    clip-path: inset(46% 0 18% 0);
  }
  73.3333333333% {
    clip-path: inset(11% 0 17% 0);
  }
  80% {
    clip-path: inset(39% 0 42% 0);
  }
  86.6666666667% {
    clip-path: inset(76% 0 7% 0);
  }
  93.3333333333% {
    clip-path: inset(77% 0 14% 0);
  }
  100% {
    clip-path: inset(36% 0 60% 0);
  }
}
@keyframes example-three-anim-2 {
  0% {
    clip-path: inset(51% 0 13% 0);
  }
  6.6666666667% {
    clip-path: inset(5% 0 25% 0);
  }
  13.3333333333% {
    clip-path: inset(97% 0 1% 0);
  }
  20% {
    clip-path: inset(63% 0 22% 0);
  }
  26.6666666667% {
    clip-path: inset(55% 0 36% 0);
  }
  33.3333333333% {
    clip-path: inset(78% 0 13% 0);
  }
  40% {
    clip-path: inset(85% 0 16% 0);
  }
  46.6666666667% {
    clip-path: inset(33% 0 58% 0);
  }
  53.3333333333% {
    clip-path: inset(82% 0 2% 0);
  }
  60% {
    clip-path: inset(10% 0 87% 0);
  }
  66.6666666667% {
    clip-path: inset(27% 0 32% 0);
  }
  73.3333333333% {
    clip-path: inset(77% 0 12% 0);
  }
  80% {
    clip-path: inset(69% 0 18% 0);
  }
  86.6666666667% {
    clip-path: inset(82% 0 14% 0);
  }
  93.3333333333% {
    clip-path: inset(36% 0 61% 0);
  }
  100% {
    clip-path: inset(87% 0 9% 0);
  }
}
.example-three > img {
  position: absolute;
  top: 87px;
  left: 75px;
}
.example-three > img:nth-child(2) {
  left: 77px;
  animation: example-three-anim-1 2s infinite linear alternate-reverse;
}
.example-three > img:nth-child(3) {
  left: 73px;
  animation: example-three-anim-2 3s infinite linear alternate-reverse;
}

/* 
  (SVG) PARAMS
  =================
  @mixin svgGlitch($name, $intensity, $fillColor, $background, $width, $height, $top, $left)
  =================
  1. Namespace
  2. Intensity
  3. Fill Color
  4. Background
  5. Width (px)
  6. Height (px)
  5. Top (px, abs pos)
  6. Left (px, abs pos)
*/
@keyframes example-four-anim-1 {
  0% {
    clip-path: inset(91% 0 9% 0);
  }
  3.3333333333% {
    clip-path: inset(60% 0 7% 0);
  }
  6.6666666667% {
    clip-path: inset(86% 0 11% 0);
  }
  10% {
    clip-path: inset(30% 0 46% 0);
  }
  13.3333333333% {
    clip-path: inset(71% 0 4% 0);
  }
  16.6666666667% {
    clip-path: inset(37% 0 42% 0);
  }
  20% {
    clip-path: inset(38% 0 63% 0);
  }
  23.3333333333% {
    clip-path: inset(85% 0 9% 0);
  }
  26.6666666667% {
    clip-path: inset(55% 0 43% 0);
  }
  30% {
    clip-path: inset(17% 0 60% 0);
  }
  33.3333333333% {
    clip-path: inset(79% 0 5% 0);
  }
  36.6666666667% {
    clip-path: inset(14% 0 70% 0);
  }
  40% {
    clip-path: inset(67% 0 19% 0);
  }
  43.3333333333% {
    clip-path: inset(24% 0 4% 0);
  }
  46.6666666667% {
    clip-path: inset(18% 0 54% 0);
  }
  50% {
    clip-path: inset(47% 0 9% 0);
  }
  53.3333333333% {
    clip-path: inset(26% 0 8% 0);
  }
  56.6666666667% {
    clip-path: inset(9% 0 21% 0);
  }
  60% {
    clip-path: inset(10% 0 67% 0);
  }
  63.3333333333% {
    clip-path: inset(55% 0 4% 0);
  }
  66.6666666667% {
    clip-path: inset(100% 0 1% 0);
  }
  70% {
    clip-path: inset(56% 0 2% 0);
  }
  73.3333333333% {
    clip-path: inset(74% 0 3% 0);
  }
  76.6666666667% {
    clip-path: inset(92% 0 1% 0);
  }
  80% {
    clip-path: inset(14% 0 8% 0);
  }
  83.3333333333% {
    clip-path: inset(63% 0 11% 0);
  }
  86.6666666667% {
    clip-path: inset(2% 0 75% 0);
  }
  90% {
    clip-path: inset(98% 0 2% 0);
  }
  93.3333333333% {
    clip-path: inset(43% 0 48% 0);
  }
  96.6666666667% {
    clip-path: inset(54% 0 37% 0);
  }
  100% {
    clip-path: inset(67% 0 4% 0);
  }
}
@keyframes example-four-anim-2 {
  0% {
    clip-path: inset(2% 0 88% 0);
  }
  3.3333333333% {
    clip-path: inset(99% 0 2% 0);
  }
  6.6666666667% {
    clip-path: inset(4% 0 86% 0);
  }
  10% {
    clip-path: inset(86% 0 9% 0);
  }
  13.3333333333% {
    clip-path: inset(21% 0 63% 0);
  }
  16.6666666667% {
    clip-path: inset(60% 0 36% 0);
  }
  20% {
    clip-path: inset(100% 0 1% 0);
  }
  23.3333333333% {
    clip-path: inset(48% 0 31% 0);
  }
  26.6666666667% {
    clip-path: inset(75% 0 8% 0);
  }
  30% {
    clip-path: inset(92% 0 2% 0);
  }
  33.3333333333% {
    clip-path: inset(85% 0 16% 0);
  }
  36.6666666667% {
    clip-path: inset(78% 0 19% 0);
  }
  40% {
    clip-path: inset(5% 0 18% 0);
  }
  43.3333333333% {
    clip-path: inset(12% 0 82% 0);
  }
  46.6666666667% {
    clip-path: inset(32% 0 49% 0);
  }
  50% {
    clip-path: inset(15% 0 14% 0);
  }
  53.3333333333% {
    clip-path: inset(8% 0 84% 0);
  }
  56.6666666667% {
    clip-path: inset(2% 0 62% 0);
  }
  60% {
    clip-path: inset(54% 0 45% 0);
  }
  63.3333333333% {
    clip-path: inset(59% 0 19% 0);
  }
  66.6666666667% {
    clip-path: inset(97% 0 4% 0);
  }
  70% {
    clip-path: inset(75% 0 26% 0);
  }
  73.3333333333% {
    clip-path: inset(84% 0 11% 0);
  }
  76.6666666667% {
    clip-path: inset(46% 0 23% 0);
  }
  80% {
    clip-path: inset(3% 0 24% 0);
  }
  83.3333333333% {
    clip-path: inset(59% 0 16% 0);
  }
  86.6666666667% {
    clip-path: inset(21% 0 41% 0);
  }
  90% {
    clip-path: inset(99% 0 2% 0);
  }
  93.3333333333% {
    clip-path: inset(19% 0 12% 0);
  }
  96.6666666667% {
    clip-path: inset(62% 0 21% 0);
  }
  100% {
    clip-path: inset(8% 0 30% 0);
  }
}
.example-four svg {
  position: absolute;
  top: 8px;
  left: 175px;
  fill: white;
  background: red;
  width: 100px;
  height: 100px;
}
.example-four svg:nth-child(2) {
  fill: red;
  left: 173px;
  animation: example-four-anim-1 2s infinite linear alternate-reverse;
}
.example-four svg:nth-child(3) {
  fill: red;
  left: 177px;
  animation: example-four-anim-2 3s infinite linear alternate-reverse;
}

body {
  background: black;
  font-family: Sans-serif;
  padding: 20px;
}

.wrap {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}