JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <svg id="container" width="100%" height="100%">
    <text id="word" text-anchor="middle" alignment-baseline="middle" font-size="48" x="50%" y="50%">Hello</text>
  </svg>

  <script>
    // Animation variables
    var centerX, centerY;
    var scattered = false;
    var animationDuration = 500; // in milliseconds

    // Function to scatter the letters
    function scatterLetters() {
      var letters = Array.from(document.querySelectorAll('#word tspan'));

      letters.forEach(function(letter) {
        var dx = Math.random() * 300 - 150; // random horizontal displacement
        var dy = Math.random() * 300 - 150; // random vertical displacement

        letter.setAttribute('x', centerX + dx);
        letter.setAttribute('y', centerY + dy);
      });

      scattered = true;
    }

    // Function to gather the letters back to the center
    function gatherLetters() {
      var letters = Array.from(document.querySelectorAll('#word tspan'));

      letters.forEach(function(letter, index) {
        var originalX = centerX - (letters.length / 2) * 20 + index * 20;
        var originalY = centerY;

        letter.setAttribute('x', originalX);
        letter.setAttribute('y', originalY);
      });

      scattered = false;
    }

    // Event listener for mouse wheel scrolling
    document.addEventListener('wheel', function(event) {
      if (event.deltaY < 0 && !scattered) {
        scatterLetters();
      } else if (event.deltaY > 0 && scattered) {
        gatherLetters();
      }
    });

    // Event listener for touch screen swipe
    var startY = null;
    document.addEventListener('touchstart', function(event) {
      startY = event.touches[0].clientY;
    });

    document.addEventListener('touchend', function(event) {
      if (startY !== null) {
        var deltaY = event.changedTouches[0].clientY - startY;

        if (deltaY < -50...