Skip to content

Instantly share code, notes, and snippets.

@patsma
Created February 8, 2020 15:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patsma/e5a6ee9eb31f9cfc916f8f278ab71a09 to your computer and use it in GitHub Desktop.
Save patsma/e5a6ee9eb31f9cfc916f8f278ab71a09 to your computer and use it in GitHub Desktop.
Dynamically add filter to your SVG
function setSvgAttrs() {
let svg = document.getElementsByTagName('svg')[0];
gsap.set(svg, {attr: {viewBox: '0 0 970 250'}});
const background01 = document.querySelector('#background01');
function createFilter() {
const svgns = "http://www.w3.org/2000/svg";
let filter = document.createElementNS(svgns, "filter");
let defs = document.createElementNS(svgns, "defs");
let gaussian = document.createElementNS(svgns, "feGaussianBlur");
gaussian.setAttribute("stdDeviation", '10');
filter.setAttribute("id", "blur-image-effect");
svg.appendChild(defs);
defs.appendChild(filter);
filter.appendChild(gaussian);
}
function applyFilter(elem, filterId) {
elem.style.filter = "url(#" + filterId + ")";
return elem;
}
createFilter();
applyFilter(background01, 'blur-image-effect');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment