Get Started with css-doodle - Startup File

Get Started with css-doodle - Startup File
In this tutorial, we will create a basic css-doodle file that we can use as a startup file for any css-doodle project. As we work through the code, we will discuss what it does. To see the completed css-doodle startup file, use the link below.

CSS-Doodle - Startup File

css-doodle is a web component for drawing patterns with CSS written by Yuan Chuan. That's a fancy way of saying you can use the easy to learn CSS and HTML code to create beautiful surface patterns for product design. For demonstration purposes, I will be coding the patterns in the online p5.js Editor. But all you need is any web browser and a text or code editor. My favorite code editor is Coda 2 by Panic Inc. There is also a free, open source code editor called Brackets.

Code the HTML File
In your text or code editor, type in the code from the window above.

  1. Open your code or text editor and then click File - New, to start a new file.
  2. Type the code from the window above on to the blank page.
Most of this code is about setting up a web page to display in a web browser window. But there are a couple of lines of code that make this a startup file for a css-doodle project.

<!-- call css-doodle.min.js -->
<script src=""></script>

The magic is created from a special JavaScript library file that is stored on the web. All we need to do in order to use this file is to call this file using a <script> tag in our HTML. This script tag tells the web browser to go to the given url to read the JavaScript file.

<!-- css doodle tag and selector -->
:doodle {

The opening <css-doodle> and closing </css-doodle> tags designate a special area where we will put all of our css-doodle code. Inside these tags is the :doodle {} selector. All code inside the opening { and closing } of the :doodle{} selector will control the entire pattern, such as the size of the grid or canvas. The code that follows the closing } but still before the closing </css-doodle> tag controls what is drawn inside each cell of the grid. Everything happens inside these opening <css-doodle> and closing </css-doodle> tags.

That's it for now. Name this file css-doodle-startup.html and save the start up file in a safe place, as we will be using it a lot in the next tutorials.

Creating Code Art in css-doodle - Tutorial Series Index


Coda by Panic Inc.


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