let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
classes:
});
gradientObject.animateGradient();This is what the NeatPolkaDots gradient pattern looks like by default.
let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
styleOptions: {
rings: true
},
classes:
});
gradientObject.animateGradient();You can get a ring around the circles by setting the rings property to true.
let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
styleOptions: {
bgPosMultipliers: [0, 0, 0, -0.5],
radii: [30, 60],
rings: true,
baseSize: 80
},
classes:
});
gradientObject.animateGradient();We have strategically positioned our gradients here with the help of bgPusMultipliers property. The circle are also closely packed together due to their radii values.
let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
styleOptions: {
radii: [40, 30],
triColor: true
},
classes:
});
gradientObject.animateGradient();Create a gradient pattern with three colors by setting triColor to true.
let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
styleOptions: {
radii: [30, 30],
rings: true,
triColor: true
},
classes:
});
gradientObject.animateGradient();This time we are creating rings of equal size for our gradient by setting the value of radii to [30, 30] and rings to true.
let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
styleOptions: {
radii: [30, 60],
updateVariable: true,
triColor: true
},
classes:
});
gradientObject.animateGradient();I animate the size of all circles by setting updateVariable to true.
let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
styleOptions: {
bgPosMultipliers: [0, 0, 0, -0.5],
radii: [40, 40],
triColor: true,
updateVariable: true
},
classes:
});
gradientObject.animateGradient();This time we are positioning the circles one below the other with the help of bgPosMultipliers property.
Animating the size of these circles by setting updateVariable to true creates a nice effect.
let gradientObject = new NeatPolkaDots({
element: boxElems[0],
colors: ,
styleOptions: {
bgPosMultipliers: [0, 0, 0, -0.5],
radii: [15, 60],
baseSize: 50
},
classes:
});
gradientObject.animateGradient();Finally, we use a combination of large and small circles to create continuous chains in our gradient pattern.