svg模糊（分享一个非常炫酷的svg动画）
svg模糊（分享一个非常炫酷的svg动画）
最终效果：本代码作者：Ali Klein http://www.aliklein.com
你一定不敢相信，
上图是由短短五十行代码画出来的！！！
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 605 500"> <path id="dragon-dark" d="M471.5 449.2l-1.3-.7-94.2-52-16-20.5 2-20 12.2-17 27.3-3 11.9 23.4 18.4-10.4 26.4-40.2L492 224l6-102.2-12.5 57.7-29 35-23.5 4.7 6.5-8.4-8.5 1.2-2-12 16 1.8-16-5.8v-14l20.5 1.8-11.7-3.3-11-6.5-2.6-13.8 22-1.7 12 2.7-13.7-6-20.7.8-7-9.8 20-6.4-23.8 2.4-14.6-2.2 10.6-7.2-15.5 1.7 22.5-23.3-25.8 16.6-28.7 9 30-39.8-37.7 42.5-15.3 7.3 23.7-37.3-34.2 42.3-20.7 17.7 14.7-30.3 11.2-17.2 17-16.8-15.7 8-12.3 15.3-.4 5.5-24.6 44.2 11.8-30.7-1.7-18-1.5 18.7-19 44V170l10.4-33 2.6-19.8-20.8 46-5.5 7 1.5 16.6-4.2 18-7.3 5.4V167l-7.5 22.5 1.8 15-13 35.3 1.2 7.7-5.8 5.3-5 22.4-12.4 15.6 5.2 17.4 6-5.4 8.8 4.4 8.4-3.7 10-.3-3.2-5.4 21.2-41.3 15.6-4.5 14.2-25.8 6.2.8 5 3.8-4.7-6.3-5.3-2.3 1.3-1.7 12-.5 10 7.2 12 13.8-13-18-12.7-7.8 22.2-2.4 18.4 5.4-16.9-9.2-27.2 1.1 12-10.8 22.7-4.2 28.7 11 4.3 10.2-17.2 43.5-57.3 62.2-10.5 61.8 25.2 65.4z"/> <path id="dragon-light" d="M533.7 489.3l-5-50l-12-33.7l-6.7-2l-42.7-22l-35.7 7L297 462l-39.3 9l-32.3-2.3l52-7.7l24.7-12.7l-8.3-32.7 l-7 2.7c0 0 3-23.8 1.3-39.1l-7 4.1c0 0 12.7-42.3 11.7-52.3H285c0 0 26-30.3 26.3-34.3H299c0 0 38.3-19 51.2-34.8h-6.7l21.8-13.2 l9-12H369l8.7-16l-4-8.7l-2 3.7l-10.3-12.3l-8.7-2.3l1 2l-16-0.7l-17 4.7l-5.7 5.3l2.7-11.3l5.7-5.7l0.3 3l23.7-13.8l0.8 2.8 l13.8-1.2l18.3 9.2l-0.2 3.2l7 8.3l-3.5 50.2l-62 67.3l-4.3 41l-3 1.7l3.2 33.2l2-2l14.3 27.5l62-45.5l21.2-25.1l13.4-8.8L451 312 l36.5-93.8l12.2-135.5L542 179l29.3 78.7l-13.6 127.1l-12.5 93L533.7 489.3z"/> <path id="dragon-eye" d="M264.5 231.5l-6.3 5.5-1.2 6.6-3.9 8.8 7.7-5.8.4-5.6z"/> <path id="legs-shadow" d="M475.8 470.8l-18.1 6.4-83-1.4-35.5 1.4-15.2-3.5 44.3-2.9z"/> <path id="legs" d="M370.7 436.5v10.8l-3.5 21.5-14.2 3.3-2.2-1.5-1.5.2 2 2.8h19.3l5-24.7s5.3-4.2 5.7-12.5h-10.6zM434.8 473.7v-3.4L421.5 431l6.7-2.3 10.1 40 13.9 3.5 3.1-1.7v3.2z"/> <path id="hair" d="M307.3 386.2c1 .5 13.8 7.3 13.8 7.3l15-27-8.8-22.2 6.8-21 44.3-32.7 10 11.7-1.7 6-6.2 6.2 3.2 10 .5-9.5 5.3-4.3 4-8.5 17.5-1.3 4.3 2.8v9.2l-2.5 4.7s1 8.3 6.5 12.7c0 0-1.8-1-2.5-10.5l2.5-4V308l-4.8-14-3-30.8 3-3.3v-6l3.7-4.2-.7-11.8-4-3.2.2-9.5-3.7-2-5 .8-3.2-5.7-20 7.8.5 6.4-3.2 4.3 1.7 5.7-13.2 22.5-14.5 12.3-22.8 12.5h-7.7l-3.5 10.3v10.7l5.5-16 28.5-12-26.7 29.5-6 43.3 10 16.3-10.4 12.8-12.7 1.5z"/> <path id="body" d="M396.3 274.5l-19.2 3.8-2.3 6.3 1.3 8.7-5.7 28.2-6.3 4.7-11.1 24.4-4.2 3.9-5.3 11.5 1.4 8.1 3.8 4.8s.7 1 1.5 0-1.2-3.6-1.2-3.6l-1.4-1.8-.1-2.9s2.9 4.8 4 3.9 1.6-1.8.8-3.1-3.8-4-3.8-4l-.3-4.4 3.2-2.4 1.3.8.3 5.3s.2 1.6 1.5 1.6 1.7-1.5 1.7-1.5v-7l-1.5-2-.1-4.5 11.8-15.2 6.5-4.2 10.1-41.1 14.4 18.6h9.8l13.2-24.7 2.3 17.5v9.2l6.5 11.7v8.8s14.3 20.3 13.5 22-4 3-4.5 3.8.1 5.1-.9 5.5-.1 2.2.6 1.9 3.2-4.2 3.9-5.8 1.8-1.8 2.6-.4 3.1 3.9 3.1 3.9v4.8s-2 2.2-3.8 2.8c-1.8.5-1 2.1.2 1.9 1.2-.2 3.7-2 3.7-2l.5.2-.5 1.3s-3 2.2-2.9 2.8c.1.5 1.8.7 2.8-.2 1-.8 3-3 2.8-5.1 0 0 .8 1 .8 1.3-.1.3-.3 6.1 1.5 6 1.8-.1.3-11.3.3-11.3l-3.6-4.6-1.2-6.2-3.1-2.8-7.7-26.5s-8.8-2.2-11.1-49l-3.9-6-18.5 1-.8-8.1 6.6-6.8.2-11.9-5.6-14.1-4.2 3-2.5-3-3.1.6-7.8 9.4.5 13.5 3 6 4.6 2.8 1.6 9.9z"/> <path id="dress-back" d="M412 333.3c0 0 15.8 88 28.8 100.2l-27.5 4.5l-37.8-19.3l22.9-92.3L412 333.3z"/> <path d="M420.3 354.2s-28.5 59.8-31 84.2l-19.7 1-19.5-6.7 10.7-6 12-31 8.5-48 .2-14 13.7-16V310L383 294.2l-.3-4.3-6.5-8-4.2-9.3 8.3 2.7 12.8-.3-1.3 12.8 9.3 15 10.7-16.5-2.8-13.7 17.8-10.7v7.5s-7.3 8.5-6.7 23.5c0 0-7.7 8.8-10.2 18.5l6 37.7 4.4 5.1z" id="dress"/> <path id="dragon-front" d="M228 511.3l83-5 76-30.7 67.7-84.7 76-133-6.7-78.7-56.7-135 27.3 22 41 42 44.7 149-2.3 30.3 2.3 55s-32 117.3-31.7 135L537 504l-5 28.3-4.7-42.7 15.3-19.3 9-92.3-29 30.3-57.3 120.3-38.3 3.7-43.3 1.7 56-13 37.3-40.3 56-114.3-52.3 34-79 75.7-50.7 38.2-29-2.3-37 5.7-57-6.4z"/> </svg>
<style> body { background-color: #E1DFDE; overflow-x: hidden; overflow-y: scroll; } svg { display: block; width: 85vw; margin: auto; } .custom-cursor { position: absolute; cursor: none; } #dragon-dark {fill: #242128;} #dragon-front {fill: #242128;} #legs-shadow {fill: #B4B2B2;} #legs {fill: #4B4748;} #dragon-light {fill: #342F38;} #dragon-eye {fill: #EA4102;} #hair {fill: #F1EDE4;} #body {fill: #D3BCAE;} #dress-back {fill: #38718B;} #dress{fill:#336782;} </style>
