Elastic SVG Elements

Morphing SVG Shape Effects on Menus and interactive website items

Sooo... it's inspirational Wednesday.  It's raining, it's dreary, I need some motivation and definitely some caffeine!

Caffeine in hand, I started going through some of the inspirational websites I've gathered over the last while but had little time to really read through.  Low and behold, I found this wonderful little nugget from Mary Lou at Codrops about Morphing SVG Shape Effects.

Elastic SVG Menu Animation

While this probably won't work in every browser, it should at least work in the latest most up to date ones and it adds some fun and whimsy to your website. Basically, your taking one SVG shape and morphing it into another to enhance the movement, motion or activity that is happening on screen.  I like that it really enhances the interaction between the site and the user -- but be warned, use it sparingly!  Too much of a cool thing is most likely overwhelming to the user and can most definately become a nusance if not used properly.

Elastic SVG Menu Animation

If you want to see demos of how this works click here and use the menus to check out the options.

If you want to download the code and play with it, click here & HAVE FUN!!

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.