<style>

rect {stroke: white; stroke-width: 2px;}

text {fill: white; font-family: 'Rajdhani', sans-serif;}

.maintitle {font-size: 39px; fill: black;}

.mainsubtitle {font-size: 17px; fill: black;}

.title {text-anchor: end; font-size: 32px;}

.title2 {font-size: 32px;}

.subtext {text-anchor: end; font-size: 18px;}

.footprint {font-size: 18px;}

line {stroke: white; stroke-width: 1px;}

</style>

<text x="0" y="25" class="maintitle">Land guzzlers</text>

<text x="0" y="45" class="mainsubtitle">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>

<rect x="0" y="51.2" width="1048.8" height="1048.8" fill="#a5620b"></rect>

<text x="1043.8" y="81.2" class="title">LARGE DOG</text>

<text x="1028.8" y="86.2" class="footprint" transform="rotate(90 1028.8,86.2)">Eco-footprint: 1.1 hectares </text>

<!-- Look for the structure in the numbers here. And how did I get 1048.8 from the Large Dog data? -->

<!-- this is a comment in xml. -->

<rect x="0" y="183.5" width="916.5" height="916.5" fill="#c29657"></rect>

<text x="911.5" y="213.5" class="title">MEDIUM-SIZED DOG</text>

<text x="896.5" y="218.5" class="footprint" transform="rotate(90 896.5,218.5)">Eco-footprint: 0.84 hectares </text>

<text x="876.5" y="243.5" class="subtext">CONSUMPTION PER YEAR </text>

<text x="876.5" y="263.5" class="subtext">164kg of meat, 95kg of cereals </text>

<text x="876.5" y="283.5" class="subtext">43.3m2 of land per 1kg of chicken (more for beef and lamb), 13.4m2 of land per 1kg of cereals </text>

<line x1="612" y1="225.5" x2="886.5" y2="225.5"></line>

<line x1="886.5" y1="225.5" x2="886.5" y2="292.5"></line>

<rect x="0" y="459.7" width="640.3" height="640.3" fill="#cc1f5e"></rect>

<text x="635.3" y="489.7" class="title">TOYOTA LAND CRUISER</text>

<text x="620.3" y="494.7" class="footprint" transform="rotate(90 620.3,494.7)">Eco-footprint: 0.41 hectares </text>

<text x="600.3" y="521.7" class="subtext">10,000km DRIVEN PER YEAR </text>

<text x="600.3" y="541.7" class="subtext">55.1 gigajoules (includes energy required to fuel and construct)</text>

<line x1="610.3" y1="503.7" x2="610.3" y2="546.7"></line>

<line x1="338" y1="503.7" x2="610.3" y2="503.7"></line>

<rect x="0" y="675.8" width="424.2" height="424.2" fill="#a71949"></rect>

<text x="419.2" y="705.8" class="title">VOLKSWAGEN GOLF</text>

<rect x="0" y="712.7" width="387.3" height="387.3" fill="#f7991d"></rect>

<text x="382.3" y="742.7" class="title">CAT</text>

<text x="367.3" y="747.7" class="footprint" transform="rotate(90 367.3,747.7)">Eco-footprint: 0.15 hectares </text>

<rect x="0" y="981.7" width="118.3" height="118.3" fill="#231f20"></rect>

<text x="118.3" y="1011.7" class="title2">HAMSTER</text>

<text x="120" y="1031.7" class="footprint">Eco-footprint: </text>

<text x="120" y="1051.7" class="footprint">0.014 hectares </text>

How did I calculate that first object's numbers? What is the equation given 1.1 hectares, the first data value? How do you use that to calculate the rest? I found out that the 1048.8 was basically a square root of the original 1.1 hectares so I found the square root for every hectare value.

Write out some explanation, thoughts, or rough equations here. This can be notes, questions, discussion. I found relationships between the example given and applied those same relationships to the rest of the code. For example, if one number was 15 pixels less than the original then I knew that was the margin to use.