https://github.com/conradsollitt/css-houdini-fractals
🎨 Drawing Fractals with CSS Houdini
https://github.com/conradsollitt/css-houdini-fractals
css css-houdini css3 fractal fractals
Last synced: about 2 months ago
JSON representation
🎨 Drawing Fractals with CSS Houdini
- Host: GitHub
- URL: https://github.com/conradsollitt/css-houdini-fractals
- Owner: ConradSollitt
- License: cc0-1.0
- Created: 2020-12-15T07:44:33.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-18T10:06:51.000Z (about 1 year ago)
- Last Synced: 2025-04-26T07:58:22.448Z (about 2 months ago)
- Topics: css, css-houdini, css3, fractal, fractals
- Language: JavaScript
- Homepage: https://conradsollitt.github.io/css-houdini-fractals/
- Size: 1.78 MB
- Stars: 19
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Houdini Fractals
Drawing Fractals with CSS Houdini.
This demo was created for https://github.com/GoogleChromeLabs/houdini.how and can be also previewed on the main Chrome Labs site https://houdini.how/
**From:** https://developer.mozilla.org/en-US/docs/Web/Houdini
> Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine.
## 🌐 Try it online!
https://conradsollitt.github.io/css-houdini-fractals/
## 🚀 Download locally
This repository has zero dependencies. Only the [fractals.js](fractals.js) 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.
```bash
# 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
```
## 💡 Usage
### Use CSS Houdini API to import the [fractals.js](fractals.js) file
```js
// 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');
}
```
### Use the [css-paint-polyfill] Polyfill to support all Modern Browsers (won't work with IE)
https://github.com/GoogleChromeLabs/css-paint-polyfill
```html
(async function () {
if (CSS['paintWorklet'] === undefined) {
await import('https://unpkg.com/css-paint-polyfill');
}
CSS.paintWorklet.addModule('fractals.js');
})();
```
### HTML
The type of HTML element and class name does not matter, rather height and width are needed.
```html
.fractals { height:400px; width:400px; }
```
### CSS Options
```css
/*
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);
}
```
## 🎨 CSS Houdini Links
* https://houdini.how/
* https://github.com/GoogleChromeLabs/houdini.how
* https://developer.mozilla.org/en-US/docs/Web/Houdini
## ❄️ Fractals
* https://fractalfoundation.org/resources/what-are-fractals/
* https://en.wikipedia.org/wiki/Fractal
* https://mathworld.wolfram.com/Fractal.html
* https://www.wired.com/2010/09/fractal-patterns-in-nature/
## 🌐 Additional JavaScript Fractal Links
* https://thefractal.zone/
* https://github.com/delimitry/fractals-js
* https://progur.com/2017/02/create-mandelbrot-fractal-javascript.html
* https://medium.com/@yortuc/fractal-fun-with-javascript-2102d03ad22b
* https://progur.com/2016/10/procedural-generation-create-fractal-trees-javascript.html
* https://lautarolobo.xyz/blog/use-javascript-and-html5-to-code-a-fractal-tree/
* https://www.lesscake.com/fractals-chaos-game
* https://repl.it/talk/learn/Julia-Fractals-in-JavaScript/12806
* http://rectangleworld.com/blog/archives/462
* http://slicker.me/fractals/animate.htm
## 📝 License
[](https://creativecommons.org/publicdomain/zero/1.0/)