Trigons - Create and Animate Abstract SVG Images

Trigons is a flexible JavaScript plugin that lets you create modern, stylish abstract SVG graphics with optional animation.

Trigons is built as a plugin for the d3.js library (d3js.org) and uses d3’s built-in Delaunay triangulation to create colorful, animated abstract images. No jQuery required.

It exposes seven methods to create and animate SVG graphics, export them to PNG (cross-browser), or use them as a CSS ‘background-image’ in your HTML.

Review the feature list below and visit the Trigons demo site for more detail.

Main features:

• A signature feature of Trigons is that graphics can be animated with 30 built-in effects.
• Trigons SVG output can be responsive.
• Sharp on Retina and high-DPI displays
• Flexible, powerful settings
• Works in all modern browsers
• Any colors, any size
• Solid, bright, or flat colors, or gradients
• Built-in color palette generator
• Export to PNG
• Use as a CSS “background-image”
• Dynamically add, update, animate, and convert via seven JavaScript methods
• Click, hover, and “viewport” events
• Separate “In” and “Out” animations
• “Force” animation methods
• JavaScript and/or HTML5 data attributes
• Free support and updates

Requirements:

• d3.js v7 or newer
• Canvg.js (and dependencies) if you need PNG export
• Reading the documentation

Important note:

Trigons is not a slider — it renders and animates abstract SVG graphics. You can place the output in any slider as plain HTML without Trigons’ own animation. To use the built-in animation effects inside a slider, you need a slider API that lets you call Trigons methods when slides change, or you must extend the slider’s JavaScript yourself.

On the demo site, the intro uses “jquery.superslides.js” with extra hooks to drive the animations you see.

License:

Each web project requires its own Regular or Extended license for Trigons.

Change log:

ver 1.4
-- Updated d3.js to the latest release (v7)
-- Compatibility updates for d3.js v7
-- Added “3d” colorMode

ver 1.3.1
-- Fix for “gradient” colorMode calculation

ver 1.3
-- Updated d3.js to the latest release (5.9.7)
-- Minor code updates per Envato JavaScript requirements

ver 1.2
-- Updated d3.js to the latest release (5.9.2)
-- Code updates per Envato JavaScript requirements

ver 1.1
-- Updated d3.js to the latest release (5.5.0)
-- Compatibility updates for the latest d3.js
-- Updated Verge script to the latest release
-- Fixed viewport shift when a Trigons graphic is taller than the browser window
-- Renamed options “easyIn”/“easyOut” to “easeIn”/“easeOut”
-- Recoded the script to modern standards

ver 1.0 - initial release