SVG Gradients
A collection of SVG gradient examples, showcasing different color combinations and effects.
SVG Draw
Preview
Scale your Marketing with simple AI tools
Source Code
Source Code
tsx
"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
const SvgDraw = () => {
return (
<div
className={cn(
"flex h-[400px] items-center justify-center",
"bg-white dark:bg-black",
)}
>
<h1
className={cn(
"max-w-lg text-center text-4xl leading-snug font-bold",
"text-zinc-900 dark:text-zinc-100",
)}
>
Scale your{" "}
<span className={cn("relative")}>
<svg
width="212"
height="81"
viewBox="0 0 212 81"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cn("absolute -top-8 -left-3")}
>
<motion.path
d="M132.242 0.48151C124.992 2.51002 117.988 4.53853 111.244 6.5594M111.244 6.5594C17.3305 34.7024 -26.1405 61.362 17.5623 65.882C64.4032 70.7264 216.233 96.1599 211.387 65.882C207.51 41.6596 143.01 16.2409 111.244 6.5594Z"
stroke="#D4CB1C"
strokeWidth="2"
initial={{ pathLength: 0 }}
whileInView={{ pathLength: 1 }}
transition={{ duration: 1.5, repeat: Infinity }}
/>
</svg>
Marketing
</span>{" "}
with simple AI tools
</h1>
</div>
);
};
export default SvgDraw;
SVG Lines
Preview
AD
Source Code
Source Code
tsx
"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
const SvgLines = () => {
return (
<div
className={cn(
"relative flex h-[400px] items-center justify-center overflow-hidden",
"bg-white dark:bg-black",
)}
>
<div
className={cn(
"absolute inset-0 h-full w-full",
"bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] dark:bg-[radial-gradient(#333_1px,transparent_1px)]",
"mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] bg-size-[16px_16px]",
)}
/>
<div className={cn("relative z-10 flex flex-col gap-y-8")}>
<svg
width="312"
height="32"
viewBox="0 0 312 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.00321537 0.499987 L311.003 2.49999 L311.5 32"
className={cn("stroke-neutral-200 dark:stroke-[#605d5dff]")}
strokeWidth="1"
/>
<motion.path
d="M0.00321537 0.499987 L311.003 2.49999 L311.5 32"
stroke="#35b2f1ff"
strokeWidth="2"
strokeDasharray="40 350"
initial={{ strokeDashoffset: 390 }}
animate={{ strokeDashoffset: 10 }}
transition={{
repeat: Infinity,
duration: 2,
ease: "easeOut",
}}
style={{ filter: "drop-shadow(0 0 2px #1FB74D)" }}
/>
</svg>
<svg
width="289"
height="2"
viewBox="0 0 289 2"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.00173009 0.499995 L289.002 1.5"
className={cn("stroke-neutral-200 dark:stroke-[#605d5dff]")}
strokeWidth="1"
/>
<motion.path
d="M0.00173009 0.499995 L289.002 1.5"
stroke="#F97D7D"
strokeWidth="2"
strokeDasharray="40 350"
initial={{ strokeDashoffset: 390 }}
animate={{ strokeDashoffset: 10 }}
transition={{
repeat: Infinity,
duration: 2,
ease: "easeOut",
}}
style={{ filter: "drop-shadow(0 0 2px #F97D7D)" }}
/>
</svg>
<svg
width="311"
height="27"
viewBox="0 0 311 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.00321537 24.5 L311.003 26.5 L310.5 0"
className={cn("stroke-neutral-200 dark:stroke-[#605d5dff]")}
strokeWidth="1"
/>
<motion.path
d="M0.00321537 24.5 L311.003 26.5 L310.5 0"
stroke="#ccf33dff"
strokeWidth="2"
strokeDasharray="40 350"
initial={{ strokeDashoffset: 390 }}
animate={{ strokeDashoffset: 10 }}
transition={{
repeat: Infinity,
duration: 2,
ease: "easeOut",
}}
style={{ filter: "drop-shadow(0 0 2px #3F1390)" }}
/>
</svg>
<div
className={cn(
"absolute top-8 -right-8 size-16 bg-neutral-200 dark:bg-neutral-800",
"flex items-center justify-center overflow-hidden rounded-lg",
)}
>
<motion.div
className={cn("absolute inset-[-50%]")}
style={{
background:
"conic-gradient(from 0deg,transparent 0 300deg,#1FB74D 340deg,transparent 360deg)",
}}
animate={{ rotate: 360 }}
transition={{
duration: 4,
repeat: Infinity,
ease: "linear",
}}
/>
<motion.div
className={cn("absolute inset-[-50%]")}
style={{
background:
"conic-gradient(from 0deg, transparent 0 300deg, #F97D7D 340deg,transparent 360deg)",
}}
animate={{ rotate: 360 }}
transition={{
duration: 4,
repeat: Infinity,
ease: "linear",
delay: 2,
}}
/>
<div
className={cn(
"relative z-10 flex h-[90%] w-[90%] items-center justify-center",
"rounded-md bg-neutral-200 p-1 dark:bg-neutral-800",
)}
>
AD
</div>
</div>
</div>
</div>
);
};
export default SvgLines;
SVG Meteors
Preview
Lagta hai baarish hone wali hai
Source Code
Source Code
tsx
"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
const LineSvg = ({ delay }: { delay: number }) => {
return (
<motion.svg
width="315"
height="87"
viewBox="0 0 315 87"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cn("rotate-20")}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 2 }}
>
{/* INVISIBLE BASE PATH (for layout only) */}
<line
x1="0.132078"
y1="0.482241"
x2="314.132"
y2="86.4822"
stroke="transparent"
strokeWidth="1"
/>
{/* MOVING BEAM */}
<motion.line
x1="0.132078"
y1="0.482241"
x2="314.132"
y2="86.4822"
stroke="#9f1c1cff"
strokeWidth="1"
strokeLinecap="round"
strokeDasharray="20 400"
initial={{ strokeDashoffset: 500 }}
animate={{ strokeDashoffset: -500 }}
transition={{
duration: 4,
repeat: Infinity,
ease: "linear",
delay,
}}
/>
</motion.svg>
);
};
const SvgMeteors = () => {
return (
<div
className={cn(
"flex h-[40vh] items-center justify-center overflow-hidden",
)}
>
<div
className={cn(
"relative flex h-[30vh] items-center justify-center overflow-hidden",
"rounded-lg px-8 py-4",
"bg-neutral-200/50 dark:bg-neutral-800/50",
)}
>
<p>Lagta hai baarish hone wali hai</p>
<div className={cn("absolute top-0 left-0 h-full w-full")}>
<LineSvg delay={0} />
</div>
<div className={cn("absolute top-10 left-0 h-full w-full")}>
<LineSvg delay={1} />
</div>
<div className={cn("absolute top-20 left-0 h-full w-full")}>
<LineSvg delay={2} />
</div>
<div className={cn("absolute -top-10 left-0 h-full w-full")}>
<LineSvg delay={3} />
</div>
</div>
</div>
);
};
export default SvgMeteors;
Share this post