How to Use Trianglify on Your Website

Software developers always find a way to make things easy, doable, and aesthetically appealing. The coming of Trianglify paves the way for the creation of amazingly colorful triangle meshes with CSS backgrounds and SVG images for any design of your website.

A javascript library for generating triangle meshes that are appealing to the eyes, Trianglify is also open-source software that Quinn Rohlf made. Tech expert Arslan Ijaz, who writes for The Medium, maintained that Trianglify, like other software programs, “are easy to use and can help you create some fantastic shapes for your website.”

“Web designers are always looking for new ways to create exciting and unique shapes for their websites. While many software programs can help with this, many online tools can do the same thing,” Ijaz said.

True enough, the Trianglify plugin utilizes some algorithms to make nice and perfect triangle backgrounds so that you will not encounter any other problems with how you will make the randomized design. You will also have full control over the final rendering with the help of some simple tools, like downloading and installing Triangle Generator if you are particular about the code. For other colorful images, you can also try Bower, NPM, or the CDNJS.

Web developer designs websites for different types of devices. Responsive web design concept

Interesting Background about Quinn Rohlf and his Trianglify

As a roaming designer and engineer based in Portland, Oregon, United States of America, Quinn Rohlf wrote that Trianglify is an open-source library “to generate low-poly style patterns by combining a Delaunay triangulation with some nice colors.”

Originally, this software was released in April of 2014. According to the engineer, this software also has a project, Trianglify.io “provides a user-friendly GUI for the library and helps fund library development and bugfixes via paid downloads.”

Released in May 2020, the Trianglify v4.0.0, was a more developed rewrite of the original source.  Rohlf stressed that @jasonlong’s GeoPattern library originally inspired the creation of Trianglify for Ruby. Regarding the licensing, the software developer said the Trianglify’s source code is licensed under version 3 of the GNU General Public License (GPLv3). Those who are interested in buying a commercial license for Trianglify, please email qr@qrohlf.com for details.

On the other hand, those who have questions or suggestions on its features can send them on GitHub.

“Trianglify.io is a tool I wrote to generate low-poly backgrounds, textures, and vectors. It’s based on an open-source library, Trianglify, which I also wrote,” added the software engineers.

On whether you can use the Trianglify javascript library on your website, Rohlf answered in the affirmative, saying, “as long as your website is open-source and complies with the terms of the GNU General Public License v3.”

Those interested in buying a commercial license can keep in touch with him. The engineer maintained that copyright is essential in the ownership of the tools.

Interestingly, when asked on implementing X, the engineer said “possibly.” “Feel free to file a feature request on the Trianglify issue tracker, but odds are it will be a while before I get back to hacking on Trianglify,” he said.

Programmers cooperating at Developing programming and website working in a software develop company office, writing codes and typing data code, Programming with HTML, PHP and javascript.

Some Guidelines in Using Trianglify on your Website

It is incredible to discover that many web owners or designers have started using Trianglify as a Javascript library for making different and aesthetically appealing triangle patterns.

Anyone can also generate Trianglify patterns without writing a single line of code at Trianglify.io. To those who want to get started, there is also an available starting guide and developer documentation on GitHub for your website design.

  1. You can initially do this by starting with the variance tool to check the degree of randomness in the pattern.
  2. Set a cell parameter for you to know how small or large every triangle can appear.
  3. Finally, select a color combination that suits well with your website hues.

“The plugin comes with a large number of preset options from the colorbrewer palette set that are ready to use. The colors range from monotone palettes to contrasting sets of color,” experts at the Up Heap said.

In terms of the final pattern, it can be SVG, PNG, or canvas formats for convenience, no matter your project type.

“And if you are still not quite satisfied, there are a few extra options as well in the code that you can adjust — such as background size, strokes, variance in triangle sizes in relation to one another and x and y color patterns,” Up Heap tech workers said.

Cropped shot of UI developer workspace with computer, stationery and paperwork on white desk

Other Apps that Make Random Shapes for your Website

It is good to know that there are also other apps or software you can try in creating random shapes for your websites, aside from Trianglify.io. Check the list of these cool apps.

1. Squircley.app

The good news is Squircley.app is a free design tool that you can utilize to create fantastic Squircles. The squircles can be of great purpose in making icons, background photos, and logos. Using this app allows you to pick shape’s scale, rotation, and curve. If you are finished with the design, export it using SVG format, then put it into your HTML code.

2. Getwaves.io

Getwaves are extremely useful when adding dynamic and amazing shapes to your web project.

This app paves the way for the creation of various styles of waves, plus animation and gradients. You may utilize CSS to customize the features, especially the grid areas.

3. Shapedividers.com

Shapedividers is also an amazing app you can use to develop fantastic div shapes quickly.

You can customize the shapes to best fit your design option and taste. Another advantage of this app is you do not have to think much about how you customize the colors because the dividers will update or change the color when the respective section changes.

4. Blobmaker.app

Blobmaker is a fantastic app you can use to come up with random shapes and add them to your designs. In this type of app, you can also adjust the contrast and complexity of the shapes so that they will look natural.

Blobmaker is both available for Windows and Mac users. Furthermore, this app’s organic shape will make your design more visually rhythmic, spatial, continuous, and cohesive.