HTML/CSS - 🔮🌈Sρuя Fαвяiçαтiσи Online Editor and JavaScript Compiler

html

<!--
╱╭━━┳━┳━┳╮            🔮🌈Sρuя  
━┫╱┓┣┳━━━╯                Fαвяiçαтiσи..!🥰
╱╱╱┃┃╯                     
━┫╱╰┛╯
╱╰━━━╯
DISCLAIMER:The code is for educational purposes only. You can use it for educational purposes only not for commercial uses.
Textile/Fabric printing is the process of applying colour to fabric in definite patterns or designs. In properly printed fabrics the colour is bonded with the fibre, so as to resist washing and friction. Textile/Fabric printing is related to dyeing but in dyeing properly the whole fabric is uniformly covered with one colour, whereas in printing one or more colours are applied to it in certain parts only, and in sharply defined patterns. In printing, wooden blocks, stencils, engraved plates, rollers, or silkscreens can be used to place colours on the fabric. Colourants used in printing contain dyes thickened to prevent the colour from spreading by capillary attraction beyond the limits of a pattern or design.
🔮About dat.GUI:
It is a lightweight graphical user interface developed by the Google Data Arts Team. With just a few lines of code, the library creates an interface that lets you modify Javascript variables and see the results on the fly, all without having to redeploy code.
This animation is already used for a buying house fabric works presentation. I just make a spur/injecting effect in it and added a js lib name dat GUI that helps quenching your eyes with effects. 
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js" integrity="sha512-ALoawPS0JxHQ+8dGL7htZIlVNRaE/SN9gHD4G8pJJTi9H4BQ/3PjdvhggSGR34g00mvTPFkxQuveQUsJA5664Q==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js" integrity="sha512-LF8ZB1iTwi4Qvkm4pekHG4a437Y9Af5ZuwbnW4GTbAWQeR2E4KW8WF+xH8b9psevV7wIlDMx1MH9YfPqgKhA/Q==" crossorigin="anonymous"></script>
    </head>
    <body>
        <canvas id=c></canvas>

css

canvas {
  
  position: absolute;
  top: 0;
  left: 0;
}
/*
━━━╮""""''''''
━━╮╰╮┊┊┊┊┊┊
┊┊╰╮╰━▂▂▂▂┊┊┊┊┊┊
┊▂╱▔╲▔╱┏┳╮╲┊┊ᶤ.╭╮
▂╲▂▂╱╲╲╰┻┛╱▔▔▔▔┃
╲▂▂╱╭╯╱▔▔╱▔▔▔▽▽╯ 
┊╱╱╭╯╱▔▔▔╲▂▂△▂△╮  Thanks for visiting the 
━━━╯╱╱╭━━━━━━━━╯   code🖐️
*/

alert("🔮🌈Sρuя Fαвяiçαтiσи ..!\n\n\n👉Fabric printing is the process of applying colour to fabric in definite patterns or designs. In properly printed fabrics the colour is bonded with the fibre, so as to resist washing and friction. I also use dat-GUI, never forget to test controls.\n\n\n👉To feel the animation click on the screen; and with changing controls. Music will be in 10sec. I try my level best. Thanks for visiting. Enjoy🥰");
//DOM Loader
window.addEventListener('load', checkJSLoaded)
function checkJSLoaded() { 
var c = document.getElementById("c");
var sound = new Howl({
  src: ['http://dl.dropbox.com/s/83b6qa118bx00e7/Eiffel%2065%20-%20Blue%20%28Da%20Ba%20Dee%29%20_Gabry%20Ponte%20Ice%20Pop%20Mix_%20%28Original%20Video%20with%20subtitles%29%20%28%20256kbps%20cbr%20%29.mp3']
});
// Clear listener after first call.
sound.once('load', function(){
  sound.play();
});
var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    opts = {
      
      count: 150,
      baseAcc: .1,
      addedAcc: .1,
      jitter: 4,
      widthMult: .5,
      cx: w / 2,
      cy: h / 2,
      tickIncrementer: 1,
      repaintAlpha: .1,

BROWSER

Console