Applying SVG filters in conjunction with CSS transitions

Question

Applying SVG filters in conjunction with CSS transitions

While working on an SVG filter with CSS animation, I utilized the following code:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
   </filter>
 </defs>
</svg>

and applied

filter:url('#goo');

to a container in CSS.

If you want to see it in action, check out this fiddle: https://codepen.io/sergey_mell/pen/MoRMwR

However, I encountered an issue where the animation was contained within a specific area (seemingly based on the initial animation state size). Can anyone provide assistance on how to resolve this problem?

html css animation svg css-transitions

Answer 1

Answer №1

SVG filters are equipped with a specified "filter region" where the effects are implemented. This allocation is essential because some operations, such as gaussian blur, can be quite sluggish, making it necessary to confine the area over which they are computed.

The default filter region of a filter is:

x="-10%" y="-10%" width="120%" height="120%"

To elaborate, this encompasses the filtered element plus a 10% border surrounding its exterior. Anything beyond that boundary will be clipped and remain unseen.

To address this, one must expand the filter region to encompass all pertinent elements. For instance, augmenting the margin to 50% results in:

<filter id="goo" x="-50%" y="-50%" width="200%" height="200%">

This modification ensures proper functioning.

body{
  background:white;
  background-image:url(https://i.imgur.com/d47ZIU3.jpg);
  background-size:cover;
}
.blobs{
  filter:url('#goo');
  position:absolute;
  top:100px;
  left:200px;
}

@keyframes blob-left-top-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(-65px,0);
  }
  62%{
    transform:scale(0.7) translate(-65px,-65px);

  }
  94%{
    transform:scale(1.1) translate(0,0);
  }
}

@keyframes blob-right-top-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(65px,0);
  }
  64%{
    transform:scale(0.7) translate(65px,-65px);
  }
  96%{
    transform:scale(1.1) translate(0,0);
  }
}
@keyframes blob-left-bottom-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(-65px,0);
  }
  66%{
    transform:scale(0.7) translate(-65px,65px);
  }
  98%{
    transform:scale(1.1) translate(0,0);
  }
}

@keyframes blob-right-bottom-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(65px,0);
  }
  68%{
    transform:scale(0.7) translate(65px,65px);
  }
  100%{
    transform:scale(1.1) translate(0,0);
  }
}
.blob{
  position:absolute;
  background:#e97b7a;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
  color:white;
  font-size:40px;
  border-radius:100%;
  margin-top:-50px;
  margin-left:-50px;
  animation:blob-left-top-anim cubic-bezier(0.770, 0.000, 0.175, 1.000) 4s infinite;
}

  
.blob:nth-child(2){
  animation-name:blob-right-top-anim;
}
.blob:nth-child(3){
  animation-name:blob-left-bottom-anim;
}
.blob:nth-child(4){
  animation-name:blob-right-bottom-anim;
}

<div class="blobs">
  <div class="blob">4</div>
  <div class="blob">3</div>
  <div class="blob">2</div>
  <div class="blob">1</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
  </filter>
  </defs>
</svg>

Answer 2

SVG filters are equipped with a specified "filter region" where the effects are implemented. This allocation is essential because some operations, such as gaussian blur, can be quite sluggish, making it necessary to confine the area over which they are computed.

The default filter region of a filter is:

x="-10%" y="-10%" width="120%" height="120%"

To elaborate, this encompasses the filtered element plus a 10% border surrounding its exterior. Anything beyond that boundary will be clipped and remain unseen.

To address this, one must expand the filter region to encompass all pertinent elements. For instance, augmenting the margin to 50% results in:

<filter id="goo" x="-50%" y="-50%" width="200%" height="200%">

This modification ensures proper functioning.

body{
  background:white;
  background-image:url(https://i.imgur.com/d47ZIU3.jpg);
  background-size:cover;
}
.blobs{
  filter:url('#goo');
  position:absolute;
  top:100px;
  left:200px;
}

@keyframes blob-left-top-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(-65px,0);
  }
  62%{
    transform:scale(0.7) translate(-65px,-65px);

  }
  94%{
    transform:scale(1.1) translate(0,0);
  }
}

@keyframes blob-right-top-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(65px,0);
  }
  64%{
    transform:scale(0.7) translate(65px,-65px);
  }
  96%{
    transform:scale(1.1) translate(0,0);
  }
}
@keyframes blob-left-bottom-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(-65px,0);
  }
  66%{
    transform:scale(0.7) translate(-65px,65px);
  }
  98%{
    transform:scale(1.1) translate(0,0);
  }
}

@keyframes blob-right-bottom-anim{
  0%{
    transform:scale(1.1) translate(0,0);
  }
  33%{
    transform:scale(0.9) translate(65px,0);
  }
  68%{
    transform:scale(0.7) translate(65px,65px);
  }
  100%{
    transform:scale(1.1) translate(0,0);
  }
}
.blob{
  position:absolute;
  background:#e97b7a;
  left:50%;
  top:50%;
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
  color:white;
  font-size:40px;
  border-radius:100%;
  margin-top:-50px;
  margin-left:-50px;
  animation:blob-left-top-anim cubic-bezier(0.770, 0.000, 0.175, 1.000) 4s infinite;
}

  
.blob:nth-child(2){
  animation-name:blob-right-top-anim;
}
.blob:nth-child(3){
  animation-name:blob-left-bottom-anim;
}
.blob:nth-child(4){
  animation-name:blob-right-bottom-anim;
}

<div class="blobs">
  <div class="blob">4</div>
  <div class="blob">3</div>
  <div class="blob">2</div>
  <div class="blob">1</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
  </filter>
  </defs>
</svg>

Answer 3

Answer №2

I managed to get it functioning by specifying a width and height for the .blobs container:

.blobs{
  filter:url('#goo');
  position:absolute;
  top:100px;
  left:200px;
  width: 600px;
  height: 600px;
}

You may want to determine the maximum size required and adjust the dimensions accordingly.

Answer 4

I managed to get it functioning by specifying a width and height for the .blobs container:

.blobs{
  filter:url('#goo');
  position:absolute;
  top:100px;
  left:200px;
  width: 600px;
  height: 600px;
}

You may want to determine the maximum size required and adjust the dimensions accordingly.

Answer 5

Answer №3

When a replaced element like an img or svg is not explicitly sized, the browser will assign it a default size of roughly 300px x 150px. To ensure precise pixel sizing or to have the element fill its container, you'll need to define the size using JavaScript or by setting it to 100%, 100% respectively.

Answer 6

When a replaced element like an img or svg is not explicitly sized, the browser will assign it a default size of roughly 300px x 150px. To ensure precise pixel sizing or to have the element fill its container, you'll need to define the size using JavaScript or by setting it to 100%, 100% respectively.

Applying SVG filters in conjunction with CSS transitions

Answer №1

Answer №2

Answer №3

Similar questions

Guide to creating a dynamic illumination using CSS, HTML, and JS

What is the method to extract the content located within the <body> element using requests.get()?

What is the best way to add padding or margins to the heading that is being shown as a table-cell?

Upon clicking the link, my hover function was disabled

Steps for eliminating an element using jQuery from a variable filled with HTML code

Replace character within a table using jQuery

Refreshing metadata without rewriting URL

Alignment of slider arrows in a CSS carousel with Bootstrap 4.1.1

Framework7 disables the jQuery.appear plugin

Leveraging Jsoup for HTML parsing

What is the process for implementing an image as the background instead of a color for each column in a Google chart?

Repair the masthead background during overscroll

The progress indicator fails to activate during the first step

As you scroll, the header gradually reduces in size, but at the point where the reduction occurs, a slight flick

Identifying and detecting Label IDs when clicked using the for tag

Challenges Arising from CGI Scripts

What is the best way to format this <li> element so that the second line of text starts directly below the beginning of the first line, rather than below the bullet point itself?

Implement a dynamic table in real-time with jQuery AJAX by fetching data from JSON or HTML files

Replacing strings with file_get_contents in PHP is a common practice for retrieving

Immersive full-screen YouTube video embedded as hero background