Posts Tagged ‘SVG’

Page Loading Effects

Web Design, Web Development | Posted by Keefr April 25th, 2014

So much of the links I share on here end up being things to file away for the appropriate time and place — and even then, to use sparingly.

This one definitely applies, but it’s worth taking a look at and seeing some of the transitions tympanus.net came up with using SVG animations with Snap.svg — which was new to me as well.

Page Loading Effects

Creating a Border Animation Effect with SVG & CSS

CSS, JavaScript | Posted by Keefr March 6th, 2014

This is one of those demos/tutorials that are cool looking and great if utilized sparingly and in the right places. Basically the tutorial leans on SVG and CSS, but it could be done other ways (JavaScript and semantically meaningless containers)

Creating a Border Animation Effect with SVG & CSS

Fullscreen Overlay Effects

CSS, JavaScript, Web Design, Web Development | Posted by Keefr March 4th, 2014

Great demo and tutorial on how to add some nice effects for those overlays and/or off-canvas implementations. A couple of the examples utilize SVG and JavaScript to get them working.

Fullscreen Overlay Effects

SVG Patterns Gallery

Browsers, Web Design, Web Development | Posted by Keefr April 2nd, 2013

I don’t get why SVG has never fully taken off — obviously the browsers were at least partially to blame at some point in the past, but beyond that, seems like a no-brainer in many visual web dev situations.

Regardless, here’s a nice gallery of patterns done with SVG:

SVG Patterns Gallery

Hat tip: CSS-Tricks.com

Adding Scalable Vector Graphics (SVG) In Unsupported Browsers

Web Design | Posted by Keefr December 14th, 2012

SVG just has never taken off like you would have thought. I mean on the surface, especially with mobile taking a front seat lately, you’d think people would want to save bandwidth in an obvious place: graphics. I’m not really sure what’s been the real impediment. The article below takes “unsupported browser” as an excuse.

Adding Scalable Vector Graphics (SVG) In Unsupported Browser