ludi.de ∙ triangles

Here's a beautiful, yet completely useless, SVG app.

A rectangular area is triangulated, meaning it's overlaid with a grid of triangles. You can influence this process using a number of parameters, such as the number of columns and/or rows, the colors, the animation, and more.

You can probably only use this SVG app as a kind of animated background image for websites or emails. It's programmed in SVG and JavaScript and can be easily embedded in an HTML page. The generated triangular grid is responsive and automatically adjusts to changes in the size of the drawing area.

Some examples:

Geometry

To create the animation, the rectangular drawing area is triangulated, meaning it is divided into a multitude of triangles. These triangles then form a grid of rows and columns. The number of rows and columns can be predefined or calculated automatically by setting one of the values to 0. If a value is set to 0, it is automatically calculated to create triangles that are as regular as possible.

The shape of the triangles is distorted by a random value. The higher this distortion value, the more irregular the triangles become.

Rows

Columns

Distortion

The triangles can be fixed to the edges of the drawing area. They will then be evenly distributed, firmly attached to the edge, and will not be animated.

fixed at the top

fixed at the bottom

fixed on the left

fixed on the right

Colors

A color is assigned to each of the four corners of the drawing area. The colors of the triangles are then calculated from these colors.

top left

bottom left

top right

bottom right

Lines

The triangles can be outlined with a colored line. If the line thickness is 0, no outline is drawn.

Color

Thickness

Animation

The "Motion" value determines the speed of movement for the intersection points of the triangles. A value of 0 means the triangles are not animated.

The points that define the triangles are initialized with a random height. The positions of the triangles in space, and thus the "Contrast" or light reflection, are then calculated from these points.

The final value, "Light Incident", determines the angular velocity of the incident light. The larger this value, the faster a virtual light source rotates around the triangle grid.

Motion

Contrast

Light Incident

Using

You can embed this animation in an HTML page or view it directly in a browser. Since all the settings you've made above are written into an SVG file during the download, it's very easy to use.


  <html>
    <body>
      <object data="triangles.svg" type="image/svg+xml">
      </object>
    </body>
  </html>

Please note that the animation is embedded using an object tag in HTML. The obvious image tag won't work because JavaScript execution is blocked there for security reasons.

You can also define the properties of the animated triangles directly in HTML using parameters in the object tag. However, for this method, the corresponding web page must be hosted on a server. The five examples at the top of this page are built this way.

Those familiar with the JavaScript programming language can also change the properties of the triangles directly in the SVG source code. First, the file triangles.svg must be loaded and then opened in a text editor. At the top of the SVG source code, you will find the JavaScript object options, which you can copy to the clipboard with your previously made settings and paste, or you can change the corresponding values manually.

Download

Please note that the SVG “triangles.svg” will be generated on the server and initialized with the parameters set above.

This software is licensed under the GNU General Public License (GPL), which includes the right to run, study, modify, and distribute the software.