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; margin: .5px;

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; margin: .5px;

@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; margin: .5px; @nth(9) { background: rebeccapurple; :after { content: '@index()'; font-size: .7em; color: #fff; } }

@at(x, y)

Select by coordinate.

:doodle { size: 7em; } background: #f5f5f5; margin: .5px; @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; margin: .5px; @row(3) { background: rebeccapurple; :after { content: '@row()'; font-size: .7em; color: #fff; } }

The odd and even is supported.

:doodle { size: 7em; } background: #f5f5f5; margin: .5px; @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; margin: .5px; @col(3) { background: rebeccapurple; :after { content: '@col()'; font-size: .7em; color: #fff; } }

You can use odd and even too.

:doodle { size: 7em; } background: #f5f5f5; margin: .5px; @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; margin: .5px; :after { content: '@index()'; color: #fff; font-size: .7em; }

@row()

Returns the current row number of the cell.

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

@col()

Returns the current column number of the cell.

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

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

:doodle { size: 7em; } margin: .5px; 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) )