How can I create SVG clipping masks?

I want to take a circle that has a blue border and a picture inside, and clip the picture so it fits inside the circle nicely. I’d prefer to use very small files, perhaps cut down in sprites.

Once I have the clipping mask (sort of like Photoshop), I want to add a hover css animation to it.


I have found the answer to my own question.

Here is a tutorial on the subject from It is amazing and that type of styling and graphical work is just what I am talking about. You can do rich hovers and animations that are super light weight.

Here is their example

The technical parts of what is going on are:

  • With SVGs we can add a clipping path to change the shape of our images.

  • It uses the SVG element is used to group SVG shapes together.

More references:

Source : Link , Question Author : Christian Matthew , Answer Author : Yisela

Leave a Comment