user profile image

Attempt to re-create CJ Gammon’s portfolio grid hover effect using SVG clip-path and CSS Transitions.


  1. looks really nice, that scaling as you touch or leave the tiles is a nifty touch.

  2. Nice job! CJ Gammon's portfolio is really cool too. Thanks for sharing

  3. something wrong in Firefox:

    scale(0) doesn't work on circle in defs.

  4. Cool effect :-) Brilliant !

  5. I love this thing: may steal it for something soon. @Rplus Tried to make this work also in Firefox with javaScript, animating the circle's r attribute which (kind of) works using setInterval, but it is fast nor smooth in Firefox. There just has to be a better way though, either with requestAnimationFrame and/or one of those SVG animation libraries like Snap or GSAP (lazy web request).

  6. This is amazing! Super dope! Well done man.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.