blob: f0ab1ce7086e47f2f2657c6211f4f8460c85321f [file] [log] [blame]
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
<defs>
<filter id="filter" x="25%" y="0%" width="50%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" intercept="0" slope="1"/>
<feFuncG type="linear" intercept="0" slope="0"/>
<feFuncB type="linear" intercept="0" slope="0"/>
<feFuncA type="linear" intercept="0" slope="1"/>
</feComponentTransfer>
</filter>
</defs>
</svg>
<style>
div {
position: absolute;
}
.filtered {
filter: url(#filter);
}
.child {
background-color: gray;
width: 50px;
height: 50px;
position: absolute;
will-change: transform;
}
.p1 {
left: 50px;
top: 50px;
}
.c1 {
transform: translate(0px, 25px);
}
.p2 {
left: 150px;
top: 50px;
}
.c2 {
transform: translate(0px, -25px);
}
</style>
<div class="filtered p1"><div class="child c1"></div></div>
<div class="filtered p2"><div class="child c2"></div></div>