This repository contains the source code for the Halftone Dot Generator, an interactive tool to convert images into a customizable halftone dot pattern. The project is structured as a monorepo with a shared core logic library, a web application, and a Figma plugin.

• /web-app: An interactive web-based tool to convert images into halftone patterns and export them as SVG.
• /figma-plugin: A plugin to apply the same halftone effect directly to images inside Figma.
• /core: A framework-agnostic library containing the core halftone generation logic, shared between the web app and the Figma plugin.

The web application allows you to fine-tune various parameters and export the result as a scalable SVG, perfect for use in design tools like Figma, Illustrator, or Inkscape.

Click here to try it out!

• Flexible Image Input: Upload, paste from clipboard, or drag-and-drop your image.
• Real-time Preview: See changes to the halftone effect instantly.
• Deep Customization: Adjust resolution, dot size, shape (round, square, custom char), blur, randomness, angle, and more.
• Advanced Coloring: Use solid colors, two-color gradients, and various fill patterns.
• SVG Export: Instantly copy the generated pattern as an SVG to your clipboard.

1. Clone the repository:

   git clone https://github.com/mmdsharifi/halftone-dot-generator.git
   cd halftone-dot-generator

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The application will be available at http://localhost:5173.

The Figma plugin brings the power of the halftone generator directly into your design workflow. Select an image, run the plugin, and insert the generated SVG onto your canvas.

1. Build the plugin:

   npm install
   npm run figma:build

2. Open the Figma desktop app.
3. Go to Plugins > Development > Import plugin from manifest...
4. Select the figma-plugin/manifest.json file from this repository.
5. To use: Select a shape with an image fill in your Figma file, then run the Halftone Dot Generator plugin.

• Run the development watcher: npm run figma:dev (keeps the plugin code bundled in dist/).
• Start the UI dev server with hot reload: npm run figma:ui. The plugin automatically redirects its iframe to http://localhost:5175/ui.html, so any edits in figma-plugin/src/ui reload instantly inside Figma.
• When you're done, stop the dev server so production builds (npm run figma:build) go back to the bundled UI that ships in the manifest.