NeatZigZag Gradients

I create a NeatZigZag gradient in this library by using the first color you pass as a background and second color for those zig-zag bands.

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

  1. baseSize — to specify how large each building block of the gradient should be.

  2. updateVariable — to specify if some gradient components should animate. There are many variants of NeatZigZag so the animating component will vary.

  3. bandWidth — to specify the width of zig-zag pattern created by the second color. The value can range from 1 to 10.

  4. translucent — The first color you pass while instantiating NeatZigZag is used for the background. You can make this background translucent by setting this parameter to true.

  5. triColor — to create bands with the help of the second and third color while the first color acts as background.

  6. bgPosMultipliers — This is an eight-element array that contains numbers with which to multiply the baseSize of the gradient to calculate the position of different

  7. variant — You can tweak the values of any of the previous parameters to change the gradient's appearance. I experimented a bit and created a list of pre-configured values for some of these parameters that create interesting gradient patterns.

    In this case, the possible values for variant are: uneven, squares, square-stripes, square-diagonals, pinwheel, and arrows.

You can see some examples of animated NeatZigZag gradients below.

Better Heading

Gradient Colors

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

This gradient pattern uses the default NeatZigZag styleOptions values.

Better Heading

Gradient Colors

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

This gradient pattern sets the baseSize to 50px and make the background translucent.

Better Heading

Gradient Colors

let gradientObject =  new NeatZigZag({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        bandWidth: 5,
        variant: 'uneven'
    },
    classes: 
});
gradientObject.animateGradient();

This gradient pattern sets the bandWith to 5px and the variant to uneven.

The uneven variant sets that background position such that the band's width is no longer equal along the entire length.

Better Heading

Gradient Colors

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

With triColor set to true, the gradient will use three color overall. The first one for the background and two others for the bands.

Better Heading

Gradient Colors

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

We have set the bandWidth to 10 here which makes the second color's zig-zag stripes take as much space as possible.

Better Heading

Gradient Colors

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

When you haven't set a variant, a true value for updateVariable animates the band width from minimum to maximum.

Better Heading

Gradient Colors

let gradientObject =  new NeatZigZag({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 68,
        variant: 'squares',
        updateVariable: true
    },
    classes: 
});
gradientObject.animateGradient();

Here, we change the variant to squares and updateVariable to true.

This gives us a gradient pattern where the size of different squares shrinks and grows.

Better Heading

Gradient Colors

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

When you set the variant to pinwheel, the background positions of individual gradients are adjusted in a way that you get something that resembles simple pinwheels.

Better Heading

Gradient Colors

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

Set the variant to arrows and the gradient pattern adjusts its background positions to create simple arrows.

Better Heading

Gradient Colors

let gradientObject =  new NeatZigZag({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 90,
        variant: 'pinwheel',
        triColor: true
    },
    classes: 
});
gradientObject.animateGradient();

You can set triColor to true if you want a more colorful pinwheel pattern.

Better Heading

Gradient Colors

let gradientObject =  new NeatZigZag({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 120,
        variant: 'arrows',
        triColor: true
    },
    classes: 
});
gradientObject.animateGradient();

Similarly, you can make half of the arrows multi-colored by simply setting the value of triColor to true.

Better Heading

Gradient Colors

let gradientObject =  new NeatZigZag({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        baseSize: 90,
        variant: 'square-diagonals'
    },
    classes: 
});
gradientObject.animateGradient();

Set the variant to square-diagonals if you are looking for a checkered pattern with squares placed diagonally.

Better Heading

Gradient Colors

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

The square-stripes variant creates stripes with alternating colors. The stripes that the second color creates have small diagonally placed squares between them.

Setting triColor to true gives some interesting effects here.

Better Heading

Gradient Colors

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

This time we set updateVariable to true to animate the size of the squares inside the stripes.