<style>

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

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;}

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

.footprint {font-size: 17px;}

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="218.1" width="881.9" height="881.9" fill="#c49658"></rect>

<text x="876.9" y="248.1" class="title">MEDIUM-SIZED DOG</text>

<text x="861.9" y="253.1" class="footprint" transform="rotate(90 861.9,253.1)">Eco-Footprint: 0.84 Hectares</text>

<text x="850.9" y="275.1" class="subtext">CONSUMPTION PER YEAR</text>

<text x="850.9" y="293.1" class="subtext">164kg of meat, 95kg or cereals</text>

<text x="850.9" y="312.1" 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="600" y1="255" x2="857" y2="255"></line>

<line x1="857" y1="255" x2="857" y2="350"></line>

<rect x="0" y="483.9" width="616.1" height="616.1" fill="#cd205f"></rect>

<text x="611.1" y="513.9" class="title">TOYOTA LAND CRUISER</text>

<text x="597.1" y="518.9" class="footprint" transform="rotate(90 597.1,518.9)">Eco-Footprint: 0.41 Hectares</text>

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

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

<line x1="300" y1="520.9" x2="590" y2="520.9"></line>

<line x1="590" y1="520.9" x2=590 y2="565"></line>

<rect x="0" y="691.8" width="408.2" height="408.2" fill="#a61a49"></rect>

<text x="403.2" y="720" class="title">VOLKSWAGEN GOLF</text>

<rect x="0" y="727.3" width="372.7" height="372.7" fill="#ff9320"></rect>

<text x="367.7" y="755.9" class="title">CAT</text>

<text x="352" y="760.9" class="footprint" transform="rotate(90 352,760.9)">Eco-Footprint: 0.15 Hectares</text>

<rect x="0" y="986.2" width="113.8" height="113.8" fill="#21201c"></rect>

<text x="240.8" y="1010.2" class="title">HAMSTER</text>

<text x="206.8" y="1026.2" class="subtext">Eco-footprint:</text>

<text x="212.8" y="1046.2" class="subtext">0.014 hectares</text>

How did I calculate that first object's numbers?

How do you use that to calculate the rest?

Write out some explanation or rough equations here.

I divided 1048.8 by the square root of 1.1 and then used that value to multiply the square root of each hectare amount for every square to find its width and height. I then used the difference in x and y value of text vs the original rectangle to determine spacing for the rest of the text. i used (1100 - height) to determine the y value to justify each square to the lower left corner