NeatUpDownTriangles

The pattern for NeatUpDownTriangles comes from four strategically placed linear gradients.

You can change the following parameters for a NeatUpDownTriangles gradient to control its appearance.

  1. baseSize (Default: 100) — to specify the size of each building block of the pattern.

  2. triangleSize (Default: [20, 20]) — to specify the size of two triangles that make up the pattern.

  3. angle (Default: [-60, 60, 120, 240]) — to specify the angles at which the triangles are drawn.

  4. bgPosMultipliers (Default: [0, 0, 0, 0, 0.5, 0.75, 0.5, 0.75]) — to specify the number that should be multiplied with the baseSize to get the position of each gradient.

    There are four gradients so the bgPosMultipliers array has eight elements because each gradient position requires the X and Y value.

  5. triColor (Default: false) — to specify if the gradient should use three colors.

  6. seamless (Default: false) — to specify if the gradient should be seamless. This is useful in situation where you want the gradient to appear continuous when it animates for a long time in any direction.

  7. ratio (Default: 1) — to specify the ratio of width and height of the background's baseSize.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    classes: 
});
gradientObject.animateGradient();

This is what the gradient looks like by default.

The colors are still random but I haven't changed any other value.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        seamless: true,
        variant: "stars",
        parts: 20
    },
    classes: 
});
gradientObject.animateGradient();

The stars variant for NeatUpDownTriangles adjusts the background positions in a way that creates star-like shapes.

It also limits the gradient to a single color.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: [40, 60],
        triangleSize: [30, 10]
    },
    classes: 
});
gradientObject.animateGradient();

We use an array to provide baseSize values here. These values reflect the baseSize in X and Y direction.

The triangleSize parameter lets you set the size of the two triangle types.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 60,
        variant: 'opposite-stripes'
    },
    classes: 
});
gradientObject.animateGradient();

When you set the variant to opposite-stripes, you get alternating columns of triangles pointing in opposite directions.

This variant sets three properties — bgPosMultipliers, ratio, and triangleSize.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 60,
        variant: 'aligned',
    },
    classes: 
});
gradientObject.animateGradient();

The triangles that make up the gradient pattern align with each other when the variant is set to aligned.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 40,
        updateVariable: true,
        triColor: true,
        variant: 'opposite-stripes'
    },
    classes: 
});
gradientObject.animateGradient();

We have set both the updateVariable, and triColor properties to true to use three colors for the gradient pattern and animate the triangles' size.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: [100, 50],
        triColor: true,
        updateVariable: true
    },
    classes: 
});
gradientObject.animateGradient();

We are using an array as baseSize value here to set the background's base size in both X and Y direction. A lower value for Y shifts the triangles closer to each other vertically.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        seamless: true,
        parts: 6,
        triColor: true
    },
    classes: 
});
gradientObject.animateGradient();

Setting seamless to true helps us create a background that maintains continuity when animating from right to left (in this case).

The parts value specifies how many blocks of the gradient we want to draw in the container.

Better Heading

Gradient Colors

let gradientObject =  new NeatUpDownTriangles({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 50,
        ratio: 5 / 3
    },
    classes: 
});
gradientObject.animateGradient();

Placing the triangles next to each other requires tweaking the width and height values of the background size.

You can do these calculations yourself and provides an array as baseSize value.

An easier solution is just to provide a baseSize number and set the ratio to 5/3. This will automatically calculate the height of the gradient.