CSS Shape Generator

July 17th 2013 by Samuel Rossille

css-shape-generatorDraw pure HTML / CSS drawings from basic shapes: introducing CSS Shape Generator...

Demo here if you don't like to read.

A drawing is often better that a long speech, so here are a couple of pure CSS / HTML drawings:

Interesting features

Everything in the URL: All the data is stored in the URL, so each possible drawing is associated to an URL. This features allows you to.

As an example of this feature, the drawing above are links, so you can click them to see how they look in the editor and edit them.

The editor supports: color selection, drag & drop interface, send to back, bring to front.

HTML of HTML + CSS generation: As you draw, the output is updated, and you can copy paste either standalone HTML with inline style, or HTML + CSS, depending on the situation.


Please visit the demo here: Happy drawing

Disclaimer: this is a beta. Depending on the feedback I will improve it. Also, please use a recent browser.