HTML/CSS - why? Online Editor and JavaScript Compiler

html

<!-- 
    WHY?
    CREATED BY: VITRUVIAN
    MAY 1, 2018
-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <title>WHY?</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Voltaire" rel="stylesheet">
    </head>
    <body>
        <div id="loading">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="360px" height="430px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 360 430" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path fill="#12A697" fill-rule="nonzero" d="M130 211l6 45 4 83 89 0 4 -83 5 -45 -37 0 0 6c0,0 -6,17 -18,16 -13,0 -17,-16 -17,-16l0 -6 -36 0z"/>
  <path fill="#12A697" fill-rule="nonzero" d="M130 211c0,0 -42,83 -46,93 -1,2 -1,4 -1,6 -2,10 6,20 16,20l28 2c0,0 11,1 11,-13 1,-10 -5,-16 -5,-16l-13 -4 16 -41c0,0 -6,-47 -6,-47z"/>
  <path fill="#016C59" fill-rule="nonzero" d="M125 331c-7,0 -15,-1 -15,-7 0,-4 5,-11 11,-16l0 16c0,1 1,2 3,2l11 0c-2,3 -5,5 -9,5 0,0 -1,0 -1,0z"/>
  <path fill="#E0BFA6" fill-rule="nonzero" d="M137 312c0,-2 -1,-3 -2,-4 -1,-1 -2,-1 -4,-2 -2,0 -4,0 -6,-1 -8,5 -15,14 -15,19 0,1 1,2 1,3 3,2 6,-3 10,-3 4,-1 6,-1 11,-1 3,-4 5,-8 5,-11z"/>
  <path fill="#F2CFB3" fill-rule="nonzero" d="M117 317c5,-5 8,-6 11,-8 5,-3 7,-1 12,0 4,0 21,17 15,19 -4,2 -5,-8 -15,-13 2,2 13,13 8,14 -3,2 -4,-4 -6,-6 -2,-2 -4,-4 -6,-6 1,1 11,12 6,13 -4,2 -6,-8 -13,-11 3,3 10,11 5,12 -2,1 -5,-5 -7,-7 -2,-2 -4,0 -7,0 -6,-1 -4,-5 -3,-7z"/>
  <path fill="#12A697" fill-rule="nonzero" d="M239 211c0,0 41,83 45,93 1,2 1,4 2,6 2,10 -6,20 -17,20l-28 2c0,0 -10,1 -11,-13 -1,-10 5,-16 5,-16l14 -4 -17 -41c0,0 6,-47 7,-47z"/>
  <path fill="#E0BFA6" fill-rule="nonzero" d="M231 312c1,-2 2,-3 3,-4 1,-1 2,-1 3,-2 2,0 4,0 7,-1 8,5 14,14 14,19 0,1 0,2 -1,3 -2,2 -6,-3 -9,-3 -5,-1 -7,-1 -11,-1 -3,-4 -6,-8 -6,-11z"/>
  <path fill="#F2CFB3" fill-rule="nonzero" d="M252 317c-5,-5 -8,-6 -12,-8 -4,-3 -6,-1 -11,0 -5,0 -22,17 -15,19 3,2 5,-8 14,-13 -2,2 -13,13 -7,14 3,2 4,-4 5,-6 2,-2 5,-4 6,-6 -1,1 -10,12 -5,13 3,2 6,-8 12,-11 -3,3 -9,11 -4,12 1,1 5,-5 6,-7 2,-1 3,-1 4,0 1,0 2,0 3,0 6,-1 4,-5 4,-7z"/>
  <path fill="#81C8C1" fill-rule="nonzero" d="M229 339l-22 0 22 0 0 -10 0 0 0 10zm9 -126l0 -2 0 2 0 0z"/>
  <path fill="#098978" fill-rule="nonzero" d="M229 339l-22 0c0,-4 -5,-8 -11,-8l-6 0 0 -5 22 0c0,0 0,0 0,0 0,1 1,2 2,2 0,1 0,1 0,1 2,0 2,-1 3,-3l3 0c-1,1 -1,1 -1,2 0,1 1,1 2,1 0,1 0,1 0,1 2,0 3,-2 4,-4l1 0c-1,1 -1,2 -1,3 0,0 1,1 2,1 0,0 0,0 0,0 1,0 2,0 2,-1l0 10zm7 -113l-40 0c3,-4 5,-9 5,-9l0 -6 37 0 0 2c0,2 -1,7 -2,13z"/>
  <path fill="#119680" fill-rule="nonzero" d="M198 226l0 0c4,-4 6,-8 6,-8l0 -5 0 5c0,0 -2,4 -6,8z"/>

css

/*
    WHY?
    CREATED BY: VITRUVIAN
    MAY 1, 2018
*/
body {
    font-family: 'Voltaire', sans-serif;
    margin:0 0 0 0;
    background-color: #ffffff;
    color: #303030;
}
#loading {
    position:relative;
    margin:auto;
    width:360px;
    height:430px;
}
#text {
    position:absolute;
    top:10px;
    left:0;
    width:100%;
    text-align:center;
    font-size:40px;
}

/*
    WHY?
    CREATED BY: VITRUVIAN
    MAY 1, 2018
*/
var texts = ["It doesn't work... <b>Why?</b>","It works... <b>Why?</b>"];
var current = 0;
$(document).ready(function() {
    window.setTimeout(next,2000);
});
function next() {
    $("#text").fadeTo(600,0,"linear",function() {
        current = current===0?1:0;
        $("#text").html(texts[current]);
        $("#text").fadeTo(600,1,"linear",function() {
            window.setTimeout(next,2000);
        });
    });
}

BROWSER

Console