SVG, 562 540 520 504 487 473 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement; blowing up all measurements by a suitable factor would also work but would take more bytes. Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path fill="red" d="m9,5H3V1h4z"/><path fill="blue" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg> 

Result