add example on how to overlay an image with a mask

README.md

@@ -89,6 +89,8 @@ You may also have a look at the following examples for in-depth demonstrations o
   utilizes the great but non-async API from <https://replicate.com> to perform voice-to-text transcription and generate images from prompts with Stable Diffusion
 - [3D scene](https://github.com/zauberzeug/nicegui/blob/main/examples/3d_scene/main.py):
   creates a 3D scene and loads an STL mesh illuminated with a spotlight
+- [Image Mask Overlay](https://github.com/zauberzeug/nicegui/blob/main/examples/image_mask_overlay/main.py):
+  shows how to overlay an image with a mask
 
 ## Why?
 

examples/image_mask_overlay/main.py

@@ -0,0 +1,27 @@
+#!/usr/bin/env python3
+from nicegui import ui
+
+img_src = 'https://i.stack.imgur.com/PpIqU.png'
+mask_src = 'https://i.stack.imgur.com/OfwWp.png'
+
+with ui.row().classes('full-width items-center'):
+    ui.image(img_src).style('width: 25%')
+    ui.label('+').style('font-size:18em')
+    ui.image(mask_src).style('width: 25%')
+    ui.label('=').style('font-size:18em')
+    image = ui.interactive_image(img_src).style('width: 25%')
+    image.svg_content = f'''
+        <image xlink:href="{mask_src}" width="100%" height="100%" x="0" y="0" filter="url(#mask)" />
+        <filter id="mask">
+            <feComponentTransfer>
+                <feFuncR type="linear" slope="40" intercept="-(0.5 * 40) + 0.5"/>
+                <feFuncG type="linear" slope="40" intercept="-(0.5 * 40) + 0.5"/>
+                <feFuncB type="linear" slope="40" intercept="-(0.5 * 40) + 0.5"/>
+                <feFuncR type="linear" slope="1000"/>
+            </feComponentTransfer>
+    <feColorMatrix type="matrix" values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0  3 -1 -1 0 0" />
+        </filter>
+    '''
+ui.markdown('Images where discoved through <https://stackoverflow.com/a/57579290/364388>.').classes('mt-4')
+
+ui.run()