Custom Image

Using CSS on HTML elements

Change size

Have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/background for more options.

On SVG elements

Play with pattern attributes width and height:

Play with pattern attribute viewBox to add padding:

Play with path attribute transform to translate the image, for example placing the image at the center of the viewBox:

Using JS

We are going to apply patters to SVG elements using D3.js. We can repeat what we did in the previous section, here we do the simplest exercise.