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

In celebration of cross-site copy/paste! - Pre-built elements and interactions for use on new projects. Film 4 style page transitions. Thanks for looking! :-)

Artefact

Ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.

- Easily modify the SVG colors in each page' custom code panel (header).
- Easily create a transition for your menu links (I've just defaulted to opacity).
- Demo 6 demonstrates how to prevent multiple clicks (getting menu out of sync), using a simple Webflow interaction.
- Demo 7 demonstrates how to use the effect as a page transition.

Code modified from its original form to integrate seamlessly with Webflow. 

Original Code By Yoichi Kobayashi (http://www.tplh.net/)

Shape Overlays Menu

Website for a fresh srtatup based in Belgium. They make innovative Solar Home Systems for rural households in Sub-Saharan Africa.

Solarly - Be smart, be solar.

Solarly - Be Smart, Be Solar.

Watch the tutorial for this map at https://www.youtube.com/watch?v=Iz_6IBfCtBQ

SVG Map

Exploring some experimental circular SVG text effects for an intro animation. Inspired by Mary Lou in CodeDrop's Playground.

Three demos with hover-in, hover-out and click/tap interactions. Also, links to CodeDrop project and an Illustrator file I used to create the SVG text. Clone it today and feel free to use for all projects.

circular text effect

circular-svg-effect

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

This demo showcases an animated SVG/Lottie menu that comes in from the right to the left. The animation path was created in Adobe Illustrator and then animated in Adobe After Effects. Afterward it was brought into Webflow and the animation was triggered alongside a menu opening. Animations were also added to the open and close buttons as well as to the menu items in the menu.

WebDev for You - Interaction #141

WebDev For You - Interaction #141

Inspired by Nasa's amazing Visions of the Future poster series... Made with Interactions 2 and 3D Transforms. Thanks for looking! :-)

Cloud 9 Observatory

Interactiv Svg Morph

Interactiv Svg morph + Blotter text

Matter.js project that uses responsive SVG bodies. Tutorial available on YouTube: https://youtu.be/hZkah1Y85Oc

Matter.js with SVG Bodies

Matter JS with SVG Bodies

Testing out the aftereffects/lottie pipeline for webflow! The entire animation is one aftereffects sequence rendered as JSON using the bodymovin plugin.  Im using a scroll-driven interaction timeline in webflow to scrub through the svg animation and toggle the text on/off for each section as the user scrolls through the page

lottie svg test

simple SVG sequence on scroll

Site code and tutorial from https://tympanus.net/codrops/2022/06/08/how-to-animate-svg-shapes-on-scroll/

Animate SVG Shapes on Scroll

Wavy button on hover

You can now change the colour of text on an SVG overlay

Steps
1. Take a div block and add a background colour.
2. Add SVG to the div block as a background image.
3. Add Text element in the div
4. Apply the same colour to text as div block's
5. Copy and paste the CSS code and change the class in code to the text's class.
6. click the publish button

Boom code applied. ENJOY!

Mix Blend Mode

Memberstack

NOTE: Codeless Login is now MemberStack. http://memberstack.io/

We're building codeless user accounts for Webflow! 

Click the "Request Early Access" button to be notified when it's ready.

Webflow has officially started their version, but we want to create a simple prototype you can use in the meantime. What that looks like, depends on the response we get from you, & how quickly Webflow finishes the official release. 

If you want :
 - users to sign up on your websites with a username & password
 - enable/disable access to content/pages for different user types.

Please like, clone, and (most importantly) click the "Request Early Access" button to be notified when it's ready. 

(P.S. You have to open the live site to submit the form)

Codeless Login Animation

Codeless Login | User Accounts for Webflow Projects

Hi everyone !

Excited to present my latest web project "A Tiny Adventure".
An ordinary story of "Gus", who must go home.

Feel free to like the project if you enjoyed the story!

A tiny adventure

A Tiny Adventure

I was inspired by this design and took the challenge to create an interactive site with it.

Feel free to clone it... :)

Discover svg websites built by the Webflow community

Discover svg websites built by the Webflow community