Trigons - JS Script for Colored Animated Triangles

Welcome to Trigons

Premium JavaScript for colorful, animated abstract graphics
Creative & Modern

With 30 built-in animation effects
Flexible & Powerful

Trigons is easy to set up and customize

Explore More

Welcome to Trigons!

A flexible JavaScript plugin that lets you create modern, stylish abstract SVG graphics with optional animation

Trigons is coded as a plugin for the d3.js library (d3js.org) and uses d3’s built-in Delaunay triangulation to build colorful, animated abstract images (animation is optional).

It exposes seven (7) methods to create and animate SVG graphics, convert them to PNG, or use them as a CSS background-image on elements in your HTML.

Please look at the examples and get familiar with the features.

What You're Getting

This script uses SVG (Scalable Vector Graphics) and HTML5 features supported in all modern browsers.

There are no raster assets such as JPG or PNG (except after PNG export) — only vectors, for a crisp look on every device, including Retina displays.

Animated and Static

A signature feature of Trigons is that graphics can be animated with 30 built-in effects — or kept static.
Responsive

A Trigons SVG can be responsive: set the responsive option to true.
All Modern Browsers

Trigons are currently supported by Firefox, Safari, Chrome, Opera, Brave, Microsoft Edge, iOS and Android.
Retina Perfect

Trigons is vector-based, so it stays sharp on high-resolution displays.
Any Colors, Any Sizes

Trigons graphics can use any color palette for the triangles and scale to any size.
Solid colors or gradients

Use flat palettes, or generate a shaded gradient or a pseudo-3D look.
Built-in color palette generator

Easily build a palette from one, two, or three seed colors.
As "background-image"

A Trigons SVG can be applied as a CSS background-image on any element.
Convert to PNG

Export the Trigons SVG to PNG in one step.
Click, Hover and "Viewport" events

Start animation on click or hover, or when the element containing Trigons enters the viewport of your browser.
Separate "In" and "Out" Animations

"In" and "Out" passes can each use different effects, delays, durations, and easing.
"Force" Animation Methods

JavaScript APIs can trigger animations immediately, with no user event required.
Easy Integration

Two ways to create Trigons: JavaScript or HTML5 data attributes.
Flexible and Powerful Settings

User-friendly settings for the look and behavior of each Trigons instance — or all of them at once.
Free Support

Extensive documentation and free support are also available.

How To Use

Upload the scripts to your server, link them in your HTML, then initialize Trigons with JavaScript or HTML5 data attributes.

Via JavaScript

d3.selectAll('your_id_or_your_class')
  .trigons({
	width: 1024,
	height: 768,
	... other options and callbacks ...
  })
  .trigonsAnimInit({
	animIn: 'effect1-top',
	durationIn: 2000,
	easeIn : 'cubic-out',
	... other options and callbacks ...
  });

Via HTML

<div class="trigons"
	data-create =
	  '{"width": "900",
	  "height": "300",
	  ... other options ...,
	  "responsive": "true"}'
	data-animate =
	  '{"animOrder": "in-out",
	  "animIn": "effect7-left",
	  ... other options ...,
	  "viewportShift": "one-half"}'>
</div>

Via JavaScript, the methods .trigonsAnimNext(), .trigonsAnimIn(), .trigonsAnimOut(), .trigonsPng() and .trigonsBackground() are also available.

Full documentation for every option and method ships with the download after purchase.

Note: Trigons is not a slider — it renders and animates abstract SVG graphics. You can drop the output into any slider as plain HTML without Trigons’ own animation. To use the built-in animation effects inside a slider, you need a slider API with hooks such as beforeChangeSlide, afterChangeSlide, getUpcomingSlide, getOutgoingSlide, etc., or you must extend the slider’s JavaScript yourself to call Trigons methods.

On this demo, the intro above uses jquery.superslides.js with extra hooks to drive the animations you see.

Showcase (# 1 of 21)

User-defined palette

Simple color mode: the palette is defined by the user: "#2167ac, #67a8cf, #d1e6f0, #fddcc7, #ef8b62, #b2192b"