svg过滤器效果-html代码-BFW代码库

svg过滤器效果

代码语言：html

代码描述：svg过滤器效果

代码标签：

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");
body {
  font-family: Inconsolata, sans-serif;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction:column;
  height:100vh;
  padding:0;
  margin:0;
  background: #21034f;
  background: radial-gradient(ellipse at center, #fff 0%,#fff 53%,#bbb 100%);;
}
svg {
  width:500px;
}
</style>

</head>
<body translate="no">
<h2>Experiments with SVG filters</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499.69 421.27">
<defs>
<filter id="a" width="1.3" height="1.3" x="-.15" y="-.15" color-interpolation-filters="sRGB">
<feTurbulence baseFrequency=".1" numOctaves="5" result="result1" type="fractalNoise" />
<feGaussianBlur result="result2" stdDeviation="2" />
<feDisplacementMap in="SourceGraphic" in2="result2" scale="50" xChannelSelector="R" yChannelSelector="B" />
</filter>
<filter id="b" width="1.4" height="1.4" x="-.2" y="-.2" color-interpolation-filters="sRGB">
<feTurbulence baseFrequency=".05" numOctaves="2" result="result91" type="fractalNoise" />
<feDisplacementMap in=&quo.........完整代码请登录后点击上方下载按钮下载查看