Tag

svg

Browsing

This is a couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas. It’s been created by Codrops. When it comes to tiny animations and effects on text, be it a link, a typographic logo or an introductory sentence, there’s really no limit to the creative possibilities. So here is a couple of text styles and hover effects to get your creative juices flowing.…

A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components by Codrops.This tutorial shows how to use SVG Filters to apply a gooey-like effect to HTML elements. You can see creative use cases for common website elements, like menus, apps, selections, paginations and more. Please note that this effect is experimental and is only supported by modern browsers.    

This is a tutorial for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it. Please note that this is highly experimental and the demos were only tested in…

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions. Add Script Simply add the svg-morpheus.js script to your website/application. No other scripts are needed. Both the minified and uncompressed (for development) versions are in the /compile folder. Usage – Add an icon set SVG to the HTML file where you want to show the morphing icon. – Create a SVG Morpheus instance for the icon…

A new set of 22 social icons. Those social icons are a must to replace image based icons and are very versatile in their use.This icon font uses the Private Use Area of Unicode so that it will not trip up screen readers with weird symbols. You can import this icon font with a .json file into IcoMoon App font generator to mix and match with other fonts or select only the icons you need…