From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
So I have been playing with distortion effects using SVG filters recently and wanted to now try and apply these to a custom cursor. Imagine animating a circular custom cursor with those distortions when hovering over links (or any other element). Here are four demos that explore this idea.
The effects are done by applying SVG filters to a custom cursor element which is an SVG. Besides animating the cursor itself (scaling it up), the SVG filter is animated when hovering over anchors (or any other element you’d like this to interact with).
If you are interested in more of these kind of effects, have a look some previous related experiments:
- Ideas for Distorted Link Effects on Menus
- Distorted Link Effects with SVG Filters
- Image Distortion Effects with SVG Filters
- Distorted Button Effects with SVG Filters
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
I really hope you enjoy these and can make use of them! As always, feel free to use the designs in your projects.
Show me what you come up with and ping me @codrops!
Credits
- Images from Unsplash
- Messapia font by Luca Marsano from Collletttivo.it
