Skip to content

Instantly share code, notes, and snippets.

@jasesmith

jasesmith/dark-star-pinwheel.markdown

Created September 7, 2016 18:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jasesmith/615cb17f129d24122e1b7b4317e9ea6b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jasesmith/615cb17f129d24122e1b7b4317e9ea6b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jasesmith created this gist Sep 7, 2016.
    7 changes: 7 additions & 0 deletions dark-star-pinwheel.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Dark Star Pinwheel
    ------------------
    Playing with mix-blend-mode, border-radius, and box-shadows.

    A [Pen](http://codepen.io/jasesmith/pen/dpPBGR) by [Jase](http://codepen.io/jasesmith) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/jasesmith/pen/dpPBGR/license).
    5 changes: 5 additions & 0 deletions index.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    %main
    - (1..6).each do |i|
    %div{:class => "color-#{i}"}

    %span
    101 changes: 101 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    :root {
    --c1: #d4145a;
    --c2: #f15a24;
    --c3: #f7931e;
    --c4: #fcee21;
    --c5: #9ccf5e;
    --c6: #29abe2;
    --d: .1em;
    --a: -35deg;
    }

    .color-1 {
    color: var(--c1);
    background: linear-gradient(var(--a), var(--c2), var(--c1));
    transform: translate(-50%, -50%) rotate(0deg);
    }

    .color-2 {
    color: var(--c2);
    background: linear-gradient(var(--a), var(--c3), var(--c2));
    transform: translate(-50%, -50%) rotate(60deg);
    }

    .color-3 {
    color: var(--c3);
    background: linear-gradient(var(--a), var(--c4), var(--c3));
    transform: translate(-50%, -50%) rotate(120deg);
    }

    .color-4 {
    color: var(--c4);
    background: linear-gradient(var(--a), var(--c5), var(--c4));
    transform: translate(-50%, -50%) rotate(180deg);
    }

    .color-5 {
    color: var(--c5);
    background: linear-gradient(var(--a), var(--c6), var(--c5));
    transform: translate(-50%, -50%) rotate(240deg);
    }

    .color-6 {
    color: var(--c6);
    background: linear-gradient(var(--a), var(--c1), var(--c6));
    transform: translate(-50%, -50%) rotate(300deg);
    }

    @keyframes roll {
    100% {transform: translate(-50%, -50%) rotate(360deg);}
    }

    div {
    border-radius: 1em .1em .3em .05em;
    background: currentColor;
    width: 1em;
    height: 1em;
    mix-blend-mode: multiply;
    position: absolute;
    left: var(--d);
    top: var(--d);
    transform: translate(-50%, -50%);
    will-change: transform;
    transform-origin: 0% 100%;
    animation: roll 5s infinite alternate ease-in-out;
    box-shadow: 0 0 0 .05em #fff;
    }

    html,
    body {
    height: 100%
    }

    body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30vmin;
    background: linear-gradient(#242427, #111);
    }

    main {
    left: 0;
    top: 0;
    width: 1em;
    height: 1em;
    transform: translate(100%, 0%);
    position: relative;
    }
    main span {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 1em;
    top: 60%;
    left: -40%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 .1em #333;
    mix-blend-mode: screen;
    }