Implementing a square-based ornament in CSS3


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:

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


Look at those examples 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

Solution courtesy of: szym


There is currently no discussion for this recipe.

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