Designing an OSS Dot Pattern background component
Learn how to design a dynamic pricing table within 5 minutes using AI.
Written by
Thijs Verreck
Published on
Personally, when I'm designing a website, I love to add visually appealing elements which significantly enhance user engagement and experience. I'm a big fan of (dynamic) dot pattern backgrounds, because they not only adds aesthetic value but also provides a unique and modern look, adapting to different design needs and preferences quickly. It is both a good design and development practice.
In this blog post, I'll explore how to design a dynamic dot pattern background using Prototyper, a design tool that simplifies component design tasks.
What we are gonna create (or skip to the end to grab the code!)
Basic
Start with essential tools to boost your online presence.
SEO Strategy & Topic Recommendations
Competitor Analysis to stand out
Built-in Keyword Research
Target latest Google trends
SEO optimized blogs and socials
Technical SEO analysis and Reports
Target 100+ regions and languages
Professional
Unlock enhanced features and premium content to supercharge your business.
Everything in Basic plan
Get 25 premium blogs
Index upto 1000 pages
Premium support
Local SEO
SEO Agent
Premium
Ultimate customization and dedicated support for enterprise needs.
Everything in Professional plan
Dedicated SEO consultant
Custom SEO strategies
Priority support
Quarterly business reviews
Custom integrations
Why Use Prototyper?
Prototyper is designed for building high-fidelity prototypes quickly and efficiently. It allows developers and designers to collaborate by starting the design process in code, ensuring that the final product is both functional and visually appealing. For my dot pattern background project, Prototyper was the quickest way, because I could iterate quickly through design changes and see the results in real-time.
Step-by-Step Guide to Creating a Dot Pattern Background
In this guide, I'll explain how to create a dynamic dot pattern background using Prototyper. Copy my prompts to try it for yourself or grab the end result at the end.
Step 1: Setting Up A New Project
Go to the landing page in your workspace and prepare your first prompt. In my case it was:
1 We're kicking off the design process for a dot pattern background.
2
3 The process will involve a couple of steps:
4 1. Plot the layout.
5 2. Create the dot pattern framework.
6 3. Merge the layout with the dot pattern framework.
7
Step 2: Designing the Layout
The layout is crucial as it affects how information is perceived. For our pricing table, we used a grid system to organize the plans into columns, making it scalable from one to multiple pricing options. The styling is done using Tailwind. View my prompt below:
1 Step 1: The layout.
2
3 Create a dot pattern component with the following properties:
4 - width: The width of the pattern.
5 - height: The height of the pattern.
6 - x: The x-coordinate for the pattern's position.
7 - y: The y-coordinate for the pattern's position.
8 - cx: The x-coordinate for the circle's center.
9 - cy: The y-coordinate for the circle's center.
10 - cr: The radius of the circle.
11 - className: Additional CSS classes for styling.
12
13 Ensure the pattern is plotted on a grid and can be dynamically controlled.
14 Also, add a gradient mask to create a distinct visual effect.
Step 3: Create the dot pattern framework
It's important to clearly define the structure of your dot pattern background. Use pseudo code to ensure the LLM understands the data format you need.
Use this prompt as an example:
1
2Create a dynamic structure for my dot pattern background.
3Below is my component structure in pseudo code:
4
5component DotPattern:
6 properties:
7 - width: number (default: 16)
8 - height: number (default: 16)
9 - x: number (default: 0)
10 - y: number (default: 0)
11 - cx: number (default: 1)
12 - cy: number (default: 1)
13 - cr: number (default: 1)
14 - className: string
15 - additionalProps: key-value pairs
16
17 method render:
18 - generate unique id
19 - return svg element with:
20 - pattern definition:
21 - id: unique id
22 - width, height, x, y from properties
23 - circle element with cx, cy, cr from properties
24 - linear gradient definition:
25 - id: unique id + '-gradient'
26 - gradient from white to transparent
27 - rect element:
28 - fill with pattern url
29 - mask with gradient url
Step 3: Iterate by explaining the LLM to merge the layout and data structure
The third step is to merge our initial layout with our newly created data structure. You can also experiment some additional dynamic and styling options here. I instructed Prototyper to also add some dynamic styling options to the pricing table.
My prompt:
1Merge the pricing scheme with the layout.
2- Also add dynamic styling options so that I can control the background and button colors
3- Integrate a lucide-react icon to highlight features.
4- style everything using Tailwind
Again - my aim is to be very explicit here! The more context -> the higher the quality of the design. Just as handing something off to your designer in the real-world, the AI works better as its understanding of the end goal becomes better.
The final result
The final code can be found here, feel free to copy it and use it in your own projects. Or import it into Prototyper to start iterating.
1import { useId } from "react";
2import { Button } from "ui";
3
4interface DotPatternProps {
5 width?: any;
6 height?: any;
7 x?: any;
8 y?: any;
9 cx?: any;
10 cy?: any;
11 cr?: any;
12 className?: string;
13 [key: string]: any;
14}
15
16function DotPattern({
17 width = 16,
18 height = 16,
19 x = 0,
20 y = 0,
21 cx = 1,
22 cy = 1,
23 cr = 1,
24 className,
25 ...props
26}: DotPatternProps) {
27 const id = useId();
28
29 return (
30 <svg
31 aria-hidden="true"
32 className={`pointer-events-none absolute inset-0 h-full w-full fill-neutral-200/80 ${className}`}
33 {...props}
34 >
35 <defs>
36 <pattern
37 id={id}
38 width={width}
39 height={height}
40 patternUnits="userSpaceOnUse"
41 patternContentUnits="userSpaceOnUse"
42 x={x}
43 y={y}
44 >
45 <circle id="pattern-circle" cx={cy} cy={cy} r={cr} />
46 </pattern>
47 <linearGradient id={`${id}-gradient`} x1="0" y1="0" x2="0" y2="1">
48 <stop offset="0%" stopColor="white" stopOpacity="1" />
49 <stop offset="100%" stopColor="white" stopOpacity="0" />
50 </linearGradient>
51 </defs>
52 <rect width="100%" height="100%" fill={`url(#${id})`} mask={`url(#${id}-mask)`} />
53 <mask id={`${id}-mask`}>
54 <rect width="100%" height="100%" fill={`url(#${id}-gradient)`} />
55 </mask>
56 </svg>
57 );
58}
59
60export default function DotPatternBackground() {
61 return (
62 <div className="relative h-screen w-full bg-gradient-to-b from-slate-900 to-gray-900">
63 <DotPattern className="absolute inset-0 [mask-image:radial-gradient(700px_circle_at_center,white,transparent)]" />
64 <div className="relative z-10 flex flex-col items-center justify-center h-full space-y-4">
65 <h1 className="text-4xl font-bold text-white">Dot Pattern</h1>
66 <p className="text-lg text-white">This is a demo of a dot pattern background.</p>
67 <Button variant="outline" onClick={() => alert("Button Clicked!")}>
68 Click Me
69 </Button>
70 </div>
71 </div>
72 );
73}
