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.

Script includes seven (7) methods for creating and animating SVG images and also for cross browser converting these images to PNG ones or use them as ‘background-image’ for elements in your HTML documents.

Please get familiar with the features and explore Trigons demo site for more info.

Main 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
Free Support and Updates

Requirements:

d3.js lib v5 and up (jQuery is not needed)
Canvg.js if you want to convert to PNG
Reading the documentation

Important Note:

Trigons script is not a slider, it creates and animates abstract SVG images. You can use these images in sliders without their special animations as usual like any other HTML content. But for using build-in animation effects, your slider must have an API which lets you call Trigons methods when your slides are changed. Or you need to change JS code of your slider by yourself to be able to use the Trigons animations methods.

For example, on the demo site in the intro section at the top of the page there is “jquery.superslides.js” with extended functionality to produce the animations you can see.