blob: 64cc2695928d9a0fa4cf108498dc0d7324866dcf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="grey"/>
<g transform="translate(80 30)">
<!-- active blob group with clip path and mask -->
<clipPath id="c4" clipPathUnits="userSpaceOnUse">
<rect x="-80" y="100" width="100" height="100"/>
</clipPath>
<mask id="m4">
<rect x="-80" y="100" width="100" height="100" fill="white"/>
<rect x="-60" y="120" width="40" height="40" fill="black"/>
</mask>
<g mask="url(#m4)" clip-path="url(#c4)">
<g style = "will-change: opacity;">
<rect x="-80" y="100" width="100" height="100" fill="blue"/>
</g>
</g>
<!-- active blob group with mask only -->
<mask id="m5">
<rect x="60" y="100" width="100" height="100" fill="white"/>
<rect x="80" y="120" width="40" height="40" fill="black"/>
</mask>
<g mask="url(#m5)">
<g style = "will-change: opacity;">
<rect x="60" y="100" width="100" height="100" fill="blue"/>
</g>
</g>
<!-- active item with clip path only -->
<clipPath id="c6" clipPathUnits="userSpaceOnUse">
<rect x="180" y="100" width="100" height="100"/>
</clipPath>
<g clip-path="url(#c6)">
<g style = "will-change: opacity;">
<rect x="180" y="100" width="100" height="100" fill="blue"/>
</g>
</g>
</g>
</svg>
|
