SVG <hatch> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. 

The <hatch> SVG element is used to stroke an object. It uses one or more pre-defined paths to fill an object. It repeats the path after a fixed interval in a specified direction to cover the areas to be painted.

Syntax:

<hatch x="" y="" pitch="" rotate="" hatchUnits="" 
hatchContentUnits="" transform="" href="">

Attributes:

• x - It defines the x-axis coordinate in the user coordinate system.
• y - It defines the y-axis coordinate in the user coordinate system.
• rotate - It specifies how the animated element rotates as it travels along a path specified in an <animateMotion> element.
• transform - It defines the list of transform definitions that are applied to an element and the element's children.
• href - It defines the link to a resource as a reference URL.

Example 1:

Output:

Example 2:

Output: