Blurring and masking an image within a hollow circle shape

I'm currently working on developing a similar example using react-native-svg.

The background image I am using is dynamic and needs a transparent circular mask. Additionally, I want to apply a blur effect to that specific section of the background image. While I have successfully achieved a blurred cutout, I am struggling to create the hollow effect as shown below. Any tips or suggestions would be greatly appreciated.

https://i.sstatic.net/EICIO.png

Code Sample:

  <ImageBackground
    resizeMode="cover"
    source={{ uri: route.params?.image }}
    style={{ flex: 1}}
    blurRadius={0}
  >
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Svg width={300} height={300}>
        <Circle cx={150} cy={150} r={120} fill={"transparent"} />
        <Circle
          cx={150}
          cy={150}
          r={120}
          strokeWidth={60}
          stroke={hexToRgba("#000", "0.4")}
          fill="transparent"
        />
      </Svg>
    </View>
  </ImageBackground>

Expected Output:

https://i.sstatic.net/q6pL4.png

cssreactjsreact-nativesvgreact-native-svg

Answer №1

To enhance the image, you can overlay a blurred version on top of it and apply a circular mask to the overlay.

<svg viewBox="0 0 256 171" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="2" />
    </filter>
    <mask id="m1">
      <circle cx="50%" cy="50%" r="28%" stroke="white" stroke-width="13%" />
    </mask>
  </defs>
  <image id="img" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/512px-Hopetoun_falls.jpg" >
    <title>Photo by DAVID ILIFF, CC BY-SA 3.0 &lt;https://creativecommons.org/licenses/by-sa/3.0&gt;, via Wikimedia Commons</title>
  </image>
  <use href="#img" filter="url(#blur1)" mask="url(#m1)"/>
</svg>

Update

If you're not familiar with react-native-svg, you could utilize their converter SVGR Playground - SVGR. It generates code that incorporates the filter:

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={400}
    viewBox="0 0 256 171"
    {...props}
  >
    <defs>
      <filter id="b">
        <feGaussianBlur stdDeviation={2} />
      </filter>
      <mask id="c">
        <circle cx="50%" cy="50%" r="28%" stroke="#fff" strokeWidth="13%" />
      </mask>
    </defs>
    <image
      id="a"
      width="100%"
      href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/512px-Hopetoun_falls.jpg"
    >
      <title>
        {
          "Photo by DAVID ILIFF, CC BY-SA 3.0 <https://creativecommons.org/licenses/by-sa/3.0>, via Wikimedia Commons"
        }
      </title>
    </image>
    <use filter="url(#b)" href="#a" mask="url(#c)" />
  </svg>
)
export default SvgComponent

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for creating a horizontal card design

Looking to achieve a card style similar to this: http://prntscr.com/p6svjf How can I create this design to ensure it remains responsive? <div class="recent-work"> <img src="work/mercedes.png"> <h3>Modern website concept</h3&g ...

htmlcss

Ways to eliminate the initial digit of a decimal number if it is less than 1

I need assistance with modifying float values by removing the first number if it's lower than 1 In the "OPS" table section, I am calculating the sum of OBP and SLG obtained from a database. https://i.sstatic.net/cYwwW.jpg See the code snippet below ...

javascriptreactjsfrontendjsx

Handling every promise in an array simultaneously

I am facing a problem with my array inside Promise.all. When I try to execute a function for the last iteration of forEach loop, I notice that my count_answers variable is only being set for the last object. This can be seen in the log output; the count_an ...

javascriptreactjs

Opening a Material Dialog automatically scrolls the body to the top of the page

I'm currently using Material UI within a React application and I'm facing an issue where opening a dialog causes the body of my page to scroll to the top. This behavior also occurs when opening a Material Popover or a Material TextBox selector. D ...

cssreactjstwitter-bootstrapmaterial-ui

The slider components have an endless loop feature that only runs once before coming to a

I'm working on creating an infinite slider that loops continuously without the need for navigation buttons. Instead, I plan to allow users to control the slider using touch gestures (although this functionality is not yet implemented in the code snipp ...

javascripthtmlcsssass

Issues with the last-child selector in CSS being unresponsive

I am having trouble applying styles to the final <p> in a specific div. I would like to achieve this without introducing a new class or ID. Despite attempting to use the last-child selector, I have not been successful in accomplishing my goal. I ha ...

htmlcsslesscss-selectors

The React App deployed on the S3 bucket is only displaying the homepage, and it seems like the Hash router is

After deploying my react app on an S3 bucket, I encountered an issue where only the home page would display and all other pages would result in a 404 error. Despite switching from browserHistory to hashHistory, the problem persisted. The console showed a ...

reactjsamazon-s3react-routerreact-router-dompackage.json

What is the proper method for specifying the path to my index.tsx file within a React application?

After using npx create-react-app my-app --template typescript to generate my React app, I decided to reorganize the files by moving them to /src/client and relocating my Express backend to /src/server. However, upon running the relocated React app, I encou ...

reactjstypescript

Utilizing React to modify the functionality of elements in the user interface depending on the size of

In this section, I will provide details about my current project. Tech Stack: NextJs (version below 13), ChakraUI (Utilizing predefined components, mainly Flex) The concept is as follows: After testing different screen sizes and determining when UI eleme ...

reactjsreact-hooksnext.jsresizechakra-ui

Issue with Tailwind causing content to extend beyond screen with horizontal scrolling

I have a React-based NextJS application using Tailwind CSS. There is a page component that displays a list of individuals sorted from A to Ö (Swedish alphabet). In the mobile view, the user experience requires the list of alphabetical letters to be visibl ...

javascriptreactjsnext.jstailwind-css

Having trouble assigning a value in the Material-UI select component

Hello, I am currently working with ReactJS and utilizing MUI select. I am facing an issue where the selected value is not showing up upon submission. https://i.stack.imgur.com/HjBKP.png Issue with Select Box const [selectedOption, setSelectedOption] = ...

reactjsmaterial-ui

The complexity of utilizing the map() function in React causes confusion

While delving into React, I stumbled upon this interesting code snippet: {this.state.sections.map(({title, imageUrl, id, size}) => ( <MenuItem key={id} title={title} imageUrl={imageUrl} size={size}/> ))} I'm intrigued by the use of destruc ...

javascriptreactjs

span element causing border-spacing problem

Is there a way to adjust the spacing between these borders? I've tried using border-spacing but it doesn't seem to be working. https://i.sstatic.net/ZY05g.png {{#each spacing}} <span class='space'> {{business}} ({{Count}}) < ...

javascripthtmlcsshandlebars.js

Top tips for seamless image transitions

Currently working on a slideshow project and aiming to incorporate smooth subpixel image transitions that involve sliding and resizing, similar to the Ken Burns effect. After researching various techniques used by others, I am curious to learn which ones ...

javascriptcanvascssslideshowtransition

Selecting multiple default values in a Material UI Radio button group

<RadioButtonGroup name={currentQuestion.id.toString()} onChange={this.onRadioBtnClick} valueSelected={answerObject ? answerObject.answer : ''} > Hi there! I have a question about the valueSelected prop in the RadioButtonGroup. ...

reactjsmaterial-ui

"Encountered a 'net::ERR_HTTP2_PROTOCOL_ERROR' while trying to load a resource for a React app following an upgrade to Visual Studio 2019 version 16.10.0

Since upgrading to VS 16.10.0 (and then 16.10.1) Community Edition, a React website is no longer functioning within Visual Studio/IIS Express. Interestingly, the exact same code runs perfectly when deployed to an Azure app service. Upon loading the home p ...

reactjsvisual-studio.net-core

"React-pdf throws an error stating that `Buffer` is not defined

I am encountering an issue while trying to utilize the react-pdf library to create pdf files. Upon attempting this, I am facing the following error: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no ...

javascriptreactjsnpmwebpack

develop-react-application web server to send CORS headers on response

In a unique scenario, I'm facing the challenge of needing to handle CORS headers from a server that is a create-react-app server hosting a react app. I have two react applications, app1 (port 3002) and app2 (port 3001), along with one backend (port 3 ...

reactjswebpackcorscreate-react-appwebpack-dev-server

Tips for updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...

javascripthtmlcssclient-sidestatic-html

Every time I attempt to execute route.js in my API folder, I encounter a persistent 404 error

Project Structure: https://i.stack.imgur.com/qMF6T.png While working on my project, I encountered an issue with a component that is supposed to call an API function. However, it seems like the file is not being found. I have double-checked the directory ...

javascriptreactjsnext.js