Drawing Fractals with CSS Houdini (Low-level CSS API powered by JavaScript)

Drawing Fractals with CSS Houdini. This demo was created for https://github.com/GoogleChromeLabs/houdini.how[1] 🌐 Try it online! … Read more Drawing Fractals with CSS Houdini (Low-level CSS API powered by JavaScript)

Drawing Fractals with CSS Houdini. This demo was created for https://github.com/GoogleChromeLabs/houdini.how[1]

https://conradsollitt.github.io/css-houdini-fractals/[2]

fractals.js[3] file is required to use it with any site. If you would like to try the demo locally download this repository and follow the commands below.

# If you have node installed:
npm start

# If you do not have node installed and have Python installed then depending on
# the version Python and OS installed one of the following commands should work:
python3 -m http.server
python -m http.server
python -m SimpleHTTPServer

CSS Houdini Fractals

CSS Houdini Fractals

CSS Houdini Fractals

CSS Houdini Fractals

fractals.js[4] file

// Modern Browsers - Import JavaScript file from CDN
if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('https://unpkg.com/[email protected]/fractals.js');
}

// Modern Browsers - Using Local build, only a single file is needed
if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('fractals.js');
}

https://github.com/GoogleChromeLabs/css-paint-polyfill[5]

<script type="module">
    (async function () {
        if (CSS['paintWorklet'] === undefined) {
            await import('https://unpkg.com/css-paint-polyfill');
        }
        CSS.paintWorklet.addModule('fractals.js');
    })();
</script>

CC0


Source: Echo Js


Categories: Development, Software


Leave a Reply

Your email address will not be published. Required fields are marked *