Discover the best svg-mask websites created by professional designers. Get inspired and start planning your perfect svg-mask web design today!

Making this utility work on desktop and mobile was no joke...

Basic Details:
- Clean, meaning no janky transitions at each 90 degree angle
- 100% Webflow (no custom code)
- Cross-browser and device compatible

*Since this is using native Webflow interactions (ie no clip-path / masking), it cannot be used on pages with background images (the inner circle will not be transparent)

Also included are custom JS implementations using SVG (including back-to-top functionality, courtesy of Ivan Grozdic)

Scroll Progress Indicator 100% Webflow

100% Webflow IX2 Scroll Utility

Inspired by:
https://github.com/codrops/AnimateSVGTextPath/

(this version is easier and more efficient)

SVG Path text

Svg Path text

Here’s an easy way to mask video in text.
No custom code required!
I’ve created this with a SVG file and added interaction to zoom in when scrolling.

Feel free to clone and use in your project.

--> Follow my profile for cool projects coming soon

Text Mask Video

Text Masked Video Scroll Animation

FRVNCOIS - Hero Text Mask

Interactive text mask

Source:
https://github.com/codrops/ShapeMorphIdeas/

Fluid Svg Background

Anime.js Svg Morph

Slider_

sliderslider

Add awesome SVG animation effects to your Webflow projects!
This widget allows you to animate SVG, to look like it’s drawing itself. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG with your own style.

SVG Animation Cloneable

SVG Animation

easy way to clip a SVG mask : sources @vianneypercq & @davidprioul


Mask image

Clipping Mask

bonivedesign

Bonive Svg Artist

Embed and Change SVG Color without editing on illustrator or other svg editor.

Discover svg mask websites built by the Webflow community

Discover svg mask websites built by the Webflow community