css doodle art

css-doodle-art.markdown

css doodle art

A Pen by yuanchuan on CodePen.

License.

index.html

<main>

  <css-doodle grid="1x100" #1>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * -182deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: bean;
    }

    filter: drop-shadow(-1px 0 0 hsla(
      calc(@index() * 1.5 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x100" #2>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 181deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: clover 4;
    }

    filter: drop-shadow(-1px 0 0 hsla(
      calc(@index() * 1.5 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x50" #3>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 2%);
    transform: rotate(calc(@index() * 181deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: bud 10;
    }

    filter: drop-shadow(-2px 0 0 hsla(
      calc(@index() * 3 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x100" #4>
    @place-cell: center;
    @size: calc(100% - @calc(@index() -1) * 1%);
    transform: rotate(calc(@index() * -10deg));
    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: infinity;
    }

    --sw: 1px;
    --sc: hsla(
      calc(@index() * 2 - 50), 70%, 65%,
      calc(@index() / 100)
    );

    filter:
      drop-shadow(0 var(--sw) 0 var(--sc))
      drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
      drop-shadow(var(--sw) 0 0 var(--sc))
      drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
  </css-doodle>

  <css-doodle grid="1x100" #5>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 10deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: bud 10;
    }

    filter: drop-shadow(-1px 0 0 hsla(
      calc(@index() * 2 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x100" #6>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 10deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: bean;
    }

    filter: drop-shadow(-1px 0 0 hsla(
      calc(@index() * 2 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x100" #7>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * -20deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: star;
    }

    filter: drop-shadow(-1px 1px 0 hsla(
      calc(@index() * 1.5 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x100" #8>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * -24deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: clover 5;
    }

    filter: drop-shadow(-1px 0 0 hsla(
      calc(@index() * 1.5 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x100" #9>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 260deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: hypocycloid 6;
    }

    filter: drop-shadow(0 -1px 0 hsla(
      calc(@index() * 1.5 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x100" #10>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 45deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: bean;
    }

    filter: drop-shadow(-1px 0 0 hsla(
      calc(@index() * 2 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <css-doodle grid="1x25" #11>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 4%);
    transform: rotate(calc(@index() * -60deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: clover 4;
    }

    --sw: 1px;
    --sc: hsla(
      calc(@index() * 8 - 50), 70%, 65%,
      calc(@index() / 25)
    );

    filter:
      drop-shadow(0 var(--sw) 0 var(--sc))
      drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
      drop-shadow(var(--sw) 0 0 var(--sc))
      drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
  </css-doodle>

  <css-doodle grid="1x50" #12>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 2%);
    transform: rotate(calc(@index() * 189deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: clover 5;
    }

    --sw: 1px;
    --sc: hsla(
      calc(@index() * 3 - 50), 70%, 65%,
      calc(@index() / 50)
    );

    @even {
      filter:
        drop-shadow(0 var(--sw) 0 var(--sc))
        drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
        drop-shadow(var(--sw) 0 0 var(--sc))
        drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
    }
  </css-doodle>

  <css-doodle grid="1x50" #13>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 2%);
    transform: rotate(calc(@index() * 1 * 189deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: star;
    }

    --sw: 1px;
    --sc: hsla(
      calc(@index() * 4 - 50), 70%, 65%,
      calc(@index() / 50)
    );

    filter:
      drop-shadow(0 var(--sw) 0 var(--sc))
      drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
      drop-shadow(var(--sw) 0 0 var(--sc))
      drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
  </css-doodle>

  <css-doodle grid="1x100" #14>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * -270deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: star;
    }

    --sw: 1px;
    --sc: hsla(
      calc(@index() * 2 - 50), 70%, 65%,
      calc(@index() / 50)
    );

    filter:
      drop-shadow(var(--sw) 0 0 var(--sc))
      drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
  </css-doodle>

  <css-doodle grid="1x20" #15>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 5%);
    transform: rotate(calc(@index() * 70deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: hypocycloid 10;
    }

    --sw: 1px;
    --sc: hsla(
      calc(@index() * 10 - 50), 70%, 65%,
      calc(@index() / 10)
    );

    filter:
      drop-shadow(0 var(--sw) 0 var(--sc))
      drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
      drop-shadow(var(--sw) 0 0 var(--sc))
      drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
  </css-doodle>

  <css-doodle grid="1x100" #16>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * -298deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: infinity;
    }

    @odd {
      filter: drop-shadow(-2px 0 0 hsla(
        calc(@index() * 2 - 50), 70%, 65%,
        calc(@index() / 50)
      ));
    }
  </css-doodle>

  <css-doodle grid="1x50" #17>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 2%);
    transform: rotate(calc(@index() * -123deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: alien 1 1 2;
    }

    --sw: 1px;
    --sc: hsla(
      calc(@index() * 4 - 50), 70%, 65%,
      calc(@index() / 25)
    );

    filter:
      drop-shadow(var(--sw) 0 0 var(--sc))
      drop-shadow(calc(-.5 * var(--sw)) 0 0 var(--sc));
  </css-doodle>

  <css-doodle grid="1x100" #18>
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * -269deg));

    :after {
      content: '';
      background: var(--doodle-bg);
      @size: 100%;
      @shape: alien 4 1 2;
    }

    filter: drop-shadow(-2px 0 0 hsla(
      calc(@index() * 1.5 - 50), 70%, 65%,
      calc(@index() / 50)
    ));
  </css-doodle>

  <p>
    CSS Art with
    <a target="_blank" href="http://yuanchuan.name/css-doodle/">
      &lt;css-doodle /&gt;
    </a>
  </p>

</main>

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/52982/css-doodle.v0.2.1.min.js"></script>

style.css

:root {
  --body-bg: #0a0c27;
  --doodle-bg: #190B32;
  --col: 6;
  --gap: 2px;
  --width: 95vw;
  --size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--body-bg);
}

body {
  display: flex;
  align-items: center;
}

main {
  display: grid;
  width: var(--width);
  margin: auto;
  background: var(--body-bg); 
  padding: calc(50vw - var(--width) / 2) 0;
  grid-template-columns: repeat(var(--col), 1fr);
  grid-gap: var(--gap);
  position: relative;
  padding-bottom: 5em;
}

p {
  position: absolute;
  bottom: 2em;
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: cursive;
  font-size: .9em;
  line-height: 1;
  color: rgba(74, 78, 113, .5);
}
p a {
  text-decoration: none;
  color: rgba(128, 53, 101, .8);
  background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;
  background-size: 2px 1px;
}
p a:hover {
  color: rgba(128, 53, 101, 1);
}

css-doodle {
  overflow: hidden;
  width: var(--size);
  height: var(--size);
  background: var(--doodle-bg);
}

@media screen and (max-width: 80em) {
  :root { --col: 3; }
}

@media screen and (max-width: 47.5em) {
  :root { --col: 2; }
}

@media screen and (max-width: 25em) {
  :root { --col: 1; }
}