Best jQuery SVG Tutorial Plugins & Tutorials with Demo

    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.

    JS PHP Product Designer

    JS PHP Product Designer

    This is an online solution for Selling Products with customized Motives and Texts.

    Features:

    • Design for OneSide & TwoSides Products
    • Design for Products with & without Size
    • 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]
    • 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

    How to Build a Page Scroll Progress Indicator With jQuery and SVG

    How to Build a Page Scroll Progress Indicator With jQuery and SVG

    Today we will be looking at a few techniques we can use to show scroll progress for users who are reading a page. This technique is being used on an increasing number of sites, and for good reason; it provides a contextual understanding of investment needed to consume a particular page. As the user scrolls, they are presented with a sense of current progress in different formats.

    Seen.js : Render 3D scenes into SVG or HTML5 Canvas

    Seen.js : Render 3D scenes into SVG or HTML5 Canvas

    seen.js renders 3D scenes into SVG or HTML5 Canvas.

    Page Loading Effects Animation with SVG

    Page Loading Effects Animation with SVG

    A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded.