Generating Print Graphics on the Web Using SVG

While redesigning our tradeshow booth, I needed an image of outer space. Google image search to the rescue, at least for a placeholder.

After a few rounds of revisions, the design was nearly complete. But I was still using the placeholder star field. I could have bought a stock image, found a free one to use, or tried to recreate an image similar to this by hand. I also had to consider that the booth is almost eight feet wide and I would need a fairly high-resolution image.

Then it hit me: this random pattern would be pretty easy to code. Both Sketch and Adobe Illustrator support scripting, but the learning curve seemed steep and I already know how to write JavaScript.

I started by adding a basic SVG in the html with a black rectangle and one white star.

Once I knew what the markup for a star should look like I removed the circle tag since I would be creating all this in the code. I set up a few variables for the number of stars and their sizes, and then I worked my JavaScript magic to randomly generate my own galaxy.

After some trial and error to get a star field that I liked, I opened Chrome Developer Tools and copied the SVG source. Then I pasted that source into a blank text document and saved it as an SVG.

Below is the final image I created to use on our new tradeshow booth.

We are debuting our new booth at AIM’s Heartland Developers Conference in La Vista, Nebraska this week. If you’re attending and see our booth, you’ll know a bit of the backstory of how we created one of its key design elements.