jQuery SVG Tutorial Plugin & Tutorials with Example

Notification Styles Inspiration with CSS3 & JavaScript

Notification Styles Inspiration with CSS3 & JavaScript

Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects.Some of them are preceded by a dummy loading animation, which could be a nice idea for specific actions that require some time in a system (i.e. saving, sending a message, etc.).

Clipping in CSS and SVG

Clipping in CSS and SVG

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to “clip” elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started.

StatMapSVG : Statistical Map SVG & jQuery

StatMapSVG : Statistical Map SVG & jQuery

StatMapSVG is a jQuery plugin to display statistical data in the form of a map such as the number of people in each area, the location and distribution of data, grouping data based on the value of a specified interval, and others. StatMapSVG takes map files in SVG format and makes them interactive. You can use StatMapSVG for country maps, province maps, city maps, floor plans and others.

SVGMagic : jQuery SVG fallback Plugin

SVGMagic : jQuery SVG fallback Plugin

This ease-to-use jQuery plugin will create a fallback for .SVG images on your website. When the plugin notices that the visitors browser doesn’t support .SVG images it will replace those images with new .PNG images. Those .PNG images are created on the run using a serverside script. When the visitors browser does support .SVG images it will just go back to sleep.

A big advantage of SVGMagic is that you don’t have to create multiple versions of your images. You can just focus on the .SVG images and let SVGMagic do the rest.

Trigons – Create and Animate Abstract SVG Images

Trigons - Create and Animate Abstract SVG Images

Trigons is a flexible JS script which lets you create modern and stylish abstract SVG images with optional animations

Trigons script is coded as plugin for d3.js library (d3js.org) and it uses d3’s build-in method of Delaunay triangulation for creating colored and animated abstract images. No jQuery needed.

Features:

  • The exclusive feature of Trigons images, that they can be animated with 30 built-in effects.
  • Created Trigons SVG images can be responsive.
  • Retina perfect
  • Flexible and powerful settings
  • Works in all modern browsers
  • Any color, any size
  • Clean bright or flat colors or gradients
  • Build-in Color Palette Generator
  • Convert to PNG
  • Use it as “background-image”
  • Dynamic add, update, animate and convert with 7 JavaScript methods
  • Click, Hover and “Viewport” events
  • Separate “In” and “Out” Animations
  • “Force” Animation Methods
  • Use it via JavaScript and/or via HTML5 data attributes

Inspiration for Inline Anchor Styles with CSS3 & SVG

Inspiration for Inline Anchor Styles with CSS3 & SVG

Some inspiration for creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs.

Flat Surface Shader with JavaScript & SVG

Flat Surface Shader with JavaScript & SVG

Flat Surface Shader for rendering lit triangles to a number of contexts written in JavaScript  including WebGL, Canvas 2D and SVG.

Arrow Navigation Styles with CSS & SVG

Arrow Navigation Styles with CSS & SVG

Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

JS Print Designer

JS Print Designer

This is an online solution for Selling Print Products with customized Motives and Texts. This already includsTemplates for Business Cards, Stamps and Flyers and any new Template can be added.

Features:

  • Design for OneSide & TwoSides Business Cards
  • Design for Stamps in Circle & Square form
  • Unlimited Normal & Curve Text on each Design-Side
  • Add Unlimited motives on each Design-Side [Support SVG Format]
  • Upload unlimited motives on each Design-Side [Support SVG Format]
  • Convert Text to QR-Code on Designs
  • Using Google Fonts as Custome List via XML or Complete via jQuery fontselect
  • Save and Load the Design with a Design-Code without using a Database
  • Print the Design
  • Share the Design on Facebook

Trianglify : JavaScript Poly style Background Generator

Trianglify : JavaScript Poly style Background Generator

Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.



Best jQuery websites design awards