Pattern Background

Simple animated pattern background to make your sections stand out.

Grid background with dot

Grid background with big dot and ellipse on top

Examples

Grid background without animation

Small grid background with animation

Prop Name	Type	Default	Description
`animate`	`boolean`	`false`	Set `true` if you want to animate the background.
`direction`	`top` \| `bottom` \| `left` \| `right` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top`	Direction of the animation movement. You can use the const `PATTERN_BACKGROUND_DIRECTION.`
`direction`	`grid` \| `dot`	`grid`	Type of pattern. You can use the const `PATTERN_BACKGROUND_VARIANT.`
`size`	`xs` \| `sm` \| `md` \| `lg`	`md`	Size of the background pattern.
`mask`	`ellipse` \| `ellipse-top`	`ellipse`	Add a mask over the background pattern. You can use the const `PATTERN_BACKGROUND_MASK.`
`speed`	`number`	`10000`	Duration of the animation in `ms`, the bigger it is, the slower the animation. (`20000` slower than `5000`). You can use the const `PATTERN_BACKGROUND_SPEED.`

You can customize your needs directly within the index.ts file. See code below.

You can copy and paste the following code to create these components (put them under the same folder):

PatternBackground.vue

index.ts

On This Page