SVG <feTile> Filter

Last Updated:

What is <feTile> Filter?

The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image.

Note: The effect is similar to the one of a <pattern>.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="point" x="0" y="0" width="100%" height="100%"> <feTile in="SourceGraphic" x="50" y="50" width="100" height="100" /> <feTile/> </filter> </defs> <image xlink:href="car-left.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#point);"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
in Specifies the input for the given filter primitive.

Share this Page

Meet the Author