background-lines

1"use client";
2import { cn } from "@/lib/utils";
3import { motion } from "motion/react";
4import React from "react";
5 
6export const BackgroundLines = ({
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={cn(
20        "h-[20rem] md:h-screen w-full bg-white dark:bg-black",
21        className
22      )}
23    >
24      <SVG svgOptions={svgOptions} />
25      {children}
26    </div>
27  );
28};
29 
30const pathVariants = {
31  initial: { strokeDashoffset: 800, strokeDasharray: "50 800" },
32  animate: {
33    strokeDashoffset: 0,
34    strokeDasharray: "20 800",
35    opacity: [0, 1, 1, 0],
36  },
37};
38 
39const SVG = ({
40  svgOptions,
41}: {
42  svgOptions?: {
43    duration?: number;
44  };
45}) => {
46  const paths = [
47    "M720 450C720 450 742.459 440.315 755.249 425.626C768.039 410.937 778.88 418.741 789.478 401.499C800.076 384.258 817.06 389.269 826.741 380.436C836.423 371.603 851.957 364.826 863.182 356.242C874.408 347.657 877.993 342.678 898.867 333.214C919.741 323.75 923.618 319.88 934.875 310.177C946.133 300.474 960.784 300.837 970.584 287.701C980.384 274.564 993.538 273.334 1004.85 263.087C1016.15 252.84 1026.42 250.801 1038.22 242.1C1050.02 233.399 1065.19 230.418 1074.63 215.721C1084.07 201.024 1085.49 209.128 1112.65 194.884C1139.8 180.64 1132.49 178.205 1146.43 170.636C1160.37 163.066 1168.97 158.613 1181.46 147.982C1193.95 137.35 1191.16 131.382 1217.55 125.645C1243.93 119.907 1234.19 118.899 1254.53 100.846C1274.86 82.7922 1275.12 92.8914 1290.37 76.09C1305.62 59.2886 1313.91 62.1868 1323.19 56.7536C1332.48 51.3204 1347.93 42.8082 1361.95 32.1468C1375.96 21.4855 1374.06 25.168 1397.08 10.1863C1420.09 -4.79534 1421.41 -3.16992 1431.52 -15.0078",
48// … truncated