computer.svg

<svg fill="none" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
	.main {
	  width: 400px;
	  position: relative;
	}
	
	.brightess {
	  position: absolute;
	  width: 5%;
	  height: 40%;
	  border-bottom-left-radius: 40% 100%;
	  border-top-right-radius: 100px 50%;
	  z-index: 100;
	  right: 5%;
	  top: 5%;
	  background-color: red;
	  display: none;
	  background: white;
	  background: -moz-linear-gradient(left, white 0%, #f6f6f6 43%, #ededed 100%);
	  background: -webkit-gradient(left top, right top, color-stop(0%, white), color-stop(43%, #f6f6f6), color-stop(100%, #ededed));
	  background: -webkit-linear-gradient(left, white 0%, #f6f6f6 43%, #ededed 100%);
	  background: -o-linear-gradient(left, white 0%, #f6f6f6 43%, #ededed 100%);
	  background: -ms-linear-gradient(left, white 0%, #f6f6f6 43%, #ededed 100%);
	  background: linear-gradient(to right, white 0%, #f6f6f6 43%, #ededed 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffffff", endColorstr="#ededed", GradientType=1 );
	}
	
	.no-signal {
	  width: 100%;
	  height: 100%;
	  margin: 0;
	  padding: 0;
	  position: relative;
	  display: flex;
	}
	.no-signal .color:nth-child(1) {
	  background: #bdc4bf;
	  position: absolute;
	  height: 100%;
	  width: 16.66%;
	}
	.no-signal .color:nth-child(2) {
	  background: #2fd7bf;
	  position: absolute;
	  height: 100%;
	  left: 16.66%;
	  width: 16.66%;
	}
	.no-signal .color:nth-child(3) {
	  background: #3eef34;
	  position: absolute;
	  height: 100%;
	  left: calc(16.66% * 2);
	  width: 16.66%;
	}
	.no-signal .color:nth-child(4) {
	  background: #b52bb7;
	  position: absolute;
	  height: 100%;
	  right: calc(16.66% * 2);
	  width: 16.66%;
	}
	.no-signal .color:nth-child(5) {
	  background: #1a21b5;
	  position: absolute;
	  height: 100%;
	  right: calc(16.66%);
	  width: 16.66%;
	}
	.no-signal .color:nth-child(6) {
	  background: #b61823;
	  position: absolute;
	  height: 100%;
	  right: 0;
	  width: 16.66%;
	}
	
	.container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 400px;
	  animation: glitch-screen 2.5s infinite;
	}
	.container .colors-inverted {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  height: 100%;
	  z-index: 9;
	  box-sizing: content-box;
	}
	.container .colors-inverted .color {
	  position: absolute;
	  height: 20%;
	  width: 100%;
	  bottom: 0;
	  background: linear-gradient(to right, #2823c4 15%, #ffffff 15%, #ffffff 15%, #ffffff 27%, #ffffff 36%, #2736db 36%, #2736db 65%, #000000 65%, #000000 89%);
	}
	.container .colors-inverted .color:before {
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 20px;
	  top: 0;
	  background: red;
	  filter: invert(1);
	  background: linear-gradient(to right, #bdc4bf 16.66%, #2fd7bf 33.32%, #3eef34 49.58%, #b52bb7 66.63%, #1a21b5 83.33%, #b61823 100%);
	}
	.container .no-signal {
	  position: relative;
	}
	.container .computer {
	  width: 100px;
	  height: 130px;
	  background: #dfd8c5;
	  position: absolute;
	  list-style: none;
	  border-radius: 4px;
	  margin: 0 40px;
	  z-index: 100;
	  top: 90px;
	  animation: glitch1 2.5s infinite;
	}
	.container .computer:nth-child(4) {
	  animation: glitch2 2.5s infinite;
	  -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
	  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
	}
	.container .computer:nth-child(3) {
	  animation: glitch3 2.5s infinite;
	  filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
	  filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
	}
	.container .computer .screen {
	  width: 40px;
	  height: 40px;
	  margin: 10px;
	  position: absolute;
	  border: 20px;
	  border-style: inset;
	  border-radius: 4px;
	}
	.container .computer .screen .lighting {
	  width: 20px;
	  height: 20px;
	  border-radius: 50%;
	  top: -50px;
	  left: -15px;
	  position: absolute;
	  z-index: 999;
	  box-shadow: 0px 35px 30px rgba(255, 255, 255, 0.99);
	}
	.container .computer .screen .cursor {
	  position: absolute;
	  z-index: 99;
	  content: "";
	  width: 100%;
	  color: #3cff00;
	  text-shadow: 0px 0px 5px rgba(60, 255, 0, 0.6);
	  font-size: 1.2rem;
	  margin-top: 10px;
	}
	.container .computer .screen .cursor:after {
	  content: "";
	  box-shadow: 0px 0px 5px rgba(60, 255, 0, 0.6);
	  width: 10px;
	  border-radius: 1px;
	  height: 100%;
	  margin-top: 4px;
	  margin-left: 5px;
	  background: #3cff00;
	  animation: cursor 1s infinite;
	  position: absolute;
	  top: -4px;
	}
	.container .computer .screen:before {
	  content: "";
	  width: 70px;
	  height: 70px;
	  top: -15px;
	  left: -15px;
	  border-radius: 1px;
	  background: black;
	  position: absolute;
	}
	.container .computer .screen:after {
	  content: "";
	  width: 60px;
	  height: 60px;
	  top: -15px;
	  left: -15px;
	  background: #2f2f2f;
	  position: absolute;
	  border-radius: 4px;
	  margin: 4px;
	}
	.container .computer .disk {
	  width: 100%;
	  height: 3px;
	  position: absolute;
	  bottom: 20px;
	  z-index: 9;
	  border: 1px;
	  border-top-style: inset;
	  border-bottom-style: inset;
	}
	.container .computer .disk:after {
	  position: absolute;
	  width: 40px;
	  height: 3px;
	  right: 10px;
	  content: "";
	  background: black;
	}
	.container .computer:before {
	  position: absolute;
	  content: "";
	  height: 10px;
	  background: #dfd8c5;
	  width: 100%;
	  margin-top: 120px;
	  z-index: 1;
	  border-bottom-left-radius: 4px;
	  border-bottom-right-radius: 4px;
	}
	.container .computer:after {
	  position: absolute;
	  content: "";
	  margin-top: 120px;
	  height: 30px;
	  background: #877e6a;
	  width: 100%;
	  border-radius: 4px;
	}
	.container .keyboard {
	  transform: perspective(400px) rotateX(65deg);
	  width: 104px;
	  height: 30px;
	  bottom: -55px;
	  position: absolute;
	  background: #d0c6a9;
	  margin: -10px;
	  border: 8px solid #dfd8c5;
	  border-radius: 2px;
	}
	.container .keyboard:before {
	  position: absolute;
	  content: "";
	  height: 20px;
	  background: #877e6a;
	  width: 118px;
	  left: -7px;
	  bottom: -22px;
	  transform: perspective(400px) rotateX(-55deg);
	}
	.container .mouse {
	  transform: perspective(40px) rotateX(70deg);
	  width: 15px;
	  height: 30px;
	  bottom: -55px;
	  position: absolute;
	  background: #dfd8c5;
	  border-radius: 2px;
	  left: 140px;
	}
	.container .mouse:after {
	  position: absolute;
	  content: "";
	  border-bottom-left-radius: 2px;
	  border-bottom-rigth-radius: 2px;
	  background: #dfd8c5;
	  width: 13px;
	  height: 59px;
	  transform: perspective(54px) rotateX(122deg);
	  top: -11px;
	  left: -3px;
	}
	.container .mouse:before {
	  position: absolute;
	  content: "";
	  height: 10px;
	  border-bottom-left-radius: 2px;
	  border-bottom-rigth-radius: 2px;
	  background: #877e6a;
	  width: 15px;
	  bottom: -7px;
	  transform: perspective(40px) rotateX(-55deg);
	}
	@keyframes cursor {
	  0% {
	    opacity: 0;
	  }
	  40% {
	    opacity: 0;
	  }
	  50% {
	    opacity: 1;
	  }
	  90% {
	    opacity: 1;
	  }
	  100% {
	    opacity: 0;
	  }
	}
	.container :root {
	  --bg-color: red;
	  --blend-1: normal;
	  --blend-2: normal;
	  --blend-3: normal;
	  --time-anim: 2s;
	}
	
	.container-glitch {
	  display: flex;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index: 0;
	  flex: 1;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  overflow: hidden;
	  z-index: 999999999999;
	  opacity: 0.5;
	}
	
	.glitch-image {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index: 0;
	  background-position: center;
	  background-size: cover;
	}
	
	.glitch-image:nth-child(1) {
	  opacity: 0.1;
	}
	
	.glitch-image:nth-child(2) {
	  background-color: #000;
	  background-blend-mode: var(--blend-1);
	}
	
	.glitch-image:nth-child(3) {
	  background-color: #000;
	  background-blend-mode: var(--blend-2);
	}
	
	.glitch-image:nth-child(4) {
	  background-color: #000;
	  background-blend-mode: var(--blend-3);
	}
	
	.glitch-image:nth-child(n+2) {
	  opacity: 0;
	}
	
	.glitch-image:nth-child(n+1) {
	  opacity: 1;
	}
	
	.glitch-image:nth-child(2) {
	  transform: translate3d(1.1, 0, 0);
	  animation: glitch-horizontal 3s infinite linear alternate;
	}
	
	.glitch-image:nth-child(3) {
	  transform: translate3d(-1.1, 0, 0);
	  animation: glitch-horizontal-2 2s infinite linear alternate;
	}
	
	.glitch-image:nth-child(4) {
	  transform: translate3d(-1.1, 0, 0);
	  animation: glitch-vertical 1s infinite linear alternate;
	}
	
	.glitch-image:nth-child(5) {
	  transform: translate3d(0, 1.1, 0) scale3d(-1, -1, 1);
	  animation: glitch-flash 0.5s steps(1, end) infinite;
	}
	
	.glitch-image:nth-child(6) {
	  transform: translate3d(0, 1.3, 0) scale3d(-1, -1, 1);
	  animation: glitch-flash-2 0.5s steps(1, end) infinite;
	}
	
	/*Keyframes*/
	@keyframes glitch-horizontal {
	  0% {
	    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	  }
	  10% {
	    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	  }
	  20% {
	    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	  }
	  30% {
	    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	  }
	  40% {
	    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	  }
	  50% {
	    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	  }
	  60% {
	    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	  }
	  70% {
	    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	  }
	  80% {
	    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	  }
	  90% {
	    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	  }
	  100% {
	    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	  }
	}
	@keyframes glitch-horizontal-2 {
	  0% {
	    opacity: 1;
	    transform: translate3d(-10px, 0, 0);
	    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	  }
	  3% {
	    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	  }
	  5% {
	    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
	    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
	  }
	  7% {
	    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	  }
	  9% {
	    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
	    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
	  }
	  11% {
	    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
	    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
	  }
	  13% {
	    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	  }
	  15% {
	    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
	    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
	  }
	  17% {
	    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
	    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
	  }
	  19% {
	    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
	    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
	  }
	  20% {
	    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
	    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
	  }
	  21.9% {
	    opacity: 1;
	    transform: translate3d(-10px, 0, 0);
	  }
	  22%, 100% {
	    opacity: 0;
	    transform: translate3d(0, 0, 0);
	    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	  }
	}
	@keyframes glitch-vertical {
	  0% {
	    opacity: 1;
	    transform: translate3d(0, -5px, 0) scale3d(-1, -1, 1);
	    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	  }
	  1.5% {
	    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	  }
	  2% {
	    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
	    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
	  }
	  2.5% {
	    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	  }
	  3% {
	    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
	    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
	  }
	  5% {
	    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
	    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
	  }
	  5.5% {
	    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	  }
	  7% {
	    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	  }
	  8% {
	    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	  }
	  9% {
	    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
	    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
	  }
	  10.5% {
	    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
	    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
	  }
	  11% {
	    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
	    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
	  }
	  13% {
	    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
	    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
	  }
	  14% {
	    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	  }
	  14.5% {
	    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
	    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
	  }
	  15% {
	    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
	    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
	  }
	  16% {
	    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	  }
	  18% {
	    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
	    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
	  }
	  20% {
	    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	  }
	  21.9% {
	    opacity: 1;
	    transform: translate3d(0, -10px, 0) scale3d(-1, -1, 1);
	  }
	  22%, 100% {
	    opacity: 0;
	    transform: translate3d(0, 0, 0);
	    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	  }
	}
	@keyframes glitch-flash {
	  0% {
	    opacity: 0.2;
	    transform: translate3d(10px, 5px, 0);
	  }
	  33%, 100% {
	    opacity: 0;
	    transform: translate3d(0, 0, 0);
	  }
	}
	@keyframes glitch-flash-2 {
	  0% {
	    opacity: 0.2;
	    transform: translate3d(5px, 10px, 0);
	  }
	  13%, 100% {
	    opacity: 0;
	    transform: translate3d(0, 0, 0);
	  }
	}
	@keyframes glitch-screen {
	  0% {
	    opacity: 1;
	  }
	  7% {
	    filter: grayscale(0.5);
	  }
	  10% {
	    opacity: 1;
	  }
	  27% {
	    opacity: 1;
	    filter: grayscale(0);
	  }
	  30% {
	    opacity: 0.75;
	  }
	  35% {
	    opacity: 1;
	  }
	  52% {
	    opacity: 1;
	  }
	  55% {
	    filter: grayscale(0.5);
	  }
	  50% {
	    opacity: 1;
	  }
	  72% {
	    opacity: 1;
	  }
	  75% {
	    opacity: 0.75;
	  }
	  80% {
	    transform: none;
	    opacity: 1;
	  }
	  100% {
	    transform: none;
	    opacity: 1;
	  }
	}
	@keyframes glitch1 {
	  0% {
	    transform: none;
	  }
	  7% {
	    transform: skew(-2deg, -1deg);
	  }
	  10% {
	    transform: none;
	  }
	  27% {
	    transform: none;
	  }
	  30% {
	    transform: skew(0.8deg, -0.1deg);
	  }
	  35% {
	    transform: none;
	  }
	  52% {
	    transform: none;
	  }
	  55% {
	    transform: skew(-1deg, 0.2deg);
	  }
	  50% {
	    transform: none;
	  }
	  72% {
	    transform: none;
	  }
	  75% {
	    transform: skew(0.4deg, 1deg);
	  }
	  80% {
	    transform: none;
	  }
	  100% {
	    transform: none;
	  }
	}
	@keyframes glitch2 {
	  0% {
	    transform: none;
	    opacity: 0.5;
	  }
	  7% {
	    transform: translate(-2px, -2px);
	    opacity: 1;
	  }
	  10% {
	    transform: none;
	    opacity: 0.5;
	  }
	  27% {
	    transform: none;
	    opacity: 0.5;
	  }
	  30% {
	    transform: translate(-5px, -2px);
	    opacity: 1;
	  }
	  35% {
	    transform: none;
	    opacity: 0.5;
	  }
	  52% {
	    transform: none;
	    opacity: 0.5;
	  }
	  55% {
	    transform: translate(-5px, -1px);
	    opacity: 1;
	  }
	  50% {
	    transform: none;
	    opacity: 0.5;
	  }
	  72% {
	    transform: none;
	    opacity: 0.5;
	  }
	  75% {
	    transform: translate(-20px, -6px);
	    opacity: 1;
	  }
	  80% {
	    transform: none;
	    opacity: 0.5;
	  }
	  100% {
	    transform: none;
	    opacity: 0.5;
	  }
	}
	@keyframes glitch3 {
	  0% {
	    transform: none;
	    opacity: 0.5;
	  }
	  7% {
	    transform: translate(10px, 10px);
	    opacity: 1;
	  }
	  10% {
	    transform: none;
	    opacity: 0.5;
	  }
	  27% {
	    transform: none;
	    opacity: 0.5;
	  }
	  30% {
	    transform: translate(10px, 2px);
	    opacity: 1;
	  }
	  35% {
	    transform: none;
	    opacity: 0.5;
	  }
	  52% {
	    transform: none;
	    opacity: 1;
	  }
	  55% {
	    transform: translate(5px, 1px);
	    opacity: 1;
	  }
	  50% {
	    transform: none;
	    opacity: 0.5;
	  }
	  72% {
	    transform: none;
	    opacity: 1;
	  }
	  75% {
	    transform: translate(2px, 6px);
	    opacity: 1;
	  }
	  80% {
	    transform: none;
	    opacity: 0.5;
	  }
	  100% {
	    transform: none;
	    opacity: 0.5;
	  }
	}
      </style>
      <div>
        <div class="main">
		<div class="brightess"></div>

		<div class="container-glitch">
			<div class="glitch-image"></div>
			<div class="glitch-image"></div>
			<div class="glitch-image"></div>
		</div>

			<div class="container">
				<div class="colors-inverted">
					<div class="line">
						<div class="color"></div>
					</div>
				</div>
				<div class="no-signal">
					<div class="color"></div>
					<div class="color"></div>
					<div class="color"></div>
					<div class="color"></div>
					<div class="color"></div>
					<div class="color"></div>
				</div>
		
				<div class="computer">
					<div class="screen">
						<div class="lighting"></div>
						<div class="cursor">$: </div>
					</div>
					<div class="disk"></div>
					<div class="keyboard"></div>
					<div class="mouse"></div>
				</div>
				<div class="computer">
					<div class="screen">
						<div class="lighting"></div>
						<div class="cursor">$: </div>
					</div>
					<div class="disk"></div>
					<div class="keyboard"></div>
					<div class="mouse"></div>
				</div>
		
				<div class="computer">
					<div class="screen">
						<div class="lighting"></div>
						<div class="cursor">$: </div>
					</div>
					<div class="disk"></div>
					<div class="keyboard"></div>
					<div class="mouse"></div>
				</div>
			</div>
		</div>
      	</div>
    </div>
  </foreignObject>
</svg>