JSFiddle - React, Tailwind, and code Playground

by manototh

HTML

<html>

<body style="background:black">
    <!-- This is an example of a large image that takes a long time to load. -->
    <img src="https://stsci-opo.org/STScI-01H44AY5ZTCV1NPB227B2P650J.png" style="max-width: 100%; height: 100%; display: block; margin: auto;"></img>
    <!-- Enter the following code at the end of the <body> tag. -->
    <script src="site-intro-animation.js"></script>
</body>

</html>

JavaScript

(function () {
  "use strict";

  if (navigator.cookieEnabled && document.cookie.split(/[;=\s]+/).indexOf("welcome-animation") == -1) {
    const svgSource =
      // Enter the SVG code surrounded by backticks (`). See the example below and replace it with your own code. Source of current image: https://upload.wikimedia.org/wikipedia/commons/2/22/James_Webb_Space_Telescope_logo.svg
      `<svg width="513" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <title>James Webb Space Telescope logo</title>
      <g transform="matrix(6.0641 0 0 6.0641 -5479.8 -4046.4)" fill="#002b7c">
       <path d="m950.53 698.39-3.0976 3.2109 0.22265 3.4766 3.2031 0.88282 2.9219-2.9141-0.36328-3.9922z"/>
       <path d="m967.83 697.86-3.0547 3.6172 0.13281 3.2148 2.3711 0.47656 3.0781-3.9297-0.16406-3.0977z"/>
       <path d="m970.22 714.61 0.17187-3.3164-2.625-0.44921-2.9414 3.2031-0.19531 3.0234 2.5898 0.62109z"/>
       <path d="m944.68 708.61-0.0391 3.1484 2.7461 0.83203 2.8984-2.457-0.0938-3.1094-2.8516-0.78906z"/>
       <path d="m973.7 706.67-0.0664-3.9141-2.3398-0.26953-3.0312 3.8711-0.0117 3.0391 2.6719 0.46093z"/>
       <path d="m958.95 725.41 0.49219-3.7148-2.1328-0.58985-3.1133 2.6641-0.52344 3.4492 2.2617 0.67187z"/>
       <path d="m966.34 722.36 0.32032-3.2461-2.6016-0.62109-3.0586 2.918-0.48047 3.6406 2.168 0.55079z"/>
       <path d="m957.08 696.14-2.4726 2.7344 0.33984 3.7344 2.4336 0.56641 2.5234-2.875-0.33593-3.707z"/>
       <path d="m944.18 720.95-0.39062 2.9883 2.207 0.76172 3.5195-2.6719 0.30859-3.0703-2.207-0.76562z"/>
       <path d="m941.23 715.36-0.32422 3.5312 2.3828 0.83594 3.3672-2.7031 0.17187-3.0312-2.8711-0.87109z"/>
       <path d="m953.93 714.62 0.0391-2.0508-0.48828-0.58204-2.2539-0.66796-2.875 2.4336-0.17188 3.043 2.3867 0.82812z"/>
       <path d="m956.4 719.91 0.22656-3.4844-0.0742-0.10938-1.7695-0.44531-3.4492 3.0742-0.29297 2.9375 2.2656 0.67187z"/>
       <path d="m960.96 701.38-2.668 3.043 0.11328 3.4062 0.0859 0.12891...