If you enjoyed working with the text portion of Tracery and have some comfort with HTML, you might want to experiment with adding images to your bot. This is great practice for thinking about procedural generation and the construction of digital art, and a fun way to add meme-esque humor or visual commentary to your theory bot. There are a lot of SVG examples to get you started at w3schools and around the web that will get you started on generating shapes.

5. For this exercise I'm going to start by modifying a very basic example, then generate a complex version as we go. Here's the example of an ellipse from w3schools:

<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
Sorry, your browser does not support inline SVG. 
</svg>

6. Copying this example into Tracery doesn't work: We need to convert it to SVG syntax that Tracery recognizes. First, wrap it in a object and indicate that the content is SVG and remove the alt text:

{svg <svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>}

7. We're not quite there -- remember, quotation marks have a special meaning in Tracery as they indicate strings. We need to escape all the quotation marks by adding \ before every quotation mark, and remove all the line breaks within the code. We also need to add some boilerplate to help Twitter recognize the graphic codex: 

{ "origin": "Here is some SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"500\" height=\"140\"><ellipse cx=\"200\" cy=\"80\" rx=\"100\" ry=\"50\" style=\"fill:yellow;stroke:purple;stroke-width:2\" /></svg>}" }

8. Scroll down and you'll see the text and svg now co-exist. A good side for a svg on twitter is 1024 x 512, so revise the size to reflect those dimensions:

{ "origin": "Here is some SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"1024\" height=\"512\"><ellipse cx=\"200\" cy=\"80\" rx=\"100\" ry=\"50\" style=\"fill:yellow;stroke:purple;stroke-width:2\" /></svg>}" }

9. This is still pretty static: let's start by making our shape dynamic and random. For every element, create a symbol in Tracery and fill it with options. For example, here's an option for the radius:

"rx":["50","100","150","200","250","300","350"]

10. To add this to our shape, we'll need to integrate it into the grammar and then use it to change the HTML. Use the same symbol syntax in the middle of the code to replace the number with #rx#.

{ "origin": "Here is some SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"1024\" height=\"512\"><ellipse cx=\"200\" cy=\"80\" rx=\"#rx#\" ry=\"50\" style=\"fill:yellow;stroke:purple;stroke-width:2\" /></svg>}",
"rx":["50","100","150","200","250","300","350"] }

11. We can also do this with values like colors: try replacing the fill and stroke with a set of color options using the same symbol for both:

{ "origin": "Here is some SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"1024\" height=\"512\"><ellipse cx=\"200\" cy=\"80\" rx=\"#rx#\" ry=\"50\" style=\"fill:#color#;stroke:#color#;stroke-width:2\" /></svg>}",
"rx":["50","100","150","200","250","300","350"] ,
"color":["purple","blue","green","teal","navy","darkgreen","LightCyan","MediumTurquoise","LightSeaGreen","CadetBlue","SeaGreen","PaleGreen","ForestGreen",
"Indigo","SlateBlue","DarkMagenta","BlueViolet","DarkOrchid"]}

12. We can also add other SVG elements and styles, such as opacity, with corresponding symbols. Think about the number of options you include for each and be strategic about the value range to achieve the impact you want:

{ "origin": "Here is some SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"1024\" height=\"512\"><ellipse cx=\"200\" cy=\"80\" rx=\"#rx#\" ry=\"50\" style=\"fill:#color#;stroke:#color#;stroke-width:2;opacity:#opacity#\" /></svg>}",
"rx":["50","100","150","200","250","300","350"] ,
"color":["purple","blue","green","teal","navy","darkgreen","LightCyan","MediumTurquoise","LightSeaGreen","CadetBlue","SeaGreen","PaleGreen","ForestGreen",
"Indigo","SlateBlue","DarkMagenta","BlueViolet","DarkOrchid"],
"opacity":["0.2","0.3","0.4","0.5","0.6","0.7"]}

13. Now let's turn our SVG into a moving element: change the cx and cy to options to center the image at different parts of the box. 

{ "origin": "Here is some SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"1024\" height=\"512\"><ellipse cx=\"#cx#\" cy=\"#cy#\" rx=\"#rx#\" ry=\"50\" style=\"fill:#color#;stroke:#color#;stroke-width:2;opacity:#opacity#\" /></svg>}",
"rx":["50","100","150","200","250","300","350"] ,
"color":["purple","blue","green","teal","navy","darkgreen","LightCyan","MediumTurquoise","LightSeaGreen","CadetBlue","SeaGreen","PaleGreen","ForestGreen",
"Indigo","SlateBlue","DarkMagenta","BlueViolet","DarkOrchid"],
"opacity":["0.2","0.3","0.4","0.5","0.6","0.7"],
"cx":["100","200","300","400","500","600","700","800","900"],
"cy":["100","200","300","400","500"]}

Refresh to see the range of places your circle is generated.

14. Now let's make a pattern of multiple shapes: start by moving the ellipse code into its own symbol and calling it from the origin, as in the below snippet:

"ellipse":"<ellipse cx=\"#cx#\" cy=\"#cy#\" rx=\"#rx#\" ry=\"50\" style=\"fill:#color#;stroke:#color#;stroke-width:2;opacity:#opacity#\" />",

15. We can add as many of this type of shape as we want by calling the ellipse repeatedly, as shown here:

"origin":"Here is a SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"512\" width=\"1024\">#ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse#
#ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse#</svg>}",

16. From these elements, you can create a very complex pattern-making bot. Let's  change the background color of each generated image:

"background":"<rect width=\"1024\" height=\"512\" style=\"fill:#backgroundcolor#\" />",

"backgroundcolor":["black","gray","darkgray"],

Add background to the SVG in origin prior to the ellipse call. Here's the final code:

{ "origin": "Here is some SVG: {svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"1024\" height=\"512\">#background##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse##ellipse#</svg>}",
"ellipse":"<ellipse cx=\"#cx#\" cy=\"#cy#\" rx=\"#rx#\" ry=\"50\" style=\"fill:#color#;stroke:#color#;stroke-width:2;opacity:#opacity#\" />",
"rx":["50","100","150","200","250","300","350"] ,
"color":["purple","blue","green","teal","navy","darkgreen","LightCyan","MediumTurquoise","LightSeaGreen","CadetBlue","SeaGreen","PaleGreen","ForestGreen",
"Indigo","SlateBlue","DarkMagenta","BlueViolet","DarkOrchid"],
"opacity":["0.2","0.3","0.4","0.5","0.6","0.7"],
"cx":["100","200","300","400","500","600","700","800","900"],
"cy":["100","200","300","400","500"],
"background":"<rect width=\"1024\" height=\"512\" style=\"fill:#backgroundcolor#\" />",
"backgroundcolor":["black","gray","darkgray"]}

You can see it running and play with it at: https://cheapbotsdonequick.com/source/PatternedM Links to an external site.

For more inspiration, check out:

• SVG explained: https://github.com/derekahmedzai/cheapbotsdonequick/blob/master/svg-tracery-image-bots.md 
• Single Color: https://cheapbotsdonequick.com/source/hashfacade 
• Simple Example: https://cheapbotsdonequick.com/source/5x5poems 
• Complex Example: https://www.cheapbotsdonequick.com/source/everyonesai
• On Process: https://harrygiles.org/2016/11/15/nabomamo-the-first-15-bots/ 
• Playing with overlap: https://cheapbotsdonequick.com/source/someboxes