SVG, 562 bytes

This is my first time golfing SVG (or any XML, 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 factor of 4 would also work but would take 8 more bytes, if I have counted correctly).

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.5: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 0 26 26"> <style>#b{fill:red}#c{fill:blue}</style> <use l:href="#a" x="3" y="6"/> <use l:href="#a" x="6" y="12"/> <use l:href="#e" x="12"/> <g id="e"> <use l:href="#a" x="-3" y="18"/> <use l:href="#a" x="-9" y="18"/> </g> <use l:href="#a" x="-6" y="12"/> <use l:href="#a" x="-3" y="6"/> <g id="a"> <path id="b" d="m0,0h4l2,4h-4z"/> <path id="c" d="m0,0l2,4l-2,4l-2-4z"/> <path d="m2,4h4l-2,4h-4z"/> </g> <use l:href="#b" x="3" y="6"/> <use l:href="#c" x="3" y="6"/> </svg> 

Result