Revisions to Formatting Sandbox

Spoiler fix

Source Link

edited Apr 18, 2019 at 19:40

user495830

Disclaimer:

Please do not remove the RTLO. (I like it the way it is, thank you very much.)

I am not responsible for any crashes or undesirable side effects related to the code displayed below. Run all snippets at your own risk. You have been warned.

Rollback to Revision 6

Source Link

edited Apr 18, 2019 at 19:28

user495830

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

Note: Use this in fullscreen.

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

‮_Note: Use this in fullscreen._

‮ WARNING: Prolonged execution may cause browser issues. The code is a spoiler to prevent unexpected crashes

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

Note: Use this in fullscreen.
WARNING: Prolonged execution may cause browser issues. The code is a spoiler to prevent unexpected crashes

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

‮_Note: Use this in fullscreen._

‮ WARNING: Prolonged execution may cause browser issues.

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

added 48 characters in body

Source Link

edited Apr 18, 2019 at 15:11

randomuser5215

477
5
15

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

‮_Note: Use this in fullscreen._

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

‮Note: Use this in fullscreen.
WARNING: Prolonged execution may cause browser issues. The code is a spoiler to prevent unexpected crashes

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

‮_Note: Use this in fullscreen._

‮ WARNING: Prolonged execution may cause browser issues.

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>This is some random nonsense!</title>
</head>
<body>
<marquee behavior="alternate" direction="down" height="600" width="600" id="marqueeVt">
<marquee behavior="alternate" direction="left" id="marqueeHz">
    <canvas id="canvas"></canvas>
</marquee>
</marquee>
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 11700;
    canvas.width = 11700;
    var ctx = canvas.getContext("2d");
    
    function marqueeDirection() {
        var marqueeVt = document.getElementById("marqueeVt"), marqueeHz = document.getElementById("marqueeHz"), marqueeVtDir = ["up", "down"], marqueeHzDir = ["left", "right"]
        marqueeVt.direction = marqueeVtDir[Math.floor(Math.random() * 2)]
        marqueeHz.direction = marqueeHzDir[Math.floor(Math.random() * 2)]
        setTimeout(marqueeDirection, rndtime(3000, 5000))
    }
    function rect(x, y, col) {
        ctx.fillStyle = col;
        ctx.fillRect(x, y, Math.floor(Math.random() * 150), Math.floor(Math.random() * 150))
    }
    
    function circle(x, y, col) {
        ctx.fillStyle = col
        ctx.beginPath();
        ctx.arc(x, y, Math.floor(Math.random() * 150), 0, Math.PI * 2, false)
        ctx.fill()
    }

    function rndcol(){
        return "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16).padStart(6, "0");
    }

    function rndcoord(limit) {
        return Math.floor(Math.random() * limit);
    }

    function rndtime(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function rndrect() {
        setTimeout(function () { rect(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }

    function rndcircle() {
        setTimeout(function () { circle(rndcoord(canvas.width), rndcoord(canvas.height), rndcol()) }, rndtime(1, 1000))
    }
    
    function rndline() {
        setTimeout(function () { 
            ctx.strokeStyle = rndcol()
            ctx.lineWidth = Math.floor(Math.random() * 5)
            ctx.beginPath()
            ctx.moveTo(rndcoord(canvas.width), rndcoord(canvas.height))
            for (var i = 0; i < Math.floor(Math.random() * 20); i++) {
                ctx.lineTo(rndcoord(canvas.width), rndcoord(canvas.height))
            }
            ctx.stroke()
        }, rndtime(1, 1000))
    }

    console.log("Loading...")
    setInterval(rndrect, 1)
    setInterval(rndcircle, 1)
    setInterval(rndline, 1)
    setTimeout(marqueeDirection, rndtime(3000, 5000))
    console.log("...done")
</script>
</body>
</html>

Note: Use this in fullscreen.
WARNING: Prolonged execution may cause browser issues. The code is a spoiler to prevent unexpected crashes

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <style>
        #container {
            border-style: dotted;
            border-width: 5px;
            border-color: black;
            padding: 10px;
        }
        
        .unicorn {
            border-style: solid;
            border-width: 5px;
            border-radius: 12px;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script>
    function rndhex64(){
        return Math.floor(Math.random() * Math.pow(16, 64)).toString(16) // .padStart(64, "0") is unnecessary
    }

    function unicornimg() {
        var url = "https://unicornify.pictures/avatar/" + rndhex64() + "?s=128"
        var link = document.createElement("a")
        link.href = url
        link.target = "_blank"
        var img = document.createElement("img")
        img.src = url
        img.classList.add("unicorn")
        link.appendChild(img)
        document.getElementById("container").appendChild(link)
    }

    function bgcol() {
        var body = document.body
        var bgcol = getbgcol(body.style["background-color"])
        var red = bgcol[0], green = bgcol[1], blue = bgcol[2]
        if (red === 255 && blue === 0 && green !== 255) {
            green++
        } else if (green === 255 && red > 0) {
            red--
        } else if (green === 255 && red === 0 & blue !== 255) {
            blue++
        } else if (blue === 255 && green > 0) {
            green--
        } else if (blue === 255 && green === 0 && red !== 255) {
            red++
        } else if (red === 255 && blue > 0) {
            blue--
        } else {
            console.error("Error: " + body.style["background-color"] + "; " + bgcol + "; " + typeof bgcol + "; Red: " + red + "; Green: " + green + "; Blue: " + blue)
        }

        bgcol = red * 65536 + green * 256 + blue
        body.style["background-color"] = col(bgcol)
    }

    function getbgcol(rgbstr) {
        colarray = rgbstr.split(", ")
        colarray[0] = parseInt(colarray[0].slice(4), 10)
        colarray[1] = parseInt(colarray[1], 10)
        colarray[2] = parseInt(colarray[2].slice(0, -1), 10)
        return colarray
    }
    
    function col(num) {
        return "#" + num.toString(16).padStart(6, "0");
    }

    document.body.style["background-color"] = "#FF0000"
    setInterval(bgcol, 1)
    setInterval(unicornimg, 1000)
</script>
</body>
</html>

Spoiler

Source Link

edited Apr 15, 2019 at 2:51

user495830

Loading

Unicorns!

Source Link

edited Apr 15, 2019 at 2:44

user495830

Loading

Rollback to Revision 2

Source Link

edited Apr 1, 2019 at 23:55

user495830

Loading

deleted 3 characters in body

Source Link

edited Apr 1, 2019 at 19:06

randomuser5215

477
5
15

Loading

Larger canvas.

Source Link

edited Mar 31, 2019 at 20:59

user495830

Loading

Source Link

created Mar 31, 2019 at 4:10

user495830

Loading

Post Made Community Wiki by user495830

occurred Mar 31, 2019 at 4:10

Stack Exchange Network

Return to Answer

Disclaimer:

Disclaimer: