• Welcome to Trigons

    Premium JS Script for creating colored and animated abstract images

  • Creative & Modern

    With 30 build-in animation effects

  • Flexible & Powerful

    Trigons is easy to set up and customize

Explore More

What You're Getting

This script utilizes SVG (Scalable Vector Graphic) and HTML5 features which are supported in all modern browsers.

There are no any usual images, like JPGs or PNGs (except when you convert trigons), but only vectors which give us clean and perfect look on any devices including Retina.

  • Animated and Static

    The exclusive feature of Trigons, that they can be animated with 30 built-in effects. And they can be static too.

  • Responsive

    Created Trigons SVG image can be responsive. Just set "responsive" option to true.

  • All Modern Browsers

    Trigons are currently supported by Firefox, Safari, Chrome, Opera 12+, Internet Explorer 9+, iOS and Android.

  • Retina Perfect

    Trigons is a vector based script, which mean it is presented perfect on high-resolution devices.

  • Any Colors, Any Sizes

    Created trigons image can use any color palettes for triangles and have any size

  • Clean colors or Gradient

    Any color palettes can be used or a shadowed gradient can be generated.


  • Build-in Color Palette Generator

    Generate with easy you own color palette based on one, two or three given colors.

  • As "background-image"

    Created Trigons SVG image can be used in css style "background-image" for any element.

  • Convert to PNG

    Created SVG Trigons image can be converted to PNG one with one step.


  • Click, Hover and "Viewport" events

    Animation can be started when "click" or "hover" events occur or when element with Trigons becomes visible.

  • Separate "In" and "Out" Animations

    Initialized animations can be different for "In" and "Out". They can have their own effect, delay, duration and easy.

  • "Force" Animation Methods

    Via JavaScript methods animations can be started immediately without user events.


  • Easy Integration

    There are two options of creating Trigons: via JavaScript and via HTML5 data attributes.

  • Flexible and Powerful Settings

    User friendly settings for custom look and behavior of every Trigons images or all of them.

  • Free Support

    Extensive documentation and free support are also available.

How To Use

Just upload 2 scripts to your server, define them in your HTML code and call Trigons via JavaScript or via 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,
	easyIn : '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.

The all detailed info about options and methods is available in the documentation included in the download package after purchasing.

Note: Trigons script is not a slider, it creates and animates abstract SVG images. You can use them 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 with something similar to "beforeChangeSlide", "afterChangeSlide", "getUpcomingSlide", "getOutgoingSlide", etc. Or you need to change JS code of your slider by yourself to be able to use the Trigons methods.

For example, on this demo site in the intro section at the top the "jquery.superslides.js" is used with extended functionality to produce the animations you can see.

Frequently asked questions

Please get familiar with these questions and answers before making the decision.

Is this a WordPress plugin?

No, this is a JavaScript item coded as plugin for Data-Driven Documents (d3.js) script by Mike Bostock.

Any plans to realize a WordPress Plugin?

No. You can ask your theme authors to include Trigons as part of their theme.

What are the dependences of your script?

Just d3.js! No jQuery or other libs are needed, except your plan to use PNG conversion

Can I use your script in multiple websites with one license?

No, you need to buy one license for each website. More info about the licenses is here

Do you provide any support?

Yes, of course. After purchasing you can contact me via email contact form on my profile page on CodeCanyon. Please Keep in mind that my free support does not included any customization or integration with third party scripts (plugins).

What is inside download pack?

Folders with compressed and developer uncompressed files
Animation reference page
Documentation and License info

Do you give a permission to resell your script with my own product (Template, WordPress Theme, etc.)?

Yes, but you need the CodeCanyon Extended License. More info about the licenses is here

Can I run multiple instances of Trigons in one page?

Yes. You can choose a class or an id where you want to place Trigons and define data-attributes or call .trigons() method as described in "How to Use" section.

Still have questions?

Contact Me

Ready for action?

Purchase Now