Applying random CSS

Authoring Twine
,
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version:2.3
Story Format: 2.34.1

Hello everybody!

For a business simulation game I am currently trying to randomly generate very simple business logos at the start of game. As a start, I had a look at these CSS shapes. I figured, I could just randomly pick one of those shapes and apply them to a <div> using the <<addclass>> macro. But then, to increase randomness, I thought it would be nice to randomly apply additional CSS such as transform, clip-paths, fill and outline colors, etc.
This would just happen once per logo, I guess best in the StoryInit-Passage. How can I apply such random CSS to selected elements? Thank you!

2

For what you’re describing, I’d actually recommend using SVG (Scalable Vector Graphics) images instead. SVG images are actually made up of HTML compatible elements, so that should make generating and manipulating them much easier.

Just as an example, here’s the SVG image I use for the “enlarge font” icon in the “Font Size Buttons” section of my sample code collection:

<<nobr>><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
	<path d="m456 512h-400c-30 0-56-26-56-56v-400c0-30 26-56 56-56h400c30 0 56 26 56 56v400c0 30-27 56-56 56zm-5-471h-390c-14 0-20 10-20 20v390c0 19 15 20 20 20h390c12 0 20-7 20-20v-390c0-17-11-20-20-20z" fill="#fff" />
	<path d="m163 79v163h10c15 0 30-2 37-5 18-9 22-19 25-33h8v97h-8c-3-15-14-27-25-32-12-5-20-5-37-5h-10v123c0 20 1 33 3 39 2 5 5 9 11 14 5 4 12 6 19 6h9v11h-133v-11h8c8 0 14-2 18-6 3-2 6-7 8-14 2-5 2-18 2-38v-264c0-20-1-33-2-39-3-13-15-19-26-19h-8c-1 0 0-11 0-11h220v116h-8c-2-27-6-47-14-60s-17-22-32-27c-8-4-25-5-48-5z" fill="#fff" />
	<path d="m271 155v129h8c12 0 24-2 30-4 14-7 18-15 20-26h6v78h-6c-2-12-11-22-20-26-10-4-16-4-30-4h-8v99c0 16 1 26 2 31 2 4 4 7 9 11 4 3 10 5 15 5h7v9h-106v-9h6c6 0 11-2 14-5 2-2 5-6 6-11 2-4 2-14 2-30v-211c0-16-1-26-2-31-2-10-12-15-21-15h-6c-1 0 0-9 0-9h176v93h-6c-2-22-5-38-11-48s-14-18-26-22c-6-3-20-4-38-4z" opacity="0.75" fill="#fff" />
	<path d="m361 217v102h6c10 0 19-1 23-3 11-6 14-12 16-21h5v62h-5c-2-10-9-17-16-20-8-3-13-3-23-3h-6v78c0 13 1 21 2 25 1 3 3 6 7 9 3 3 8 4 12 4h6v7h-84v-7h5c5 0 9-1 11-4 2-1 4-4 5-9 1-3 1-11 1-24v-168c0-13-1-21-1-25-2-8-10-12-17-12h-5c-1 0 0-7 0-7h140v74h-5c-1-17-4-30-9-38s-11-14-20-17c-5-3-16-3-30-3z" opacity="0.5" fill="#fff" />
</svg><</nobr>>

Each path is a different chunk of the image. The first path is the curved border around the edges, and the next three are the “F” character at different sizes and opacities.

If it helps, there’s some JavaScript on this page for optimizing the SVG images.

You can find some good information about the format on the MDN SVG pages, or if you want to go super-in-depth, here are the SVG format specifications.

If you’re looking for examples of business logos in SVG format, see the “Brands” section of the Font Awesome fonts. I built this code in Twine which lets you see all of the Font Awesome icons and you can click on the icons to build up a list of the ones you’ve clicked on.

Hope that helps! :slight_smile:

3

Thank you! I’ll dig into that!