Implementing a square-based ornament in CSS3

Problem

CSS3 allows developers to implement simple graphics without using images.

For example this envelope gradient background:

envelope

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

ukraininan ornament

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.

Problem courtesy of: Maxim V. Pavlov

Solution

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/

Solution courtesy of: szym

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.