The SVG Filter turbulence is commonly utilized in CSS filters to create a noise effect, although it fails to provide transparency

I am aiming to create a visually noisy background that is also transparent. Within a div container that encompasses the entire page, I currently have a blue circle contained. My ultimate objective is to blur the circle and animate it within the background using JS, but for now, I am facing challenges. The circle should remain visible, but the texture generated by SVG seems to obstruct this goal. I am reluctant to use z-index to move it to the background since I want the noise effect to be applied to the circle itself, and adjusting opacity does not yield the desired outcome. Does anyone have any suggestions or solutions?

Below is the HTML code snippet:

.background {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  filter: url(#noiseFilter);
}

.circle {
  width: 400px;
  height: 400px;
  background: blue;
  border-radius: 50%;
}
<div class="background">
  <div class="circle"></div>
  <svg style="display: none">
    <filter id='noiseFilter'>
      <feTurbulence 
      type='fractalNoise' 
      baseFrequency='6.29' 
      numOctaves='6' 
      stitchTiles='stitch'/>
    </filter>
  </svg>
</div>

htmlcsssvgfilter

Answer №1

.background {
  background: #555;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: url(#noiseFilter);
  -webkit-backdrop-filter: url(#noiseFilter)
}

.circle {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 50%;
  opacity: 50%
}
<div class="background">
  <div class="wrapper">
    <div class="circle"></div>

    <svg style="display: none">
      <filter id='noiseFilter'>
        <feTurbulence 
          type='fractalNoise' 
          baseFrequency='6.29' 
          numOctaves='6' 
          stitchTiles='stitch'
        />
      </filter>
    </svg>
  </div>
</div>

The challenge encountered in the previous code was that the filter was mistakenly applied to the circle, causing it not to display correctly.

To address this issue, a grey background was utilized along with a backdrop filter on the wrapper to distinctly separate the background from the filter. Consequently, the filter will exclusively affect the background in this scenario.

If interested, I suggest delving into the documentation for backdrop-filter to gain more insights.

UPDATE: The -webkit-backdrop-filter attribute has been included as Safari currently solely supports this feature.

Answer №2

When it comes to CSS, I have discovered a successful approach of using only filter: url(#noise) instead of backdrop-filter.

It may not be the traditional way, but give it a try and see if it yields positive results.

I have encountered situations where using just one method doesn't suffice, so I mix between both filter options to find the optimal solution.

.noise {
    display: flex;
    position: relative;
    filter: url(#noise);
    height: 22.5vh;
    width: 100%;
    opacity: .6;
    bottom: 1.7vh;
}

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

Including Vuetify in my project has triggered a SecurityError, specifically relating to the CSSStyleSheet.cssRules getter being restricted from accessing cross-origin stylesheets

Looking to create a Vue application that opens a CKEditor component in a separate window, I managed to do so following the method outlined in this helpful post. I have even set up a Codesandbox demonstration to showcase the functioning example. However, u ...

cssvue.jsvuejs2vuetify.jscross-domain

My HTML document is not displaying the JavaScript variable as expected

I have created a JavaScript function with several variables and attempted to test it to display the variables in my HTML document. However, I am facing an issue where the variables do not appear as expected. Specifically, I am trying to insert the variable ...

javascripthtml

What is the best way to extract words from a string within a textarea using javascript?

Currently, I am focused on improving my skills in JavaScript and HTML. In one of my projects, there is a text area where the user inputs a CSV format like this: 17845 hello bye 789 After input, I get 17845,hello,bye,789. Now, the challenge is t ...

javascriptjqueryhtmlcsvtextarea

The function parameter in Angular's ngModelChange behaves differently than $event

How can I pass a different parameter to the $event in the function? <div class='col-sm'> <label class="col-3 col-form-label">Origen</label> <div class="col-4"> <select ...

javascriptangulartypescriptfilterngfor

Storing data in the browser's local storage using jQuery without requiring any CSS

I have a form that receives data and I am trying to save the first two pages of received data into localStorage: <form id="myForm" method="post"> Font Size (px): <input id="fontsize" type="text" name="fontsize" /> </form> <s ...

javascriptjquerycsshtml

What is the best way to change the format from yyyy mm dd h:m:s to dd mm yyyy h:m:s?

The date in the MySQL database is stored in the format of now() function as yyyy mm dd hh mm ss. However, I want it to be displayed in the frontend tool as dd mm yyyy hh mm ss. How can I convert it? <?php $addqry=mysql_query("INSE ...

phphtmlmysql

The system encountered a TypeError: Unable to access the 'nativeElement' property as it is undefined

Hello, I am a beginner in Angular 2 and currently working on an image cropping plugin. My goal is to display the image on a canvas element. Below is my HTML code: <div class="row"> <div class="col-sm-6"> <canvas id="layout" width="40 ...

htmlangulartypescripthtml5-canvas

The left column is stationary vertically, but can be scrolled horizontally

On a webpage, there are three columns: left, middle, and right. Only the left column is set to position:fixed, while the others are normal. When vertically scrolling, the left column should remain fixed while the other two scroll. However, when the brows ...

htmlcsslayoutcss-position

Styling Material UI components with CSS is a great way to

I'm facing difficulties while working with Material UI components. Currently, I have a Material UI table and I want to center-align the text within it. The standard CSS of Material UI contains an element named MuiTableCell-root-60 which has a text-a ...

cssmaterial-ui

Display the div only when certain other divs have been clicked

I am fairly new to jQuery (this is my second attempt at using it). I have searched for solutions on Google and StackOverflow, tried several approaches, but still can't solve the last part of my issue. Any assistance or direction would be greatly appre ...

javascriptjqueryhtmlcss

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

I find it puzzling why the alignment between Bootstrap buttons within the Angular 2 CLI project is not working as expected. To address this issue, I followed the instructions to create a new Angular 2 CLI app outlined here: https://angular.io/guide/quicks ...

htmlcssangularbootstrap-4

The positioning of the jumbotron image is off-center

I'm facing an issue with the header code. The image is not centered properly when I switch between different sizes. Is there a way to ensure that the image is centered in all size views? <div class="jumbotron"> <img src="images/hea ...

htmlcsstwitter-bootstrap

Button and input elements within Popover HTML content failing to display

I'm attempting to include a button in a popover, but for some reason, it's not showing up. Is the way I've set it up correct or is there a more effective method? $('#myinput').popover({ trigger : "focus", container : ...

javascripthtmlbootstrap-4

An engaging webpage with a dynamic scroll feature

I recently inherited a dynamic HTML page that utilizes bootstrap and jqxGrid, and it calls server side code to retrieve data. However, after the data is loaded and the jqxGrid is populated, the page automatically scrolls down. Since I got the code from a ...

javascriptjquerycsstwitter-bootstrapjqxgrid

Switching the theme color from drab grey to vibrant blue

How can I change the default placeholder color in md-input-container from grey to Material Blue? I have followed the instructions in the documentation and created my own theme, but none of the code snippets seems to work. What am I doing wrong? mainApp. ...

javascriptcssangularjsangular-materialmean-stack

Altering the ASP DropDownList's background color solely with CSS modifications

Is there a way to change the background colors of dropdownlists in my C# web app using CSS instead of specifying each one individually? In simpler terms, I'm trying to avoid having to write out code like this for multiple dropdowns: private void For ...

c#cssasp.netdropdownbox

The script remains static and does not alter the "href" or "div" content based on the current URL

I am having an issue with my NavMenu on my website. It is a table with images that link to product pages, and I want to change the links and names based on the language of the site. However, the script I wrote for this is not working properly. I have tried ...

javascripthtmlwordpress

Converting a three.js scene into SVG or alternative vector format for export

Can an SVG- or other vector-formatted image be exported from a scene rendered using three.js's WebGLRenderer? What about from a scene derived from CanvasRenderer? If not, how can one set up SVGRenderer with three.js? Creating a new THREE.SVGRenderer( ...

javascriptsvgthree.jswebgl

Issue: The function view.hlp(...) is not recognized within jsrender

Currently, I am utilizing jsrender to map the templates within a grid. In this process, I have incorporated a method call inside jsrender based on a certain condition as shown below: @section scripts{ $.views.helpers({ isMobile: function () { ...

jqueryhtmltemplatesif-statementjsrender

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css