Skip to content

Instantly share code, notes, and snippets.

/6-pop-fractal-art-pure-css.markdown

Created February 20, 2018 01:04
Show Gist options
  • Save anonymous/daec0bfaffc2526304258a8dae532372 to your computer and use it in GitHub Desktop.
Save anonymous/daec0bfaffc2526304258a8dae532372 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Feb 20, 2018.
    7 changes: 7 additions & 0 deletions 6-pop-fractal-art-pure-css.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    #6 pop fractal art | pure CSS
    -----------------------------


    A [Pen](https://codepen.io/libertario/pen/eVMmre) by [Libertar.io](https://codepen.io/libertario) on [CodePen](https://codepen.io).

    [License](https://codepen.io/libertario/pen/eVMmre/license).
    14 changes: 14 additions & 0 deletions index.pug
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    mixin fractal(levels)
    while levels--
    div


    - layers = 9
    - levels = 18

    while layers--
    article
    - arms = 3
    while arms--
    section.set
    +fractal(levels)
    90 changes: 90 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@


    $layers: 9;
    $levels: 30;
    $arms: 3;

    body {
    margin: 0;
    overflow: hidden;
    height: 100vh;
    font-size: 150px;
    background: black;
    }


    .set {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1em;
    width: 1em;
    margin: -0.5em;
    //visibility: hidden;

    @for $i from 1 through $arms {
    &:nth-child(#{$i}) {
    transform: rotate(360deg/$arms*$i);
    }
    }
    }

    article {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1em;
    width: 1em;
    margin: -0.5em;

    @for $i from 1 through $layers {
    &:nth-child(#{$i}) {
    transform: rotate($i*90deg) scale(pow(0.7,$i));
    color: hsla(5*$i,50%,40%,1);
    }
    }
    }

    div {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1em;
    width: 1em;
    border-radius: 100%;
    background-color: currentColor;
    background-image: linear-gradient(to top, rgba(white,0.5), rgba(black,0.5));
    box-shadow: 0 0 0 2px rgba(black,0.3);

    &:before, &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0.5em;
    width: 0.5em;
    margin: -0.25em;
    border-radius: inherit;
    background: inherit;
    box-shadow: inherit;
    visibility: visible;
    }

    &:before {
    transform: rotate(50deg) translateY(0.6em) rotate(150deg);

    }
    &:after {
    transform: rotate(150deg) translateY(0.6em) rotate(50deg);

    }

    @for $i from 1 through $levels {
    &:nth-child(#{$i}) {
    font-size: 1em - 1/($levels + 1)*$i;
    transform: rotate($i*10deg - pow($i,2)/3) translateY(-3em) rotate(-70deg*sin(-20deg*$i));
    filter: hue-rotate(20deg*$i);
    }
    }

    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://codepen.io/pixelass/pen/EozGLB.scss" rel="stylesheet" />