<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SVG Filters are 💕</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="svg-fulscreen heart" viewBox="0 0 800 600">
<filter
id="filter-gooey"
x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feGaussianBlur
stdDeviation="10"
x="0%" y="0%" width="100%" height="100%"
edgeMode="none"
in="SourceGraphic"
result="blur"/>
<feColorMatrix
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 19 -10"
x="0%" y="0%" width="100%" height="100%"
in="blur"
result="colormatrix"/>
</filter>
<filter
id="filter-heart-blur"
x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feGaussianBlur
stdDeviation="1" x="0%" y="0%" width="100%" height="100%" edgeMode="none"
result="blur"/>
<feTurbulence
type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="1" stitchTiles="stitch"
result="turbulence"/>
<feDisplacementMap
scale="50"
xChannelSelector="R" yChannelSelector="A"
class="distortion-waves__map"
in="blur" in2="turbulence"
result="displacementMap"/>
</filter>
<mask id="mask"
maskUnits="objectBoundingBox">
<g filter="url(#filter-gooey)" fill="white">
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/>
<svg viewBox="0 0 400 600" preserveAspectRatio="xMidYMid meet">
<svg viewBox="0 0 400 329" preserveAspectRatio="xMidYMid meet">
<path d="M199.707062,328.924193 C306.1279,286.264571 371.305914,223.788236 395.241104,141.495189 C411.10542,86.9511117 389.083175,0.0955637558 302.216473,9.38591108e-05 C244.305338,-0.0635527387 210.135535,32.2422428 199.707062,96.9174805 C192.538642,32.3058894 159.023393,0.031917158 99.1613163,0.0955637558 C9.36820111,0.191033652 -11.317258,86.0580148 5.18615059,141.495189 C29.2163218,222.215775 94.0566258,284.692109 199.707062,328.924193 Z"></path>
</svg>
</svg>
</g>
</mask>
<g
mask="url(#mask)"
filter="url(#filter-heart-blur)"
fill="none"
stroke-width="500"
stroke-dasharray="52 260"
class="heart__fill-circles-group">
<circle r="250" cx="50%" cy="50%"
stroke="crimson"
class="heart__fill-circle"/>
<circle r="250" cx="50%" cy="50%"
stroke="gold"
stroke-dashoffset="52"
class="heart__fill-circle"/>
<circle r="250" cx="50%" cy="50%"
stroke="lightseagreen"
stroke-dashoffset="104"
class="heart__fill-circle"/>
<circle r="250" cx="50%" cy="50%"
stroke="yellowgreen"
stroke-dashoffset="156"
class="heart__fill-circle"/>
<circle r="250" cx="50%" cy="50%"
stroke="teal"
stroke-dashoffset="208"
class="heart__fill-circle"/>
<circle r="250" cx="50%" cy="50%"
stroke="orange"
stroke-dashoffset="260"
class="heart__fill-circle"/>
<circle r="600" cx="50%" cy="50%"
stroke-width="0"
fill="transparent"/>
</g>
</svg>
<script src="js/index.js"></script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>