SVG Filters

by Scott Kaye

HTML

Just one canvas:
<div id="canvas">
    <div id="block">Just one block</div>
</div>

<svg>
    <filter id="duplicate">
        <feOffset in="SourceGraphic" dx="75" dy="50" result="offset" />
		<feOffset in="SourceGraphic" dx="25" dy="25" result="offset2" />
		<feMerge>
			<feMergeNode in="SourceGraphic" />
			<feMergeNode in="offset" />
			<feMergeNode in="offset2" />
		</feMerge>
    </filter>
</svg>

SCSS

svg {
    display: none;
}

#canvas {
    filter: url(#duplicate);
    height: 200px;
	border: 1px solid red;
}

#block {
    width: 150px;
    background: blue;
	padding: 5px;
	color: #fff;
	border: 1px solid lime;
}