SVG Filters

by Scott Kaye

HTML

<div id="canvas">
    <div id="block"></div>
</div>

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

SCSS

svg {
    display: none;
}

#canvas {
    filter: url(#duplicate); // Duplicator
    height: 100px; // Draw area
    box-shadow: 0 0 100vh transparent; // Repaint entire window
	//outline: 1px dashed lime;
}

#block {
    width: 15px;
    height: 15px;
    background: blue;
	border: 5px solid red;
    margin-top: 100px;
	margin-left: 100px;
    transform-origin: 50px 50px;
    animation: move 1s linear infinite;
}

html {
    background: linear-gradient(#666, #000);
    height: 100%;
}

@keyframes move {
    0% {
    	filter: hue-rotate(0);
        transform: none;
    }
    100% {
    	filter: hue-rotate(360deg);
        transform: rotateZ(360deg);
    }
}