Introduction
Trigons is a unique JavaScript script that allows you to create and animate abstract SVG images with ease. As a plugin for the popular d3.js library, Trigons uses d3’s built-in Delaunay triangulation method to generate colorful and animated abstract images. In this review, we’ll dive into the features, requirements, and limitations of Trigons, as well as explore its demo site to get a better understanding of what it can do.
Main Features
Trigons boasts a impressive set of features, including:
- 30 built-in animation effects: Trigons includes a wide range of animation effects, allowing you to create unique and engaging animations.
- Responsive SVG images: Trigons’ SVG images can be made responsive, ensuring they adapt to different screen sizes and devices.
- Retina perfect: Trigons’ images are retina perfect, making them look great on high-resolution displays.
- Flexible and powerful settings: Trigons offers a range of customizable settings, allowing you to fine-tune the appearance of your SVG images.
- Works in all modern browsers: Trigons is compatible with all modern browsers, including Chrome, Firefox, Safari, and Edge.
- Any color, any size: Trigons’ images can be created in any color and size, making them highly versatile.
- Clean bright or flat colors or gradients: Trigons allows you to choose from a range of color options, including clean bright colors, flat colors, or gradients.
- Build-in Color Palette Generator: Trigons includes a built-in color palette generator, making it easy to create a cohesive color scheme.
- Convert to PNG: Trigons allows you to convert your SVG images to PNG format, making it easy to use them in a variety of contexts.
- Use it as background-image: Trigons’ images can be used as background images, adding a unique and visually appealing touch to your website or web application.
Requirements
To use Trigons, you’ll need:
- d3.js library v5 and up: Trigons requires the latest version of d3.js library.
- Canvg.js (optional): If you want to convert your SVG images to PNG format, you’ll need Canvg.js.
Important Note
Trigons is not a slider, but rather a tool for creating and animating abstract SVG images. You can use these images in sliders without their special animations, but if you want to use the build-in animation effects, you’ll need to have an API that allows you to call Trigons methods when your slides are changed.
License
To use Trigons, you’ll need to purchase a regular or extended license for every web project.
Change Log
Trigons has undergone several updates, including:
- ver 1.3.1: A fix for the "gradient" color mode calculation.
- ver 1.3: An update to the latest version of d3.js library (5.9.7).
- ver 1.2: An update to the latest version of d3.js library (5.9.2).
- ver 1.1: An update to the latest version of d3.js library (5.5.0), as well as a range of code changes to improve compatibility.
Score: 4.17
Overall, Trigons is a powerful and flexible tool for creating and animating abstract SVG images. With its range of features, customization options, and ease of use, it’s an excellent choice for anyone looking to add some visual interest to their website or web application. While there are some limitations and requirements to be aware of, Trigons is well worth the investment for anyone serious about creating unique and engaging visual content.
User Reviews
Be the first to review “Trigons – Create and Animate Abstract SVG Images”
Introduction to Trigons: Creating and Animating Abstract SVG Images
Trigons is a powerful and versatile tool for creating and animating abstract SVG images. With Trigons, you can design stunning visuals that are both aesthetically pleasing and engaging. In this tutorial, we will guide you through the process of using Trigons to create and animate abstract SVG images. Whether you're a beginner or an experienced designer, this tutorial will walk you through the basics and advanced techniques of using Trigons.
What is Trigons?
Trigons is a free online tool that allows you to create and animate SVG images using a variety of shapes, colors, and patterns. With Trigons, you can design complex shapes, patterns, and animations without requiring extensive knowledge of coding or design software. Trigons is ideal for graphic designers, animators, and anyone who wants to create unique and captivating visual content.
Tutorial: Creating and Animating Abstract SVG Images with Trigons
Step 1: Getting Started with Trigons
To start using Trigons, simply visit the Trigons website and click on the "Create" button. You will be taken to the Trigons editor, where you can start designing your SVG image.
Step 2: Choosing Your Shape
In the Trigons editor, you will see a variety of shapes to choose from, including circles, triangles, squares, and more. Select the shape that you want to use as the basis for your design. You can also combine multiple shapes to create a more complex design.
Step 3: Customizing Your Shape
Once you have selected your shape, you can customize it by adjusting its size, color, and other properties. You can also add patterns, textures, and gradients to your shape to give it more depth and visual interest.
Step 4: Adding Animations
To add animations to your design, click on the "Animate" tab in the Trigons editor. You will see a variety of animation options, including fade-in, fade-out, scale, and rotation. You can also create custom animations using Trigons' animation builder.
Step 5: Saving and Exporting Your Design
Once you have created and animated your design, you can save it as an SVG file or export it as a GIF or MP4 animation. You can also share your design directly to social media or embed it on a website.
Advanced Techniques
Step 6: Using Layers
Trigons allows you to create multiple layers in your design, which can be used to create complex animations and interactions. To create a new layer, click on the "Layers" tab and then click on the "Add Layer" button. You can then move the new layer above or below other layers to create a specific stacking order.
Step 7: Using Scripting
Trigons allows you to write custom JavaScript code to automate specific actions or interactions in your design. To access the scripting interface, click on the "Script" tab in the Trigons editor. You can then write JavaScript code to control the behavior of your design.
Conclusion
In this tutorial, we have covered the basics and advanced techniques of using Trigons to create and animate abstract SVG images. With Trigons, you can design stunning visuals that are both aesthetically pleasing and engaging. Whether you're a beginner or an experienced designer, Trigons is a powerful tool that can help you bring your creative vision to life.
Here is an example of a complete settings configuration for Trigons - Create and Animate Abstract SVG Images:
Trigon Settings
trigons: [ { type: 'triangle', x: 100, y: 100, size: 50, color: '#ff69b4', stroke: '#333', stroke_width: 2, rotation: 0, animation: { type: 'rotate', duration: 2000, delay: 0, iterations: Infinity } }, { type: 'triangle', x: 200, y: 200, size: 30, color: '#33cc33', stroke: '#333', stroke_width: 1, rotation: 45, animation: { type: 'scale', duration: 1500, delay: 500, iterations: 2 } } ]
Animation Settings
animation: { duration: 4000, delay: 0, iterations: Infinity, easing: 'ease-in-out' }
Grid Settings
grid: { enabled: true, size: 20, color: '#ccc', opacity: 0.5 }
Canvas Settings
canvas: { width: 400, height: 400, background: '#fff', border: '1px solid #ddd' }
Miscellaneous Settings
randomize: true, seed: 123, debug: false
Here is the list of features about Trigons:
- Create Modern and Stylish Abstract SVG Images with Optional Animations: Create responsive and retina-perfect SVG images that can be animated with 30 built-in effects.
- D3.js Library Integration: Trigons uses the d3.js library to create colorful and animated abstract images.
- Seven Methods for Creating and Animating SVG Images: Includes seven JavaScript methods for creating, animating, converting, and updating SVG images.
- Flexible and Powerful Settings: Offers adjustable options to customize the appearance and behavior of your abstract images.
- Compatibility with All Modern Browsers: Trigons works seamlessly in all modern web browsers.
- Any Color and Any Size: Choose from a range of colors and sizes to create unique and striking images.
- Built-in Color Palette Generator: Generate palettes to create cohesive and harmonious colors schemes.
- Conversion to PNG: Convert SVG images to PNG formats.
- Use as 'background-image': Use Trigons SVG images as background images.
- Dynamic Add, Update, Animate, and Convert: Use JavaScript or HTML5 data attributes to dynamically manage SVG images.
- 30+ Built-in Animation Effects: Offers numerous animation effects to enhance the interactivity of your abstract images.
- In and Out Animations: Manage separate 'In' and 'Out' animation settings.
- Click, Hover, and Viewport Events: Configure reactions to click, hover, and viewport events.
- Support for Separated Animation Methods: Provides two distinct animation methods: force-based animation and custom animation using options.
These features combine to give developers a powerful tool for creating, styling, and animating abstract SVG images using Trigons.
Related Products
$19.00
There are no reviews yet.