Animated Custom Cursor Effects

Some ideas for interactive custom cursor animations using SVG filters.

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

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:

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!


Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.