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.15l20.36.42L151 372.73l18.97-40.3-6.28-37.38-51.6-18.27z" />
<path fill-opacity=".98" stroke="#000" stroke-width=".26" d="M58.55 377.2s-29.3 4.24-34.4-30.56c-3-20.5 20.53-61.27 31.12-63.84 10.59-2.57-2.56-13.8 7.38-20.53 9.95-6.74 35.93-20.21 74.75-15.08 16.36 3.2 34-2.89 36.9.96 3.52 5.46-2.25 13.48-5.78 16.36-3.53 2.9-13.16 6.3-12.51 11.55.81 5.34 31.41 2.6 34.32 1.75 8.3-2.42 14.29-8.13 20.69-5.25 7.06 3.2 5.21 37.57-.47 49.38-16.1 33.46-33.96 38.04-33.86 40.7.15 3.98 11.4-.6 12.68 2.93 1.29 3.53-6.27 19.1-38.18 31.35-12.55 4.81-45.16 6.42-50.29 5.14-.1-11.58-1.27-16.3.4-16.98 5.07-2.1 22.05-8.08 26.78-11.2 5.82-3.86 12.15-14.72 13.17-20.82 3.08-20.34-5.37-46.68-7.16-50.12-3.45-5.5-17.82-11.4-35.72-10.5-8.4.41-31.88-1.11-31.8.64.2 3.95 7.47.95 10.31 9.22 1.62 4.71 1.4 11.14.76 12.75-.64 1.6-7.98-1.56-10.24 4.66-.66 1.82 6.16 2.7 10.26 3.43.72 4.7 1.16 14.36-1.32 17.42-6.89 8.5-17.79 36.64-17.79 36.64z" filter="url(#a)" />
<g transform="translate(-16.91 88.14)">
<ellipse cx="154.42" cy="233.78" rx="16.7" ry="16.76" />
<path stroke="#000" stroke-width=".26" d="M132.3 226.54c1.9-1.72 5.28-1 7.8.4.75-1.48.88-2.4 2.04-4.16-1.21-1.55-6.3-5.31-11.61-1.89.2 1.96 1.07 5.15 1.77 5.65z" />
<ellipse cx="115.93" cy="228.69" rx="16.7" ry="16.76" />
<path stroke="#000" stroke-width=".26" d="M102.56 222.92L74.5 226.3v5.2l26.8-2.11z" />
</g>
<path fill="#fff" stroke="#000" stroke-width=".26" d="M97.02 302.38c9.68-.93 15.57 8.6 15.35 8.77-3.65-3.93-9.9-7.18-15.35-8.77z" />
<path stroke="#000" stroke-width=".26" d="M100.37 351.56c.62.87 4.44-.99 6.33-1.36 1.96-.39 4.42-.71 10.56 1.64 1.97.6 3.89-.27 5.05.15 1.17.4 3.1 2.85 2.82 3.85-.27 1-2.33 1.79-3.1 2.13-.75.35-10.3-1.37-10.65-1.44-.84-.18-2.12.57-1.27 1.44 1.21 1.2 6.43 3.06 12.47 2.55 1.28-.24 7.73-2.08 8.44-5.18.24-2.14-7.12-10.1-8.91-10.58-1.79-.48-3.23.9-5.02.7-1.8-.21-2.79-1.72-5.4-2-1.14-.02-11.94 7.24-11.32 8.1zM109.06 361.62c-.17.75 5.52 1.6 7.01 1.78 1.5.18 7.72.74 7.8.09.12-.95-6.33-1.73-7.62-1.92-1.29-.19-7-.85-7.2.05z" />
<path d="M120.61 339.4l-.74-1.2s4.9-3.71 5.7-4.5c.79-.79 2.76.36 2.76.36s-.2 1.17-.52 1.6c-1.7 1.91-7.2 3.74-7.2 3.74z" />
<path fill="#fff" fill-opacity=".98" d="M121.99 315.5c-.7 3 .02 6.51.94 9.59 1.67 5.57 3.36 3.44 3.43 7.82-.05 1.82-4.58 4.95-6.3 5.12-1.71.16-.68-2.47-.98-4.2-.43-2.44 1.58-18.72 2.9-18.33z" />
<path stroke="#000" stroke-width=".26" d="M119.8 333.46c1.29 1.5-5.03 4.73-6.25 3.23-1.1-2.05 4.97-4.72 6.25-3.23z" />
<path fill="#999" d="M64.63 65.63s41.42 8.79 43.38 9.63c1.95.83 10.18 9.76 11.15 17.7.98 7.96 1.12 14.37-.28 17.02-1.4 2.65-6.3 3.25-7.5 4.32-.24 2.22 7.08 12.97 7.36 15.34.28 2.37-2.93 3.9-2.65 4.88.28.98 4.88 4.47 3.9 6.84-.97 2.37-.83 2.23-.83 2.23-.1 8.37-38.42 4.15-42.95 0-1.14-1.04-1.95 0-.7 1.67 1.26 1.68 7.81 7.67 8.09 8.37.28.7-8.09 23.15-8.09 23.15l20.36.42 45.88-29.57 18.97-40.3-6.28-37.37-51.6-18.27z" />
<path fill-opacity="1" stroke="#000" stroke-width=".26" d="M49.31 152.1s-29.3 4.24-34.4-30.55c-3-20.5 20.53-61.28 31.12-63.85 10.59-2.56-2.56-13.8 7.38-20.53 9.95-6.74 35.93-20.21 74.75-15.08 16.36 3.21 34-2.88 36.9.97 3.52 5.45-2.25 13.47-5.78 16.36-3.53 2.88-13.16 6.3-12.51 11.55.81 5.33 31.41 2.59 34.32 1.74 8.3-2.41 14.29-8.13 20.69-5.25 7.06 3.21 5.21 37.58-.47 49.38-16.1 33.47-33.96 38.05-33.86 40.7.15 3.98 11.4-.6 12.68 2.93 1.29 3.53-6.27 19.1-38.18 31.35-12.55 4.82-45.16 6.42-50.29 5.14-.1-11.58-1.27-16.3.4-16.98 5.07-2.09 22.05-8.07 26.78-11.2 5.82-3.86 12.15-14.72 13.17-20.82 3.08-20.34-5.37-46.68-7.16-50.12-3.45-5.5-17.82-11.4-35.72-10.5-8.4.42-31.88-1.11-31.8.65.2 3.95 7.47.94 10.31 9.21 1.62 4.71 1.4 11.15.76 12.75-.64 1.6-7.98-1.56-10.24 4.66-.66 1.82 6.16 2.7 10.26 3.43.72 4.7 1.16 14.36-1.32 17.42-6.89 8.5-17.79 36.64-17.79 36.64z" />
<g transform="translate(-26.15 -136.96)">
<ellipse cx="154.42" cy="233.78" rx="16.7" ry="16.76" />
<path stroke="#000" stroke-width=".26" d="M132.3 226.54c1.9-1.72 5.28-1 7.8.4.75-1.48.88-2.4 2.04-4.16-1.21-1.55-6.3-5.31-11.61-1.89.2 1.96 1.07 5.15 1.77 5.65z" />
<ellipse cx="115.93" cy="228.69" rx="16.7" ry="16.76" />
<path stroke="#000" stroke-width=".26" d="M102.56 222.92L74.5 226.3v5.2l26.8-2.11z" />
</g>
<path fill="#fff" stroke="#000" stroke-width=".26" d="M87.78 77.28c9.68-.93 15.57 8.6 15.35 8.77-3.65-3.93-9.9-7.17-15.35-8.77z" />
<path stroke="#000" stroke-width=".26" d="M91.13 126.47c.62.86 4.44-1 6.33-1.37 1.96-.39 4.42-.71 10.56 1.64 1.97.6 3.89-.26 5.05.15 1.17.41 3.1 2.85 2.82 3.85-.27 1-2.33 1.79-3.09 2.13-.76.35-10.32-1.37-10.66-1.44-.84-.18-2.12.57-1.27 1.44 1.21 1.2 6.43 3.06 12.47 2.55 1.28-.24 7.73-2.07 8.44-5.17.24-2.15-7.12-10.1-8.91-10.58-1.79-.49-3.23.89-5.02.68-1.8-.2-2.79-1.7-5.4-1.98-1.14-.03-11.94 7.23-11.32 8.1zM99.82 136.52c-.17.75 5.52 1.6 7.01 1.78 1.5.18 7.72.74 7.8.1.12-.96-6.33-1.73-7.62-1.92-1.29-.2-7-.86-7.2.04z" />
<path fill="#fff&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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