transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1) @rand(800ms); transform: scaleX(@rand(1, 4, .1)); background-color: hsla( @rand(120, 180, 10), 70%, 61.8%, @rand(.2, .8) ); clip-path: polygon(0 0, 100% 0, @rand(40%, 60%) @rand(30%, 100%));

< css-doodle />

A web component for drawing patterns with css.

Introduction

css-doodle is based on Shadow DOM v1 and Custom Elements v1. Right now you can use it on latest Chrome and Safari without polyfills.

The component simply generates a grid of divs painted by its own content. Sometimes even the simpliest rule will compose out a beautiful result. Check out this collection I built with those grids: CSS Shapes Patterns.

One great thing about web components is that it's just like other HTML elements,which can be easily styled or controlled using CSS, or manipulated dynamically by javascript with familiar DOM APIs.

Getting Started

Download css-doodle.js and put it into your web page.

You can also install from npm and import the module in javascript:

:doodle { size: 100vmax; background: #2a2e31; overflow: hidden; } transition: .2s ease @rand(500ms); border-radius: 24%; border: 1px solid hsla( calc(36 * @index()), 80%, 80%, .7 ); transform: rotate(@pick(60deg, -60deg)) scale(1.2);

Usage

The syntax of css-doodle is no different from CSS, except for convenience sake, it provided several extra utility functions.

Grid

The size of the grid is defined by the "grid" attribute on the element, range from 1 to 16. If no size or 0 is given, the size is set to 1x1.

:doodle { size: 7em; } background: rebeccapurple; border: 1px solid #fff;

The following formats of size are recognizable:

  • grid = "0"
  • grid = "5"
  • grid = "20"
  • grid = "5x7"
  • grid = "5 x 7"
  • grid = "5,7"
  • grid = "5,7"

Selectors

:doodle

The :doodle or :host is a special selector indicates to the component element itself. The styles can be over-written by your normal css files outside. (try to hover on the doodle)

:doodle { size: 7em; transition: .2s ease; } :doodle(:hover) { transform: scale(.9); } background: rebeccapurple; border: 1px solid #fff;

@even

Select cells like :nth-child(even) but shorter.

:doodle { size: 7em; } @even { background: rebeccapurple; :after { content: '@index()'; font-size: .7em; color: #fff; } }

@odd

Select cells like :nth-child(odd).

:doodle { size: 7em; } @odd { background: rebeccapurple; :after { content: '@index()'; font-size: .7em; color: #fff; } }

@nth(n)

Select the nth cell like :nth-child(n).

:doodle { size: 7em; } background: #f5f5f5; border: 1px solid #fff; @nth(9) { background: rebeccapurple; :after { content: '@index()'; font-size: .7em; color: #fff; } }

@at(x, y)

Select by coordinate.

:doodle { size: 7em; } background: #f5f5f5; border: 1px solid #fff; @at(4, 2) { background: rebeccapurple; :after { content: '@row(), @col()'; font-size: .5em; color: #fff; } }

@row(n)

Select the nth row of the grid.

:doodle { size: 7em; } background: #f5f5f5; border: 1px solid #fff; @row(3) { background: rebeccapurple; :after { content: '@row()'; font-size: .7em; color: #fff; } }

The odd and even is supported.

:doodle { size: 7em; } background: #f5f5f5; border: 1px solid #fff; @row(even) { background: rebeccapurple; :after { content: '@row()'; font-size: .7em; color: #fff; } } @row(even) { :after { content: '@row()'; font-size: .7em; color: #fff; } }

@col(n)

Select the nth column of the grid.

:doodle { size: 7em; } background: #f5f5f5; border: 1px solid #fff; @col(3) { background: rebeccapurple; :after { content: '@col()'; font-size: .7em; color: #fff; } }

You can use odd and even too.

:doodle { size: 7em; } background: #f5f5f5; border: 1px solid #fff; @col(odd) { background: rebeccapurple; :after { content: '@col()'; font-size: .7em; color: #fff; } }

Functions

@index()

Returns the current index value of the cell.

:doodle { size: 7em; } background: rebeccapurple; border: 1px solid #fff; :after { content: '@index()'; color: #fff; font-size: .7em; }

@row()

Returns the current row number of the cell.

:doodle { size: 7em; } background: rebeccapurple; border: 1px solid #fff; :after { content: '@row()'; color: #fff; font-size: .7em; }

@col()

Returns the current column number of the cell.

:doodle { size: 7em; } background: rebeccapurple; border: 1px solid #fff; :after { content: '@col()'; color: #fff; font-size: .7em; }

These numbers can be used to generate dynamic values together with calc().

:doodle { size: 7em; } border: 1px solid #fff; background: hsla( calc(180 + @row() * @col() * 5), 80%, 80%, 1 );

@pick(v1, v2,...)

Randomly pick a value from the given list.
(try to click on the doodle)

:doodle { size: 7em; } :after { content: '@pick(+, *, ., -)'; color: rebeccapurple; }

Alias: @any

@rand(start [,stop] [,step])

Returns a random value from the range of numbers.
(try to click the doodle)

:doodle { width: 7em; height: 7em; } background: rgba(102, 51, 153, @rand(.9)); transition: .2s ease @rand(200ms); will-change: transform; transform: rotate(@rand(360deg)); clip-path: polygon( @rand(100%) 0, 100% @rand(100%), 0 @rand(100%) );

@shape(name [,v1, v2,...])

Return a css shape based on polygon()
(try to click the doodle)

:doodle { size: 7em; } transition: .2s ease @rand(200ms); transform: rotate(@rand(-30deg, 30deg)); will-change: transform; background: rgba(102, 51, 153, @rand(.3, .9)); clip-path: @shape( bud, @rand(3, 10) );

All shapes
width: .8em; height: .8em; background: hsla(calc(360 / 60 * @index()), 80%, 80%, .4); clip-path: polygon( 50% 0, 100% 100%, 0 100%); transform: rotate(@rand(360deg)) scale(@rand(.6, 1, .1)) translate( @rand(-10em, 10em), @rand(-10em, 10em) )