SVG Generator

An interactive tool for creating and customizing SVG pattern designs. This project allows users to generate various SVG patterns with customizable properties like shapes, sizes, colors, and gradients.

This is was a "Hello World" project for me to learn how to tackle a simple project which is actually something that would be a little beyond my normal coding skills to lean how to build with AI tools as a designer inspired by Meng (https://x.com/MengTo) and Local Ghost https://x.com/localghost. This started in Claude 3.5 Sonnet and then I used Cursor to expand the project.

Features

• Multiple pattern types:

  • Circles
  • Squares
  • Triangles
  • Lines
  • Plus Signs
  • Corners
  • Dots

• Customization options:

  • Pattern size and spacing
  • Color control (background and shapes)
  • Opacity adjustment
  • Rotation control
  • Aspect ratio control
  • Size gradient effects (Radial, Angular, Wave, Linear)

Getting Started

1. Clone the repository:

2. Install dependencies:

3. Start the development server:

4. Open your browser and navigate to `http://localhost:5000

Usage

1. Select a pattern type from the dropdown menu
2. Adjust the size, spacing, and rotation using the sliders
3. Choose colors for both the background and shapes
4. Experiment with different size gradients and aspect ratios
5. Download your pattern as an SVG file using the download button

Technologies Used

• HTML5
• CSS3
• JavaScript
• SVG
• Node.js (for development)
• React
• Webpack

License

This project is open source and available under the MIT License.