background image cancel

just for animation (no gap between frames) , "animateTo": 300

Die Hintergrundbilder werden mit Hilfe von JavaScript im Browser erzeugt und dann als CSS eingefügt.
Auf ein unsichtbares Canvas-Element setze ich verschiedenfarbige Pixel,
deren Farbe ich mit einer Rauschfunktion berechne.

Eine frühere Version

border
streifen (horizontal & vertikal) -> kariert
strahlen (wo ist das Zentrum)
sinuswellen
papier (fusseln, huppel, verfärbte fasern)
waben, backsteinmauer, unregelmäßiges Mosaik (erhaben oder abgesenkt)
wolken (grau und bunt)
gradient (ecken einfärben oder radial?)
bröckelige Farbschicht (gradient)
kleckse, runterlaufende Farbe
überlagernde rechtecke
zufällige linien
bild

distortion
abnutzung
bloom, schatten
farbe zu transprenz

https://gomakethings.com/ditching-jquery-for-vanilla-js/

Im JavaScript-Quelltext sieht man ein Objekt backgroundImage, das für jedes Hintergrundbild neu instanziiert wird.

data-require-data='{

"width": 128,
"height": 64,
"background": {
    "category": "stripes",
    "width": 32, // müssen noch auf andere Größen gemapped werden
    "height": 32,
    "color": { "r": 150, "g": 90, "b": 40 }
},
"filters": [{
    "name": "scatter",
    "radius": 4
}]

"width": 256,
"height": 256,
"background": {
    "category": "noise"
},
"filters": [
    {
        "name": "distort",
        "radius": 128
    },{
        "name": "opacity",
        "opacity": 0.5
    }
]

"background": {
    "category": "sine",
    "direction": "circular",
    "period": 8,
    "color": {
        "r": 0, "g": 100, "b": 200
    }
}