INDEX - Creating Code Art with CSS-Doodle

INDEX - Creating Code Art with CSS-Doodle
CSS-Doodle is a fun way to create code art, i.e. art created on the computer with code. It was created by Yuan Chuan and he released it under the MIT License, so it's free for all of us. There are many code languages that you can use to create code art but CSS-Doodle is very easy to use, because all the work is done in HTML and CSS. So, if you are new to code art and want an easy way to experiment with it, CSS-Doodle is a good choice.

These CSS-Doodle tutorials will use some new terms that have to do with coding but I won't be digging very deeply in to how to code. This is more about teaching you how to use and customize the code examples to create your own patterns or designs. For demonstration purposes, I will be coding in the online p5.js Editor. Use the link below to open a free account.

In these tutorials, we will learn all about CSS-Doodle and create some nice graphics along our journey. We'll start with a basic HTML and CSS webpage, add the CSS-Doodle library and learn the simple custom syntax needed to create CSS patterns. Once you are familiar with the basics, we will move on to more advanced topics such as using Unicode characters and adding JavaScript to CSS-Doodle.

Each tutorial will have a finished CSS-Doodle file that you can compare to your own code. Use these files as a reference, as it is much easier to remember what you have learned if you take the time to type the code in to the code editor yourself, as you follow through the tutorial.

The basic layout for a CSS-Doodle pattern is based on a CSS grid. With this grid and a few special functions, we can have a lot of creative fun. One of the most versatile functions is the @rand function, which allows us to get some truly random results. It's never boring.

INDEX - Creating Code Art with CSS-Doodle

CSS-Doodle Basics

Advanced CSS-Doodle

  • CSS-Doodle Course - Linear Gradient
  • CSS-Doodle Course - Functions
  • CSS-Doodle Course - Unicode Characters

CSS-Doodle Copyright (c) Yuan Chuan. Licensed under the MIT License. CSS-Doodle Documentation.
Screenshots used by permission. Processing (Java), p5.js (JavaScript) and (Python) are software projects created by the Processing Foundation.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2021 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.