SVG to create a gradient mask that appears transparent

I require assistance with working on svg's. I have a "background image" with another "image" layered over it. The "image" needs to have a hole cut out of it so that the background image can shine through. I managed to achieve this by utilizing svg:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
<title>Title of the document</title>
<style>
  body{
    background-repeat: no-repeat;
    background-size: cover;
  }
   #svg-door {
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
    background-size: cover;
    box-sizing: border-box;
    padding: 100px;
    width: 100%;
    height: 500px;
  }
  #wood {
    border-radius: 50%;
  }
</style>
  </head>
 <body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
  <defs>
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
      <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
    </pattern>
  </defs>
  <path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z "
        fill="url(#wood)" fill-rule="evenodd"/>
</svg>
</body>

I was unable to utilize mask filters of css due to browser compatibility issues. I prefer not to use a svg/js framework.

Everything is going well so far. Now, I would like to take it a step further.

I want the hole to have a transparent gradient, creating softer borders for the inner rects. I am unsure how to achieve this.

Additionally, I would like to animate the hole to gradually increase in size over time. I am considering using js for this. Is there an alternative method? Perhaps by altering the entire html structure?

Any assistance is welcome.

Answer №1

Applying masks to SVG elements is seamless and does not pose any compatibility issues. While there may be browser compatibility concerns when applying SVG masks to HTML elements, this is not the case when used with SVG elements.

Utilizing a mask is the ideal resolution for your current dilemma. By incorporating a blur filter to a rectangle and utilizing it as a mask, you can achieve the desired soft edges for the hole.

  body{
    background-repeat: no-repeat;
    background-size: cover;
  }
   #svg-door {
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
    background-size: cover;
    box-sizing: border-box;
    padding: 100px;
    width: 100%;
    height: 500px;
  }
  #wood {
    border-radius: 50%;
  }
<
<body background="https://www.w3schools.com/css/img_fjords.jpg" >

<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
  <defs>
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
      <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
    </pattern>
    
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/>
    </mask>

    <filter id="hole-blur">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>

  <path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/>
</svg>

</body>

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

Using ng-repeat data to populate another function

I am looking to transfer the details of an order shown in an ng-repeat to another function within my controller. Currently, it works for the first item in the array. How can I extend this functionality to display any order currently visible on the page? W ...

Troubleshooting the issue of process.nextTick not being recognized in Calgolia places.js

After successfully implementing Algolia's places.js in my Angular 7 project using NPM, I encountered an issue. I have integrated a form where one of the fields should be an input. <form [formGroup]="myForm"> <pre style="color: white; b ...

How can I access a store getter in Vue after a dispatch action has finished?

I am currently utilizing Laravel 5.7 in combination with Vue2 and Vuex. While working on my project, I have encountered an issue where Vue is not returning a store value after the dispatch call completes. The workflow of my application is as follows: Wh ...

What are the recommended techniques for utilizing prototypal and prototype-based inheritance in modern JavaScript (ES6) and TypeScript?

Some older discussions on Javascript prototypal inheritance & delegation can be found below: Benefits of prototypal inheritance over classical? classical inheritance vs prototypal inheritance in javascript I am curious about the current (2018) recom ...

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

Creating a static website utilizing React. Description I am looking to incorporate a visual effect into the website pages, similar to the one demonstrated below. visual effect The goal is to design a rectangular background with triangles cut out from it ...

Bootstrap: adaptable card design

I am currently working on replicating a card design similar to this one from WIX using bootstrap. I encountered 2 issues: Initially, the card only touches the contact bar at full screen. However, as I reduce the size of the screen, the card begins to floa ...

JavaScript code to read a .txt file

Is it possible to use JavaScript to read a text file directly with the file path provided in the code, rather than selecting the file from an open file window? ...

How would the input value change if the clock time changed?

I am working with dynamic inputs that allow me to add and delete rows with inputs. These inputs include material-ui timepickers, which have an icon of a clock next to the input field. When I click on the clock icon, a clock widget appears. However, the val ...

Analyzing the string's worth against the user's input

I need help figuring out how to save user input on a form (email and password) as variables when they click "Register", so that the data can be used later if they choose to click "Login" without using default information. I am working on this project for s ...

Why would someone opt to utilize process.env.PORT in their code?

Setting the environment variable PORT to a specific value, such as set PORT=5000, provides explicit instructions on which port the program should use. How does this method differ from simply instructing it to use port 3000? ...

When the tailwind utilities are implemented, they do not appear on the screen

Recently, I embarked on a project using Tailwindcss/Next.js and encountered an issue when trying to apply a box-like shadow to a button with a new utility in pure CSS. Despite my efforts, the changes don't seem to take effect. Can you spot what I migh ...

The process of using Jest to test whether a React component correctly renders a list

I've been diving into the world of unit testing and recently developed a small React application that showcases a list of Pokemon. My goal is to create a unit test that verifies if the list renders correctly. However, when I generate a snapshot, it on ...

Do not ask for confirmation when reloading the page with onbeforeunload

I am setting up an event listener for the onbeforeunload attribute to show a confirmation message when a user attempts to exit the page. The issue is that I do not want this confirmation message to appear when the user tries to refresh the page. Is there ...

Tips for passing a timestamp to a Postgresql DB using a Button in a Form instead of a traditional rails time_select box

I am currently developing a CAD App in Rails 4 with Ruby 2. The goal is to provide users with a button on the screen to log an on-scene time and clear scene time, especially since most users will be using touch screen computers. Instead of using the defaul ...

HTML source does not contain nested link elements for linked areas with nested hyperlinks

I want to create a visually and functionally appealing hyperlink within a larger rectangular shape that spans the full width of the page and is also a hyperlink itself. Below, you'll find an ASCII-art representation of what I'm trying to achieve: ...

Discovering the geometric boundaries of a body of text

Seeking help with determining the geometric bounds of text inside hyperlinks in an InDesign document. I've tried to do this using ExtendScript but haven't had any luck. // Loop through and export hyperlinks in the document for (k = 0; k < myD ...

Issue: Unrecognized element type in next.js while starting development server

Every time I run npm run dev, I encounter the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from th ...

Issue with CSS for Pagination and Content Display

When I print an HTML page, I want to include custom text in the header of all printed pages. @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* Page title ...

Find the names of keys which have a value of true in reactjs

Greetings, I have a JSON file that contains information about different components. I am trying to extract only the Dashboard and Datatable sections where the "visible" attribute is set to true. { "MTs": { "Dashboard": { "id": 1, "visible ...

AngularJS: Calculate the total sum of array elements for generating charts

When using tc-angular-chartjs, I have successfully implemented a pie chart but am struggling to sum the label values for proper display. Additionally, while I can create a bar chart using their example, I encounter issues when trying to use external data f ...