<svg width="1000" height="1015">

<style>

rect {

stroke: white;

stroke-width: 2px;

x="10"

text {

font-family: 'Noto Sans', sans-serif;

font-weight: 300;

}

path {stroke: #FFFFFF;

fill: none;}

tspan {baseline-shift: super;

font-size: 10px}

.title {x="10";

fill: #000000}

.square_title {fill: #FFFFFF}

.inner {text-anchor: end}

.eco {writing-mode: tb;

fill: #FFFFFF;

font-size: 20px}

.detail {fill: #FFFFFF;

font-size: 18px;

text-anchor: end}

</style>

<!-- BOXES -->

<!-- y = 1010-height -->

<!-- Hectares^1/2 * 896.25483389098628 = pixels -->

<!-- 1.04880884817 hectares^1/2 -->

<rect width="940" height="940" y="70" style="fill:#a5620b;" />

<!-- 0.91651513899 hectares^1/2 -->

<rect width="821" height="821" y="189" style="fill:#c29657;" />

<!-- 0.64031242374 hectares^1/2 -->

<rect width="574" height="574" y="436" style="fill:#cc1f5e;" />

<!-- unknown, it is ~110% the size of CAT-->

<rect width="382" height="382" y="628" style="fill:#a71949;" />

<!-- 0.38729833462 hectares^1/2 -->

<rect width="347" height="347" y="663" style="fill:#f7991d;" />

<!-- 0.11832159566 hectares^1/2 -->

<!-- Hamster square isn't sized to the area exactly, it is ~20% of Cat square -->

<rect width="69" height="69" y="941" style="fill:#231f20;" />

<!-- TITLES -->

<text font-size=36px y="31" class="title">Land guzzlers</text>

<text font-size=19px y="56" class="title">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>

<!-- BOX TITLES -->

<!-- y= 1000 - height + font-size + 10 -->

<!-- x= width - 5 (add additional 10 for hamster)-->

<text x="935" y="102" font-size=32px class="square_title inner">LARGE DOG</text>

<text x="816" y="219" font-size=30px class="square_title inner">MEDIUM-SIZED DOG</text>

<text x="569" y="464" font-size=28px class="square_title inner">TOYOTA LAND CRUISER</text>

<text x="377" y="654" font-size=26px opacity=.5 class="square_title inner">VOLKSWAGEN GOLF</text>

<text x="342" y="689" font-size=26px class="square_title inner">CAT</text>

<text x="74" y="965" font-size=24px class="square_title">HAMSTER</text>

<!-- ECO-FOOTPRINTS -->

<!-- x= width of box - font-size + 5 -->

<!-- y= y from the box title + 5 -->

<text x="927" y="107" class="eco">Eco-footprint: 1.1 hectares</text>

<text x="808" y="224" class="eco">Eco-footprint: 0.84 hectares</text>

<text x="559" y="469" class="eco">Eco-footprint: 0.41 hectares</text>

<text x="332" y="694" class="eco">Eco-footprint: 0.15 hectares</text>

<text x="74" y="985" font-size=20px fill=#FFFFFF>Eco-footprint:</text>

<text x="74" y="1005" font-size=20px fill=#FFFFFF>0.014 hectares</text>

<!-- PATHS -->

<path d="M500,225 l292,0 l0,64" />

<path d="M251,470 l294,0 l0,46" />

<!-- DETAILS -->

<!-- y= y from box title + 25 (for first line, add font-size after that) -->

<!-- x= path M + l - 5 -->

<text x="787" y="244" class="detail">CONSUMPTION PER YEAR</text>

<text x="787" y="262" class="detail">164kg of meat, 95kg of cereals</text>

<text x="787" y="280" class="detail">43.3m<tspan>2</tspan> of land per 1kg of chicken (more for beef and lamb), 13.4m<tspan>2</tspan> of land per 1kg of cereals</text>

<text x="540" y="489" class="detail">10,000km DRIVEN PER YEAR</text>

<text x="540" y="507" class="detail">55.1 gigajoules (includes energy required to fuel and construct)</text>

</svg>