title: How to arrange random letters, characters, shapes, etc in a random shape using CSS, HTML and jQuery?
body: <p>I have attached mockups which I want to implement in HTML and then animate these to form a loader.<a href="https://i.stack.imgur.com/eeufd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eeufd.jpg" alt="enter image description here" /></a></p>
  <p>I have tried to set the letter initially using Masonry JS. But I am not sure how to arrange these within a shape.</p>
  <p>Can this be achieved by Three.JS or Particle.JS? I have just started with Three.JS but I am not sure if I am on a right track.</p>
  <p>Also, I am not very much good at Adobe applications to make this as GIF or a video.</p>
  <p>Here is the codepen <a href="https://codepen.io/jagruti23/pen/rNJqYLr" rel="nofollow noreferrer">https://codepen.io/jagruti23/pen/rNJqYLr</a></p>
  <pre><code>HTML
  &lt;div class=&quot;flyingLetters&quot;&gt;&lt;/div&gt;
  
  CSS
  body {
    background: #010101;
    color: #fff;
    display: flex;
    align-items :center;
    justify-content: center;
  }
  .flyingLetters {  
    display: flex;
    align-items :center;
    justify-content: center;
  }
  .flyingLetters {
    position: fixed;
    left: 0;
    width: 10%
  }
  .animation-container {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 300px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    transform: translateY(-50%);
  }
  .animation-container span {
    color: whitesmoke;
    display: block;
    font-size: 18px;
    text-shadow: 0 0 1px white;
    user-select: none;
    float: left;
    pointer-events: none;
    cursor: default;
    z-index: 1;
    will-change: transform, opacity;
    animation-timing-function: ease-out;
    margin: 2px
  }
  jQuery
  
  function makeid() {
    var text = &quot;&quot;;
    var possible = &quot;ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789&quot;;
  
    for (var i = 0; i &lt; 125; i++)
      text += &quot;&lt;span&gt;&quot; + possible.charAt(Math.floor(Math.random() * possible.length)) + &quot;&lt;/span&gt;&quot;;
  
    return text;
  }
  
  // $(&quot;.flyingLetters&quot;).html(makeid());
  'use strict';
  
  var app = {
  
    chars: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
  
    init: function () {
      app.container = document.createElement('div');
      app.container.className = 'animation-container';
      document.querySelector('.flyingLetters').appendChild(app.container);
      // window.setInterval(app.add, 100);
    },
  
    add: function () {
      var element = document.createElement('span');
      // element.className('letters');
      app.container.appendChild(element);
      app.animate(element);
    },
  
    animate: function (element) {
      var character = app.chars[Math.floor(Math.random() * app.chars.length)];
      var duration = Math.floor(Math.random() * 15) + 1;
      var offset = Math.floor(Math.random() * (50 - duration * 2)) + 3;
      var size = 10 + (15 - duration);
      element.style.cssText = 'left:' + offset + 'vw; font-size:' + size + 'px;animation-duration:' + duration + 's; transform: rotate(' + ((Math.random() + 100) * Math.random()) + 'deg)';
      element.innerHTML = character;
      // window.setTimeout(app.remove, duration * 1000, element);
    },
  
    remove: function (element) {
      element.parentNode.removeChild(element);
    },
  
  };
  
  app.init()
  
  for (var i = 0; i &lt; app.chars.length; i++) {
    app.add()
  }
  $(&quot;.animation-container&quot;).masonry({
    // options
    itemSelector: 'span',
  });
  document.addEventListener('DOMContentLoaded', );
  </code></pre>