SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML canvas. The <pattern> element is used to fill shapes with patterns made up of images. It fills the shapes in a tiled fashion.
Syntax:
<pattern> . . . </pattern>
Attributes:
- patternUnits: It defines the co-ordinates of x, y, height and width.
- patternContentUnits: It defines the region of the pattern.
- preserveAspectRatio: It shows an element with a viewBox giving a aspect ratio must fit into a viewport with a different aspect ratio.
- xlink:href: It defines a reference IRI to a resource.
Example 1:
Output:
👁 Image
Example 2:
Output:
👁 Image