<!-- feComposite reference image -->
<style>
* { margin: 0; padding: 0; }
svg { width: 700px;}
</style>

<body>
<svg viewBox="0 0 700 100">

<path d="M 0,0 h75 v75 h-75 z" fill="#f00" />
<path d="M 25,25 h75 v75 h-75 z" fill="#00f" />

<g transform="translate(100,0)">
<path d="M 25,25 h50 v50 h-50 z" fill="#00f" />
</g>

<g transform="translate(200,0)">
<path d="M 0,0 h75 v75 h-75 z" fill="#f00" />
<path d="M 25,25 h50 v50 h-50 z" fill="#00f" />
</g>

<g transform="translate(300,0)">
<path d="M 75,25 h25 v75 h-75 v-25 h50 z" fill="#00f" />
</g>

<g transform="translate(400,0)">
<path d="M 0,0 h75 v25 h-50 v50 h-25 z" fill="#f00" />
<path d="M 75,25 h25 v75 h-75 v-25 h50 z" fill="#00f" />
</g>

<g transform="translate(500,0)">
<path d="M 0,0 h75 v75 h-75 z" fill="#ff8080" />
<path d="M 25,25 h75 v75 h-75 z" fill="#8080ff" />
<path d="M 25,25 h50 v50 h-50 z" fill="#b0b" />
</g>

<g transform="translate(600,0)">
<path d="M 0,0 h75 v75 h-75 z" fill="#f00" />
<path d="M 25,25 h75 v75 h-75 z" fill="#00f" />
<path d="M 25,25 h50 v50 h-50 z" fill="#f0f" />
</g>

</svg>