INDEX - Creating Code Art in css-doodle

INDEX - Creating Code Art in 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/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 deep in to how to code. This is more about teaching you how to use and customize the code examples to create your own patterns.

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/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.

At the end of each tutorial will be 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

The css-doodle Basics

Advanced css-doodle Patterns

  • CSS Linear Gradient and css-doodle
  • css-doodle Functions
  • css-doodle and Unicode Characters

css-doodle Copyright (c) Yuan Chuan. Licensed under the MIT License. css-doodle Documentation.

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

Content copyright © 2019 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.