SVG Quick Tip: break images in a <pattern>

[PointC]

Another quick SVG tip — break images in the <pattern> element.

 

Drop an image (or images) into the <pattern> element and use that to fill any group of paths or primitive shapes. This allows you to break that image into any number of pieces you like. I used 64 pieces in this jigsaw puzzle example so it pushes the browser a bit, but shows what's possible.

 

See the Pen PLMmQe by PointC (@PointC) on CodePen

 

You can drop anything into that <pattern> element and make this work. It could be images, primitive shapes or even dynamic SVG text. I wrote about text in a <pattern> here:

Happy tweening.

 

[GreenSock]

Nice work, @PointC! Thanks for sharing the tip.