JSFiddle - React, Tailwind, and code Playground

by fiatjaf ~

HTML

<script src="http://www.corslit.com/v0/williamcotton/require-v0.0.1.js"></script>
<script src="http://www.corslit.com/v0/williamcotton/lit-v0.0.2.js"></script>
<div id="form-container">
     <h2>Get a unique pattern based on the hash of some string, use it as a custom background for your user!</h2>

    <form>
        <input type="text" id="username" placeholder="input some username">
        <button>identiWeave</button>
    </form>
</div>

CSS

* {
    font-family: gentium-basic;
}
h2 {
    font-family: Verdana;
}
#form-container {
    width: 600px;
    height: 300px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
form input {
    font-size: 20px;
}
form button {
    font-size: 20px;
}
#current {
    padding: 10px;
    background-color: brown;
    color: lightblue;
}
a, a:visited {
    color: black;
}

JavaScript

lit(['fiatjaf/identiWeave'], function () {
    var identiWeave = lit('fiatjaf/identiWeave')

    function weaveWithUsername(username, callback) {
        identiWeave({
            username: username,
            width: 135,
            height: 135,
            compositeOperation: "",
            pattern: [1, 3, 9, 27],
            alpha: 0.1,
            load: function (canvas, context, image, imageData, pixelMap) {
                document.body.style.backgroundImage = "url(" + image.src + ")"
            }
        })
    }

    var form = document.querySelector("form")
    var input = document.querySelector("#username")
    weaveWithUsername('' + Math.random())

    form.addEventListener("submit", function (evt) {
        evt.preventDefault()
        var username = input.value
        weaveWithUsername(username)
        return false;
    });
})