<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SVG 和 JavaScript 实现的恶魔眨眼动画DEMO演示</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<style>
svg { background: #000 }
rect, [r], #m { fill: #fff }
</style>
<svg viewBox="-2000 -1000 4000 2000">
<radialGradient id="r">
<stop stop-color="#ff0" offset=".32"></stop>
<stop stop-color="#fa0" offset=".83"></stop>
<stop stop-color="#fa0" offset=".91"></stop>
<stop stop-color="#000" offset=".95"></stop>
</radialGradient>
<filter id="f">
<feGaussianBlur in="SourceGraphic" stdDeviation="8"></feGaussianBlur>
</filter>
<mask id="m">
<path d="M500 170c200 340 820 340 780 -290c-200 0 -600 -60 -780 290" filter="url(#f)"></path>
</mask>
<g id="g" mask="url(#m)" filter="url(#f)">
<rect width="2000" height="2000"></rect>
<ellipse cx="930" cy="-70" rx="420" ry="500" fill="url(#r)"></ellipse>
<ellipse cx="950" cy="-20" rx="200" ry="260" transform="rotate(-9 950 -20)"></ellipse>
<circle cx="860" cy="-20" r="14"></circle>
</g>
<use xlink:href="#g" transform="scale(-1 1)"></use>
</svg>
<script src="js/index.js"></script>
</body>
</html>