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="SourceGraphic" in2="result91" result="result5" scale="20" xChannelSelector="R" />
<feComposite in="SourceGraphic" in2="result5" operator="atop" />
</filter>
<filter id="c" width="1.6" height="2" x="-.3" y="-.5" color-interpolation-filters="sRGB">
<feTurbulence baseFrequency=".3" numOctaves="5" result="result1" type="fractalNoise" />
<feDisplacementMap in="SourceGraphic" in2="result1" scale="10" xChannelSelector="R" yChannelSelector="G" />
</filter>
</defs>
<path fill="#999" d="M73.87 290.73s41.42 8.79 43.38 9.62c1.95.84 10.18 9.76 11.15 17.71.98 7.95 1.12 14.37-.28 17.02-1.4 2.65-6.3 3.25-7.5 4.32-.24 2.21 7.08 12.97 7.36 15.34.28 2.37-2.93 3.9-2.65 4.88.28.98 4.88 4.46 3.9 6.84-.97 2.37-.83 2.23-.83 2.23-.1 8.37-38.42 4.14-42.95 0-1.14-1.04-1.95 0-.7 1.67 1.26 1.67 7.81 7.67 8.09 8.37.28.7-8.09 23.15-8.09 23.1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0