THX

index.html

<div id="wrapper">
<div class="cssans cssans--center">
    <div class="cssans__accessible">CSSans Pro</div>

    <div class="cssans__word">
        <b class="cssans:K"></b>
        <b class="cssans:l"></b>
        <b class="cssans:a"></b>
        <b class="cssans:r"></b>
        <b class="cssans:a"></b>
    </div>

    <div class="cssans__word">
        <b class="cssans:i"></b>
        <b class="cssans:s"></b>
    </div>
    <div class="cssans__word">
        <b class="cssans:a"></b>
        <b class="cssans:w"></b>
         <b class="cssans:e"></b>
      <b class="cssans:s"></b>
      <b class="cssans:o"></b>
      <b class="cssans:m"></b>
      <b class="cssans:e"></b>
    </div>
  <p class="note">
  (duh)
  </p>
</div>
</div>

script.babel

var colorArray = [
    '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'
];


const burst = new mojs.Burst({
    radius: { 600: 10 },
    duration: 3000,
    count: 80,
    children: {
        shape: 'polygon',
        points: 8,
        scale: { 'rand(0, 5)': 0 },
        fill: colorArray,
        angle: { 'rand(0, 360)': 'rand(0, 360)' },
        duration: 'rand(1000, 7000)',
        delay: 'rand(0, 2000)'
    },
    onComplete() {
        this.generate().replay();
    }

}).replay();

scripts

<script src="https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js"></script>
<script src="https://cdn.jsdelivr.net/mojs-player/0.43.15/mojs-player.min.js"></script>

style.css

 @import url('https://fonts.googleapis.com/css?family=Nova+Mono');
body {
  overflow:hidden;
  background: #F5F5F5;
}

#wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.cssans__word {
  position: relative;
}
.note{
  font-family: nova mono;
  float: right;
  position: relative;
  top: 50%;
}

styles

<link href="https://cssans.pro/dist/cssans.min.css" rel="stylesheet" />

thx.markdown

THX

A Pen by filiptronicek on CodePen.

License.