An SVG poster studio: design an event in three styles

What does your evening look like?

Enter an event name and switch between Orbit, Grid and Stage. Large lettering on a dark background, a rectangular rhythm, or a circle with a triangle and serif type? The wording stays the same, but each layout suggests a slightly different evening. There are also three palettes and an “Another variation” button that rearranges the composition within the selected style.

This is our small poster studio. The sample “Noc dobrych dźwięków” (“Night of Good Sounds”) is fictional; you can replace the name, date and venue and download the finished design as SVG. An editor supporting the format lets you keep adjusting the text and shapes. Code draws the circles, lines and rectangles here. Clicking through variations does not call an image-generation model, but you can ask AI to build a similar tool using the prompt below.

Three compositions, three starting points

Orbit puts a disk crossed by an ellipse below a large title on a dark background. Grid is light, with clear divisions and rectangular modules suggesting the rhythm of sound. Stage combines a circle, triangle and vertical strokes with a serif heading. Each distributes emphasis differently, so changing styles does more than change the color.

Compare them using the same title. See how heavy sans-serif lettering feels beside italics. Then change the palette: violet and lime, cobalt and coral, or wine and pink. One change at a time makes it easier to see what suits your event.

What goes into the AI brief?

“Make a poster generator” says little about the project you want. Our request therefore includes proportions, three visual directions, editable fields and downloading behavior. When you open the result, you can immediately judge whether the compositions differ and whether the export preserves what you see.

Our poster area is 480 × 600. The event name allows up to 42 characters, the date 32 and the venue 48. We split long titles into at most three lines and fit overflowing text to the available width. A shorter name leaves more room for the design itself, though. If the poster starts resembling small print, consider shortening the title.

Build a single HTML file: an interactive poster studio for a fictional music and design event. Everything must work offline without libraries, external images or web fonts. The preview is real SVG at 480 × 600, with text retained as editable text elements. Add fields: event name (42 characters), date and time (32), venue (48). Create three clearly different compositions: Orbit — dark background, large sans-serif title and a disk with an ellipse; Grid — light background, typography, dividing lines and rhythmic modules; Stage — a circle, triangle, vertical lines and an italic serif title. Three palettes: violet/lime, cobalt/coral, wine/pink. Add a variation button using a deterministic seed; text must remain unchanged. Wrap the title to at most three lines and fit long lines to the text area. Fonts: Arial/Helvetica/sans-serif and Georgia/Times New Roman/serif. The Download SVG button must save the current text, palette and variation. Build SVG through createElementNS and textContent, without inserting user data into innerHTML. Empty required fields block export and show a message. Controls on the left, the whole poster on the right; stack them on phones starting at 320 px. Add labels, visible focus, an SVG description and light and dark surrounding themes. State that code draws the shapes and the event is fictional.

Give the template a harder name

After a short title, enter a long one containing Polish characters. Inspect all three styles: does the name overlap the date, can you read the venue, and do shapes remain inside the area? Then clear one field. Our demo should identify what is missing, block downloading and retain the last complete preview.

Text in the file stays as SVG text. We do not download fonts or convert letters to outlines. That makes editing easier and keeps the file small. There is a consequence: another computer may use a fallback font and the poster may look slightly different. Open the SVG in the program you intend to use to finish it.

A poster to edit, a studio for more ideas

“Download SVG” saves the current name, date, venue, palette and variation. Open the file in a browser or vector editor and compare it with the preview, especially after entering a long title. It is material for further work. For printing, you still need to adapt it to your printer’s requirements.

Downloading the HTML saves the entire studio, which runs offline. It starts with its initial settings, however, and does not remember entries between openings. Save your own poster as SVG first. If you want to develop the tool, design one more layout with your own rules for placing text and shapes.

XMLSerializer handles export in the code: it converts the current SVG into text from which we prepare the download. We linked documentation for that mechanism and SVG text below. It will help when you change title wrapping or the export itself.