La Paste

2023-05-19 17:20:43

<!DOCTYPE html>
<html>
<head>
	<title>Squigly text</title>

body {
  font-family: 'Amatic SC', sans-serif;
  font-size: 100px;
}

.distortion {
  -webkit-animation: squiggly-anim 0.34s linear infinite;
          animation: squiggly-anim 0.34s linear infinite;
}

body {
  line-height: 100vh;
  background: #111;
  color: #fff;
}

.distortion {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  outline: none;
  text-align: center;
  line-height: 1;
}
.small {
  font-size: 0.5em;
}
.smaller {
  font-size: 0.4em;
}
p {
  margin: 0;
}
@-webkit-keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}
@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  25% {
    filter: url("#squiggly-1");
  }
  50% {
    filter: url("#squiggly-2");
  }
  75% {
    filter: url("#squiggly-3");
  }
  100% {
    filter: url("#squiggly-4");
  }
}

</style>
</head>
<body>
	<div class="distortion">
  чьота таке
  <p class="small">– десь – <p/>
  тут
</div>

</body>
</html>