JSFiddle - React, Tailwind, and code Playground

by amotor

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="word.css">
    <title>Word Cloud</title>
</head>
<body>
    

    <div class="word-cloud"></div>


    <script src="word.js"></script>
</body>
</html>

CSS

body {
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-cloud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: sans-serif;
  line-height: 0.2%;
  height: 60%;
}

.word-cloud span {
  position: relative;
  font-size: calc(6vw / (var(--i) + 1) + 2vh);
  margin-top: -1rem;
  animation: enter 3s ease-in-out, pulse 3s ease-in-out infinite;
  color: black;
  font-family: 'Indie Flower', cursive;
  filter: hue-rotate(var(--i)deg);
  animation-fill-mode: forwards;
  transition-timing-function: cubic-bezier(0.5, 1.5, 1.5, 1, 0.5);
  opacity: 0;
}

.word-cloud span:nth-child(n) {
  transform: rotate(45deg);
}

.word-cloud span:nth-child(2n) {
  transform: rotate(-40deg);
}

.word-cloud span:nth-child(3n) {
  transform: rotate(-90deg);
}

.word-cloud span:nth-child(4n) {
  transform: rotate(120deg);
}

.word-cloud span:nth-child(5n) {
  transform: rotate(345deg);
  font-size: 20px;
}

.word-cloud span:nth-child(6n) {
  transform: rotate(20deg);
}

.word-cloud span:nth-child(7n) {
  transform: rotate(240deg);
}

@keyframes enter {
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}

@media screen and (max-width: 1050px) {
  .word-cloud {
    width: 80%;
    height: 70%;
  }
}

JavaScript

const data = [
  { word: "Bebesh", weight: 10, context: "sample context" },
  { word: "Bebeshes", weight: 5, context: "sample context" },
  { word: "crime", weight: 9, context: "sample context" },
  { word: "Bob", weight: 6, context: "sample context" },
  { word: "fighters", weight: 4, context: "sample context" },
  { word: "Well", weight: 15, context: "sample context" },
  { word: "freeze", weight: 10, context: "sample context" },
  { word: "controll", weight: 2, context: "sample context" },
  { word: "strangth", weight: 7, context: "sample context" },
  { word: "sloth", weight: 1, context: "sample context" },
  { word: "run", weight: 6, context: "sample context" },
  { word: "soup", weight: 15, context: "sample context" },
  { word: "time", weight: 11, context: "sample context" },
  { word: "dinosaur", weight: 8, context: "sample context" },
  { word: "porridge", weight: 7, context: "sample context" },
  { word: "Well", weight: 15, context: "sample context" },
  { word: "freeze", weight: 4, context: "sample context" },
  { word: "controll", weight: 2, context: "sample context" },
  { word: "strangth", weight: 7, context: "sample context" },
  { word: "sloth", weight: 1, context: "sample context" },
  { word: "run", weight: 6, context: "sample context" },
  { word: "soup", weight: 15, context: "sample context" },
  { word: "time", weight: 11, context: "sample context" },
  { word: "dinosaur", weight: 8, context: "sample context" },
  { word: "porridge", weight: 7, context: "sample context" },
  { word: "Well", weight: 15, context: "sample context" },
  { word: "freeze", weight: 4, context: "sample context" },
  { word: "controll", weight: 4, context: "sample context" },
  { word: "strangth", weight: 7, context: "sample context" },
  { word: "sloth", weight: 1, context: "sample context" },
  { word: "run", weight: 6, context: "sample context" },
  { word: "soup", weight: 15, context: "sample context" },
  { word: "strangth", weight: 7, context: "sample context"...