How can I give a glassmorphism effect to an svg?

[ahmetkuslular]

I need the glassmorhism effect for a custom tabbar. I couldn't get the result I wanted even when I blurred. how can I do that ?

<Group transform={fitbox('contain', src, dst)} layer={ <Paint> <Blur blur={2}> <ColorMatrix matrix={OpacityMatrix(0.9)} /> </Blur> </Paint> }> <ImageSVG svg={tabbar} x={-10} y={-80} /> </Group>

[wcandillon]

You would need to use backdrop filters: https://shopify.github.io/react-native-skia/docs/backdrops-filters We also have a video tutorial on the topic: https://www.youtube.com/watch?v=ao2i_sOD-z0

…

On Tue, Sep 5, 2023 at 3:19 AM Ahmet Kuslular ***@***.***> wrote: I need the glassmorhism effect for a custom tabbar. I couldn't get the result I wanted even when I blurred. how can I do that ? <Group transform={fitbox('contain', src, dst)} layer={ <Paint> <Blur blur={2}> <ColorMatrix matrix={OpacityMatrix(0.9)} /> </Blur> </Paint> }> <ImageSVG svg={tabbar} x={-10} y={-80} /> </Group> [image: simulator_screenshot_531A81C9-2E60-4702-95C6-B4D08D6FFEC7] <https://user-images.githubusercontent.com/17436691/265559510-d52d24d4-baf9-49e3-9d22-6fe5aaacd2de.png> — Reply to this email directly, view it on GitHub <#1820>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVTDGUTCBNI3AYLZJOTXYZ43NANCNFSM6AAAAAA4LAV7UQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[ahmetkuslular]

I tried but no result

 <Group transform={fitbox('contain', src, dst)}>
        <ImageSVG svg={tabbar} x={-10} y={-80} />
        <BackdropBlur blur={4} clip={src}>
          <Fill color="rgba(0, 0, 0, 0.2)" />
        </BackdropBlur>
      </Group>

[swami-laxman]

is your background a rn-skia node?
It will work only for canvas items.

[ahmetkuslular]

no, unfortunately :/

[wcandillon]

I added a test to see if it works as expected: ``` <Fill color="white" /> <Circle cx={0} cy={0} r={height / 2} color="cyan" /> <BackdropBlur blur={30}> <Group transform={fitbox("contain", src, dst)}> <ImageSVG svg={tiger} x={0} y={0} width={800} height={800} /> </Group> </BackdropBlur> ``` Maybe the issue as @laxman-stan mentioned is that you are trying to do it on regular views.

…

On Tue, Sep 5, 2023 at 12:15 PM Laxman-stan ***@***.***> wrote: is your background a rn-skia node? It will work only for canvas items. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>