Theobromine Molecule

Today's assignment is to draw this Theobromine (chocolate) molecule in SVG.

Draw the colored image on the left. The line diagrams on the right are just to help you understand what the atoms are. There is nothing here you don't know how to do yet.

I suggest doing it like this:

1. Create a new blank file in Brackets and name it "theobromine.svg" or "chocolate.svg".
• OR duplicate your existing benzene.svg file and rename it to theobromine.svg.
2. If starting with a new blank file, put in the SVG template, as described elsewhere on this blog. 
3. Change the width, height, and viewbox to a square of suitable size. I suggest at least 400 x 400. You could do 600 x 600, 800 x 800, or even 1000 x 1000 or 1024 x 1024.
4. Add the hexagon side first. Use the polygon vertex calculator. You'll need both spheres and lines. When the hexagon side is done, group the lines and spheres together.
5. Add the pentagon side next. Use the polygon vertex calculator. Again, you'll need to resize, rotate, and translate it until it maches up one edge of the hexagon. Put the hexagon in a group.
6. Add the extra line to make double bonds where required.
7. Add the extra atoms hanging off the hexagon and the pentagon. 
8. Make the circles blue or purple (nitrogen), red (oxygen), dark gray (carbon), and light gray (hydrogen). 
9. Note that the hydrogen circles are a little smaller. 
10. Put the entire molecule in a group so you can put another transformation on it.

Requirements:

1. The poster must have a caption that says Theobromine or Chocolate (or both). 
2. The whole molecule should be nicely centered on the poster, the caption centered, and the molecule sized to look nice with suitable margins around the edges.
3. All the spheres and lines must have the appropriate gradients.
4. Use a suitable background color if you like. 
5. The poster should be suitable for use as a scientific drawing in a textbook or on a web site. This means you should not really take artistic license such as weird backgrounds, movement, weird colors. Stick to the standard.
6. You should put your name in the poster. It should probably be in the lower left or right corner, and small. 
7. Also be sure to put a comment in the code that has your name and today's date.