Question

CSS3 allows developers to implement simple graphics without using images.

For example this envelope gradient background:

Is there a way to generate a square-based ornament via css3. An example is slavik ornament like this:

I am not asking for an example, just if it can be done by setting a square color and position. Perhaps it is too complicated of an ornament and needs to be provided at least as svg image.

Answer 1

Look at those examples
http://lea.verou.me/css3patterns/
there are some complex ones there.
But be aware that this technique tends to be heavy on the cpu especially in Firefox.

You may also try to generate those using javascript in canvas that is positioned offscreen, capture its content as image and use that image for background. Here is an example how you can implement this
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/