JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<div id="willkommen">
<svg role="img"><title class="title">Basti1012!    </title><text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="50%">Basti1012!</text><text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="50%">Basti1012!</text></svg>
</div>

CSS

#willkommen{
  height: 80vh;
  width: 80vw;
  transition: background-color 0.3s ease-in;
  font-family: "Bangers", cursive;
  background-color: #ff002b;
  overflow: hidden;
  font-size:3vw;
}

svg {
  height: 100%;
  width: 100%;
  position: relative;
  top: -1rem;
  animation: pop-out 2s ease-in-out infinite;
   word-break: keep-all;
}
@keyframes pop-out {
  0% {
transform: scale3d(0, 0, 1);
    opacity: 1;
  }
  25% {
   transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(1.5, 1.5, 1);
    opacity: 0;
  }
}

JavaScript

var hue = 350;
  $("svg").on('webkitAnimationIteration oanimationiteration msAnimationIteration animationiteration ', function() {
 var word = words[Math.floor(Math.random() * words.length)] + "!";
  $(".word").text(word);
 hue += 47;
 $('#willkommen').css("background-color", "hsl(" + hue + ", 100%, 50%)");
 });
 words = [ "Basti1012", "Ohne Javascript geht nix", "Ab hier<br> Javascript aktivieren", "Die Javascript hilfe Seite", "Tutorials","Generatoren",  "Userscripte<br> für Greasemonkey", "Userscripte<br> für Tampermonkey","Nur beste<br> Hilfe Verlinkungen","Keine nervige Werbung","Kein Anmelden","Immer sehen<br> wo ich Online bin" ];