Skip to content
Permalink
master
Switch branches/tags

cloud/ypylhny.html

Go to file
 
 
Cannot retrieve contributors at this time
88 lines (84 sloc) 4.3 KB
Raw Blame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>云破月来花弄影</title>
<style>
body {
background: #1d2b29;
width: 100vw;
height: 100vh;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<svg width="2000px" height="1000px">
<defs>
<circle id="whitemoon" cx="350" cy="100" r="40" fill="white" />
<circle id="greymoon" cx="350" cy="100" r="20" fill="grey" fill-opacity="0.25"
filter="url(#filter-greymoon)" />
<ellipse id="cloudback" cx="260" cy="130" rx="180" ry="50" fill="white" fill-opacity="0.95"
filter="url(#blur-cloud)" />
<ellipse id="cloudmid" cx="260" cy="140" rx="140" ry="30" fill="#9EA8B3" fill-opacity="0.5"
filter="url(#blur-cloud)" />
<ellipse id="cloudfront" cx="260" cy="160" rx="100" ry="20" fill="black" fill-opacity="0.2"
filter="url(#blur-cloud)" />
<filter id="blur-moon">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<filter id="blur-greymoon" width="350%" height="250%" x="-100%" y="-100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="blur-cloud" width="350%" height="250%" x="-100%" y="-100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
<filter id="blur-huazhi">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
</filter>
<filter id="filter-greymoon" width="350%" height="250%" x="-100%" y="-100%">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="9" seed="3" />
<feDisplacementMap in="SourceGraphic" scale="120" />
</filter>
<filter id="filter-back" width="350%" height="280%" x="-100%" y="-100%">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="0" />
<feDisplacementMap in="SourceGraphic" scale="140" />
</filter>
<filter id="filter-mid" width="350%" height="250%" x="-100%" y="-100%">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="0" />
<feDisplacementMap in="SourceGraphic" scale="120" />
</filter>
<filter id="filter-front" width="350%" height="250%" x="-100%" y="-100%">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="0" />
<feDisplacementMap in="SourceGraphic" scale="100" />
</filter>
<filter id="huazhishadow" x="0" y="0" width="300%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="220" dy="0" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
<feBlend in="SourceGraphic" in2="blurOut" mode="darken" />
</filter>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<g id="moon">
<use xlink:href="#whitemoon" />
<use xlink:href="#whitemoon" filter="url(#blur-moon)" />
<use xlink:href="#greymoon" filter="url(#blur-greymoon)" />
</g>
<g id="cloud">
<use xlink:href="#cloudback" filter="url(#filter-back)" />
<use xlink:href="#cloudmid" filter="url(#filter-mid)" />
<use xlink:href="#cloudfront" filter="url(#filter-front)" />
</g>
</defs>
<image xlink:href="https://raw.githubusercontent.com/wphmoon/cloud/master/yuanqiang1.png" x="0" y="50" width="400"/>
<use xlink:href="#moon" />
<use xlink:href="#cloud" />
<image xlink:href="https://raw.githubusercontent.com/wphmoon/cloud/master/huazhi1.png" x="200"y="400" width="100"></image>
<image xlink:href="https://raw.githubusercontent.com/wphmoon/cloud/master/huazhi1.png" x="-490" y="400" width="130" filter="url(#huazhishadow)" transform="skewX(29)"/>
</svg>
</body>
</html>