Home/ Questions/Q 6739571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:30:17+00:00

In a design that I’m working on, there is a recurring image background shape

  • 0

In a design that I’m working on, there is a recurring image background shape that appears several times in different sizes throughout the site. For example, one page uses it as a huge background images, where the top and bottom part of this image is cut off by the browser edges.

It’s not an easy pattern to create with canvas, but as far as I know it’s possible. Here’s what it looks like.

enter image description here

Am I better off making several images of this same pattern or is this background image easy to recreate through canvas? If it is appropriate for canvas, how do I go about recreating it in the various sizes? I wish I knew how to begin something like this using canvas but it’s above my skillset.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve converted your shape to an SVG shape here: https://gist.github.com/1321653 — use it as you’d like.

    According to caniuse.com, SVG is supported on all common browsers except for IE8 and earlier.

    For IE8 and earlier you might be able to combine canvg, a SVG-to-canvas library, with explorercanvas, a canvas emulator for IE8 and earlier. Or you could display a rectangle with a background color — IE users might not miss the splat.

    Edit: You could also get creative with CSS3 background gradients, ala http://www.ecsspert.com/ (famous logos created with only CSS), but compatibility is low across browsers.

    • 0