All posts in SVG Tutorial

Text Styles and Hover Effects with CSS3 & SVG

Text Styles and Hover Effects with CSS3 & SVG

A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

Wheelnav.js : Animated Circular navigation with SVG

Wheelnav.js : Animated Circular navigation with SVG

Animated javascript navigation component based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.It works on all major desktop and mobile browser.

Possible uses:

  • tab navigation
  • pie menu (radial menu, circular menu)
  • sub menu
  • option button
  • checkboxes
  • and more…

Interactive Drag and Drop Coloring Concept

Interactive Drag and Drop Coloring Concept

Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to add some fun to this idea and make it enjoyable to use.

SVG Connectable.js : JavaScript library for connecting SVG

SVG Connectable.js : JavaScript library for connecting SVG

A JavaScript library for connecting SVG things.

Animatrix Creative – Drawing SVG Animations Plugin

Animatrix Creative - Drawing SVG Animations Plugin

Animatrix Creative allows you to draw and animate SVG images.Professional SVG Image WYSIWYG Editor is included in this plugin, and can be accessed from the admin area. You can draw with the default Pencil tool or create shapes out of the rich Shapes library.

All SVG images are animated on the front-side, by mimicking the drawing process. You can also export and save the SVG image as well.

Gooey Menu : Cool gooey effects Menu with jQuery & SVG

Gooey Menu: Cool gooey effects Menu with jQuery & SVG

jQuery Menu Plugin With Cool Gooey Effects

  • Cool gooey effects using SVG filters
  • Six menu styles (spaced/stacked round, horizontal, vertical menus)
  • 15+ easily customizable options
  • Easy to use event API
  • Fully responsive layout
  • Support of all modern browsers

Textures.js : JavaScript library for creating SVG patterns

Textures.js : JavaScript library for creating SVG patterns

Textures.js is a Javascript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization.

SVG Pan-Zoom.js : JavaScript Panning & Zooming SVG Things

SVG Pan-Zoom.js : JavaScript Panning & Zooming SVG Things

A JavaScript library for panning and zooming SVG things.

VexFlow : JavaScript library for Rendering Music Notation

VexFlow : JavaScript library for Rendering Music Notation

VexFlow is an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG, and runs on all modern browsers.

Nice Looking Contact Form with CSS & jQuery

Nice Looking Contact Form with CSS & jQuery

A simple and easy to customize contact form. A minimal and customizable snippet to throw a semantic form into your web projects on the fly.



Best jQuery websites design awards