Let's Make Generative Art We Can Export to SVG and PNG

This article demonstrates how to create a generative art tool using JavaScript, SVG, and Canvas to produce design assets, specifically addressing the needs of a conference design project. The author, inspired by a similar tool used by professional designers, outlines a solution for creating customizable, exportable artwork.

The process begins by defining a color palette programmatically within JavaScript:

const colorPalette = ["#9B2E69", "#D93750", "#E2724F", "#F3DC7B", "#4E9397"];

A function, makeRects, then generates overlapping rectangles with random positions and colors from the palette:

// ... (function definition remains the same)

This function populates an SVG element, dynamically sized to the browser viewport:

const makeSVG = () => {
  // ... (function definition remains the same)
};

The generated SVG is then downloadable as an SVG file using a custom download function:

// ... (download function remains the same)

To address the client's need for PNG format, the article leverages canvg to render the SVG onto a canvas, enabling a download of the artwork as a PNG via FileSaver.js:

// ... (setup function remains the same)

The final application allows users to generate and download artwork in both SVG and PNG formats, adapting to different viewport sizes and aspect ratios. The author highlights the practicality of this approach for quickly generating design assets tailored to specific client needs. While acknowledging the potential for further sophistication (e.g., dynamically adjusting the number of rectangles based on viewport size), the article emphasizes the efficiency and real-world applicability of this generative art tool. The inspiration for this project came from observing a similar, more advanced tool used by professional designers.

The above is the detailed content of Let's Make Generative Art We Can Export to SVG and PNG. For more information, please follow other related articles on the PHP Chinese website!