Components
Background Lines
Animated SVG background with customizable colored lines that move across the screen.
Background Lines
The BackgroundLines component creates an animated SVG background with customizable colored lines that move across the screen. It features smooth animations with configurable colors, duration, and timing for dynamic visual effects.
Usage
Background Lines
Animated SVG lines with customizable colors
<template>
<div class="relative h-96 w-full overflow-hidden rounded-lg border bg-gray-900">
<MBackgroundLines :colors="['#46A5CA', '#8C2F2F', '#4FAE4D']">
<div class="relative z-10 h-full flex flex-col items-center justify-center text-white">
<h2 class="text-3xl font-bold mb-4">Background Lines</h2>
<p class="text-lg mb-6 text-center max-w-md text-gray-300">
Animated SVG lines with customizable colors
</p>
<button class="px-6 py-3 bg-white/10 backdrop-blur-sm rounded-full hover:bg-white/20 transition-colors">
Explore
</button>
</div>
</MBackgroundLines>
</div>
</template>
Props
svgOptions
object
Options for the SVG animation including duration.
colors
string[]
Array of colors for the lines.
class
string
CSS classes to apply to the container.
Examples
Basic Background Lines
Grid System
Enhance your layouts with dynamic grid lines that create structure and visual rhythm in your designs
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gray-900">
<MBackgroundLines>
<div class="relative z-10 h-full flex items-center justify-center text-white">
<h3 class="text-xl font-bold">Basic Lines</h3>
</div>
</MBackgroundLines>
</div>
</template>
Custom Colors
Custom Colors
Lines with custom colors and animation duration
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gray-900">
<MBackgroundLines
:colors="['#FF5733', '#33FF57', '#3357FF', '#F1C40F', '#9B59B6']"
:svg-options="{ duration: 15 }"
>
<div class="relative z-10 h-full flex flex-col items-center justify-center text-white space-y-4">
<h3 class="text-2xl font-bold">Custom Colors</h3>
<p class="text-center max-w-md text-gray-300">
Lines with custom colors and animation duration
</p>
</div>
</MBackgroundLines>
</div>
</template>