Background Paths

1'use client';
2import React from 'react';
3import { motion } from 'motion/react';
4import { cn } from '@/lib/utils';
5 
6export const BackgroundPaths = ({
7  children,
8  className,
9  svgOptions,
10}: {
11  children: React.ReactNode;
12  className?: string;
13  svgOptions?: {
14    duration?: number;
15  };
16}) => {
17  return (
18    <div
19      className={
20        cn
21          ? cn(
22              'relative h-96 md:h-screen w-full bg-white dark:bg-black',
23              className,
24            )
25          : `relative h-screen w-full bg-white dark:bg-black ${className ?? ''}`
26      }
27    >
28      <PathSVG svgOptions={svgOptions} />
29      <div className='relative z-10'>{children}</div>
30    </div>
31  );
32};
33 
34const PathSVG = ({ svgOptions }: { svgOptions?: { duration?: number } }) => {
35  const circuits = [
36    'M 50 100 L 200 100 L 200 200 L 350 200 L 350 300 L 500 300',
37    'M 500 50 L 500 150 L 650 150 L 650 250 L 800 250 L 800 350',
38    'M 100 400 L 250 400 L 250 500 L 400 500 L 400 600 L 550 600',
39    'M 600 400 L 750 400 L 750 500 L 900 500 L 900 600',
40    'M 50 300 L 150 300 L 150 450 L 300 450 L 300 550',
41    'M 700 100 L 850 100 L 850 200 L 950 200',
42    'M 150 200 L 300 200 L 300 350 L 450 350 L 450 450',
43    'M 550 150 L 700 150 L 700 300 L 850 300',
44  ];
45 
46  const nodes = [
47    { x: 200, y: 100 },
48    { x: 350, y: 200 },
49    { x: 500, y: 300 },
50    { x: 500, y: 150 },
51    { x: 650, y: 150 },
52    { x: 800, y: 350 },
53    { x: 250, y: 400 },
54    { x: 400, y: 500 },
55    { x: 750, y: 400 },
56    { x: 150, y: 300 },
57    { x: 300, y: 450 },
58    { x: 850, y: 100 },
59  ];
60 
61  return (
62    <motion.svg
63      viewBox='0 0 1000 700'
64      fill='none'
65      xmlns='http://www.w3.org/2000/svg'
66      className='absolute inset-0 w-full h-full'
67      initial={{ opacity: 0 }}
68      animate={{ opacity: 1 }}
69      transition={{ duration: 1 }}
70    >
71      <defs>
72        <linearGradient id='circuitGradientLight'>
73          <stop offset='0%' stopColor='#10b981' />
74          <stop offset='50%' stopColor='#3b82f6' />
75          <stop offset='100%' stopColor='#8b5cf6' />
76        </linearGradient>
77        <linearGradient id='circuitGradientDark'>
78          <stop offset='0%' stopColor='#00ff41' />
79          <stop offset='50%' stopColor='#00d9ff' />
80          <stop offset='100%' stopColor='#7c3aed' />
81        </linearGradient>
82        <filter id='circuitGlowLight'>
83          <feGaussianBlur stdDeviation='1.5' result='coloredBlur' />
84          <feMerge>
85            <feMergeNode in='coloredBlur' />
86// … truncated