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!)


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


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


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. 
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.

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.
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.
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:

2Create a dynamic structure for my dot pattern background. 
3Below is my component structure in pseudo code:
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
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";
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;
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();
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  );
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  );

Ship your next UI in 5 minutes.

Prototyper is the fastest way to build, test, and ship products used by 500+ designers, frontend engineers and product managers.