<!DOCTYPE html>
<html>
<head>
<title> svg与canvas结合动画制作</title>
<meta name="keywords" content=" svg与canvas结合动画制作" />
<meta name="description" content=" svg与canvas结合动画制作" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="mainSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" />
<feBlend/>
</filter>
<filter id="glow" x="-100%" y="-100%" width="250%" height="250%" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="10" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#43598F" flood-opacity="1"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="blur" x="-100%" y="-100%" width="250%" height="250%" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="3" />
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<radialGradient id="bgGrad" cx="400" cy="300" r="320" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#10316B" />
<stop offset="0.86" style="stop-color:#081029" />
</radialGradient>
<circle id="particle" cx="0" cy="0" r="1" fill="#FFF" />
</defs>
<rect fill="url(#bgGrad)" width="800" height="600" />
<radialGradient id="dotGrad" cx="0" cy="0" r="24" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:1" />
<stop offset="0.3" style="stop-color:#0867C7;stop-opacity:0.6" />
<stop offset="0.8" style="stop-color:#081029;stop-opacity:0" />
</radialGradient>
<!-- </g> -->
<g id="shapeGroup" filter="url(#glow)">
<path id="startShape" class="shape" fill="none" stroke="#1276DB" stroke-width="5" stroke-miterlimit="10" d="M570.1,305
c2,17-10.8,21.3-14.1,38c-1.9,17.1,7.8,45.5,1.6,59.4c-5.9,14.6-29.8,11.8-45.5,25.3c-7,6-14.6,19-23.8,28.6
c-9.1,9.9-19.9,16.3-31.8,17.7c-21.1,3.2-33.6-8.1-55.8-8.4c-21.9,1.8-53.9,11.2-70.2,8.5c-17.2-1.2-15.5-21.3-31.4-30.7
c-16.1-8.4-51.4-8.8-60.8-24.5c-9.7-15.1,3.9-35-1.6-53.6c-2.4-8.1-10.1-19.3-14.5-29.9c-4.8-10.7-6.4-20.9-6.3-30.1
c0.3-8.6,3-14.5,8.3-20.5c5-6,12.7-12.1,14.9-20.9c5.2-18.1-1.3-49.5,9.4-63.8c10.4-14.6,32.6-10,47.3-22.6c6.7-5.6,14.5-17.6,23-26
c8.5-8.8,17.9-13.9,27.1-15.1c16.1-3,23.2,7.5,40.1,8c16.5-1.7,41.3-10.6,53-8c12.4,0.6,12.8,18.9,27.9,27.9
c14.9,7.9,45.8,6.3,59.5,21.4c13.8,14.9,5.5,37.5,14.7,56.6c4,8.5,13.7,20.3,19.6,31.6C567.3,284.9,569.8,295.7,570.1,305z" />
<path id="orbit" fill="none" stroke="none" stroke-width="4" stroke-miterlimit="10" d="M561.3,302.1c0.6,10-2.4,23.7-4.8,34.9
c-2.3,11.5-1.5,21.5-7.3,33.3c-5.8,12.1-21,23.2-32,33.5c-11,10.4-16.6,22.9-29.5,33.1c-12.7,10-33.1,15.2-49.4,21.8
c-15.7,6.8-28.2,14.7-45.2,15.6c-16.9,1.5-37.1-1-53.9-2.6c-17.2-1.7-33.1,0.7-48.4-5c-15.6-5.8-25.8-23-34.4-34.3
c-8.8-11.3-18.2-16.4-22.5-29.1c-4.1-12.5-3.3-32.5-4.9-48.6c-1.7-15.6-4.6-27.5-4.2-46.9c-0.2-19.3,5.3-44.9,12.1-65.7
c6.5-21.4,10.5-41.9,23.2-57.9c13.1-16.3,33-23.7,45.4-30.4c12.6-6.9,19.2-13.5,28.3-15.4c8.9-1.9,21.3-0.3,31.3-0.7
c9.6-0.4,15.5-2.4,27.9-1.5c12.5,0.5,30.9,6.7,45.8,13.5c15.3,6.6,30,10.8,44,22.6c14.3,12,24,30.7,33,43.2
c9.2,12.7,19.7,20.1,26,29.8c6.1,9.6,7.4,22.1,10.8,31.7C556.2,286.3,561.2,292.1,561.3,302.1z" />
<path id="endShape" class="shape" fill="none" stroke="#1497FC" stroke-width="5" stroke-miterlimit="10" d="M565.2,305.1
c0.2,14.1-7.5,31.8-11.4,46.5c-3.3,15.3,1.5,30-4.3,44c-5.6,14.5-25.8,22.8-37.4,32.9c-11.5,10.5-14.5,26.1-27.8,31.9
c-13,5.9-34.7,2.5-50.4,5.5c-15.3,3.5-25.3,11.3-40.8,11.1c-15.7,1.4-36.2-6.5-52.8-11.1c-17.2-3.9-34.7,1.6-49.8-6.1
c-15.4-7.8-22.2-30.4-31.5-42.6c-9.8-12.3-23.3-16.1-27-28.7c-3.9-12.2-0.7-32.1-2.6-46.6c-2.4-14-8.4-22.2-8.4-37
c-1.6-15.1,6.5-35.7,11.9-51.9c4.7-16.8,0.6-34.6,9.4-49.6c8.9-15.4,31.2-21.7,43.8-31.2c12.6-10,17.7-25.1,29.9-29.4
c11.9-4.5,30.3,0,43.6-1.9c13-2.5,20.7-9,33.6-7.9c13.1-0.4,30.6,7.2,44.7,11.6c14.7,3.8,29.2-0.5,43,6.2
c14.3,6.5,22.5,26.9,32.9,38.8c10.8,11.8,27.5,15.7,34.3,28.8c6.8,12.9,2.9,33.6,6.1,48.4C557.9,281.3,566.5,291.1,565.2,305.1z" />
</g>
<circle id="dot" fill="url(#dotGrad)" cx="0" cy="0" r="24" />
<g id="pContainer" />
<text x="50%" y="15%" fill="#14264D" style="text-anchor:middle;">JUST RELAX</text>
</svg>
<script src='js/TweenMax.min.js'></script>
<script src='js/MorphSVGPlugin.min.js'></script>
<script src='js/Physics2DPlugin.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h15190.shtml
