css-houdini-fractals/fractals.css

Fractals Drawing with CSS Houdini

html, body {
    height: 100%;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(180deg, hsl(0 0% 100% / 0.2) 1%, hsl(0 0% 100% / 0.2) 30%,#fff),
        linear-gradient(25deg, #ce084b, #017bdc 32%,#FFEB3B);
    background-repeat: no-repeat;
    background-size: cover;
}

h1,
section {
    padding: 20px;
    margin: 20px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
section { max-width: calc(100vw - 80px); }

/*
    For more on how the <h1> works see my personal site and the CSS source:
        https://conradsollitt.com/
*/
h1 { font-size:3em; letter-spacing: 0.08em; }
h1 span { --h: 0; --s: 100%; --l: 50%; }
h1 span:nth-child(2n) { --h: 120; }
h1 span:nth-child(3n) { --h: 240; }
h1 span:nth-child(4n) { --h: 60; }
h1 span {
    color: hsl(var(--h), var(--s), var(--l));
    --darkest: calc(var(--l) - 30%);
    --outline: hsl(var(--h), var(--s), var(--darkest));
    text-shadow:
        -1px -1px      var(--outline),
        1px -1px       var(--outline),
        -1px 1px       var(--outline),
        1px 1px        var(--outline);
}

.flex { display:flex; flex-wrap: wrap; justify-content: center; }
.center { justify-content: center; }

section > div {
    display: flex;
    padding: 10px;
    flex-direction: column;
}
label {
    margin-bottom: 8px;
    width:150px;
    color: #888;
}
select,
input[type="text"],
input[type="number"] { padding:.5em 1em; }
input { position: relative; }
input::before {
    position: absolute;
    content: attr(current-value);
    top: -25px;
    right: 0;
    font-weight: bold;
    font-size: 1.2em;
    color: black;
}
@media (min-width: 800px) {
    section > div { flex-direction: row; justify-content: space-between; }
    label { margin-bottom: 0; margin-right: 60px; }
    input[type="range"] { width: 200px; }
    input::before { left: -40px; right: initial; top: initial; }
    input#max-draw-count::before { left: -60px; }
}

.demo {
    width: calc(100vw - 80px);
    height: 50vh;
}
@media (min-width: 800px) {
    .demo { width:600px; }
}
@media (min-width: 1200px) {
    .demo { width:50vw; }
}

a[href^="https://github.com/"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2em;
}
a[href^="https://github.com/"]::before {
    content: '';
    background-image: url(https://github.githubassets.com/favicons/favicon.svg);
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    padding-right: 2em;
}

/*
    By default only `background-image: paint(fractals)` is needed.

    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.
    [--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);
}