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]
This repository has zero dependencies. Only the 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
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>
The type of HTML element and class name does not matter, rather height and width are needed.
<style>
.fractals { height:400px; width:400px; }
</style>
<div class="fractals"></div>
<section class="fractals"></section>
/*
By default only `background-image: paint(fractals)` is needed.
*/
.fractals {
background-image: paint(fractals);
}
/*
The example below shows all options with default values, except
for [--colors] which is empty resulting in black lines.
[--colors] are dynamic and based on the number of colors included.
The delimiter for [--colors] is a space so these examples are all valid:
--colors: red green blue;
--colors: black;
--colors: #000 #222 #444 #666 #888 #aaa #ccc;
[--shape] = One of [line, circle, square]
[--debug-to-console] and [-show-origin] = 0 or 1
*/
.fractals {
--colors: red green blue cyan magenta yellow;
--angle: 30;
--starting-length-percent: 22;
--next-line-size: 0.8;
--shape: line;
--max-draw-count: 10000;
--debug-to-console: 0;
--show-origin: 0;
background-image: paint(fractals);
}
References
- ^ https://github.com/GoogleChromeLabs/houdini.how (github.com)
- ^ https://conradsollitt.github.io/css-houdini-fractals/ (conradsollitt.github.io)
- ^ fractals.js (github.com)
- ^ fractals.js (github.com)
- ^ https://github.com/GoogleChromeLabs/css-paint-polyfill (github.com)
Source: Echo Js