Skip to content

Instantly share code, notes, and snippets.

@mstange

mstange/filter-extract-subrect-datasourcesurface.html

Created January 24, 2019 23:12
Show Gist options
  • Save mstange/56ac08f3fa80007f5178e6ba20a3f057 to your computer and use it in GitHub Desktop.
Save mstange/56ac08f3fa80007f5178e6ba20a3f057 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
filter-extract-subrect-datasourcesurface.html
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE HTML>
<html>
<title>Use two different pieces from the sourceImage in two different filter nodes</title>
<head>
<style>
.filtered {
width: 200px;
height: 100px;
background: red;
filter: url(#f);
}
</style>
</head>
<body>
<div class="filtered"></div>
<svg>
<defs>
<filter id="f" x="0" y="0" width="200" height="100"
filterUnits="userSpaceOnUse" filterPrimitiveUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feOffset x="10" y="10" width="80" height="80" in="SourceGraphic" result="piece1"/>
<feOffset x="110" y="10" width="80" height="80" in="SourceGraphic" result="piece2"/>
<feComposite in="piece1" in2="piece2"/>
<feColorMatrix values="0 1 0 0 0
1 0 0 0 0
0 0 1 0 0
0 0 0 1 0"/>
</filter>
</defs>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment