Making Art With CSS Using CSS-Doodle

CSS-Doodle is a great library of tools that help in the creation of beautiful art using CSS. When combined with a little javascript, the art comes to life and even interactive. So let's get started!

CSS-Doodle

Add this script link in the head section of your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.9/css-doodle.min.js"></script>

We will also link to an external stylesheet:

<link rel=”stylesheet” href=”css/main.css” />

In the body section of your HTML at these 3 lines:

<css-doodle>
  @use: var(--art);
</css-doodle>

We also will wrap this code in a div for this example:

<div class="art_1">
  <css-doodle>
    @use: var(--art);
  </css-doodle>
</div>

Save your file and open it in your browser. If you see the code the CDN script is not working. You can go here to get the latest version.

Now in our stylesheet main.css add the style for the div art_1:

.art_1{
  height: 800px;
  width: 120%;
}

Also in the stylesheet add code for the art:

:root {
  --art: (
     :doodle {
        @grid: 8 / 90%;
       } /*closes doodle definition*/
      transition: .2s @r(.6s);
      background: hsla(
        calc(240 - 6 * @row() * @col()),
        70%, 68%, @r(.9)
      ); /*closes background definition*/
 );  /*closes --art definition*/
}  /*closes root definition*/

Save the file and reload the browser. You should see rows of colored boxes,

CSS

To add a interactive element to the image add this in the head section of your HTML:

<script>
document.addEventListener('click', function(e) {
  e.target.update && e.target.update();
});
</script>

Save and reload your browser, now when you click the mouse or tap the image it will change.

Play around with the size of the squares by adjusting the @grid and @size property:

:root {
  --art: (
    :doodle {
        @grid: 16x20;
        @size: 108em 50em;
      } /*closes doodle definition*/
    transition: .2s @r(.6s);
    background: hsla(calc(240 - 6 * @row() * @col()),90%, 58%,    @r(.9)); /*closes background definition*/
   );  /*closes --art definition*/
  }  /*closes root definition*/

We can add a layer by using :after. We are also adding a font-family:

:root {
  --art: (
:doodle {
        @grid: 20 / 100vmax;
        background: #0a0c27;
        font-family:  sans-serif;
      } /*closes doodle definition*/
transition: .2s @r(.6s);
background: hsla(calc(240 - 6 * @row() * @col()),3%, 58%, @r(.9)); /*closes background definition*/
:after {
        content: \@hex(@rand(0x2560, 0x357f));
        color: hsla(@r(40), 90%, 90%, @r(2.9));
        font-size: 7vmax;
      }
);  /*closes --art definition*/
  }  /*closes root definition*/

we can change things some more like this:

:root {
  --art: (
:doodle {
        @grid: 1 / 50vmax;
        background: #fff;
        font-family:  sans-serif;
} /*closes doodle definition*/
@shape: clover 5;
      background: hsla(
        calc(560 - @i() * 4), 50%, 50%
      );
transform: scale(1.4) rotate(-80deg);
       transition: @r(1.5s) ease;
       transform: rotate(@rand(870deg));
);  /*closes --art definition*/
  }  /*closes root definition*/

This will spin when clicked. You can find out more here!