Animated Custom Cursor Effects

Some ideas for interactive custom cursor animations using SVG filters.

By Manoela Ilic in Playground on
Demo Code

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:

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

cursor distortion filter hover svg

Inline Layout Switch Ideas

Superhero Animation Effect with SVG Filters

How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.