SVG指纹动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.5/vivus.min.js"></script>
<svg width="100%" height="100%" viewBox="0 0 1416 1600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <use xlink:href="#_Image1" x="0" y="0" width="1416px" height="1600px" opacity="0.4"/>
    <path d="M820.108,40.334c-31.728,-7.972 -71.622,-6.356 -114.394,0.389" />
    <path d="M1146.1,385.567c-159.047,-359.209 -331.108,-341.331 -642.043,-298.771" />
    <path d="M1245.81,663.949c-12.501,-104.19 -47.092,-172.871 -125.78,-267.815c-43.5,-52.486 -26.047,-69.291 -75.698,-143.171c-87.645,-130.414 -212.144,-171.445 -349.14,-147.04c-105.149,18.731 -197.571,-6.875 -338.849,87.141" />
    <path d="M911.539,156.065c35.937,22.171 72.719,62.435 119.763,79.915" />
    <path d="M283.858,293.774c58.466,-49.922 122.259,-92.469 198.73,-117.463c73.434,-32.936 158.708,-26.838 269.238,-43.84c121.457,10.26 234.103,84.174 333.484,253.917c26.087,43.957 63.865,87.219 92.568,142.902c28.051,74.913 48.52,159.588 62.946,252.045" />
    <path d="M199.127,475.026c7.51,-30.676 19.146,-61.189 39.06,-91.375c72.602,-73.628 161.979,-132.495 260.992,-185.876c40.933,-0.609 84.018,-9.201 135.422,-21.1c164.01,-10.143 317.512,34.879 439.101,247.448c70.287,88.938 118.761,213.522 134.145,387.255c-6.656,83.088 -5.688,158.976 14.876,217.702" />
    <path d="M1237.19,934.481c1.06,-60.092 -8.785,-100.588 -28.785,-122.834" />
    <path d="M177.525,581.792l100.618,-181.296c128.158,-120.363 240.152,-182.438 334.235,-179.924c171.873,-25.072 296.906,25.427 412.427,195.614c15.752,23.206 29.27,78.89 43.521,114.008c18.479,45.536 37.037,72.738 41.449,171.328c1.573,35.145 -1.718,220.528 -24.347,285.884c-17.364,50.151 -71.182,89.764 -124.729,129.507c-183.652,107.172 -305.383,60.005 -420.497,-24.079c-74.689,-36.017 -106.896,-230.645 -77.004,-412.945" />
    <path d="M1076.88,429.586c-9.605,17.965 -5.649,48.895 34.684,114.601c32.823,88.868 56.607,187.217 68.455,298.081c10.048,149.098 -35.426,233.955 33.641,283.841" />
    <path d="M1215.81,1085.21c-7.634,-10.96 -13.644,-24.598 -18.916,-39.452" />
    <path d="M1147.54,659.784c-15.138,18.28 -15.513,79.582 -2.112,158.6c21.502,118.698 -9.952,170.284 3.427,262.533c1.097,35.182 17.03,65.65 58.196,82.757" />
    <path d="M1144.73,814.458c-7.602,3.553 -13.834,13.232 -17.205,26.264c-5.279,59.088 5.867,113.029 -20.033,178.215c-13.189,33.197 -35.442,68.249 -70.663,107.449c-89.682,66.384 -179.498,65.063 -202.505,43.846" />
    <path d="M1059.38,1065.01c-32.642,41.042 -81.674,59.899 -98.506,52.34" />
    <path d="M1037.74,1126.46c26.766,3.866 44.343,-6.953 80.482,-61.336" />
    <path d="M1118.51,1065.49c11.576,39.986 -19.58,86.347 -123.429,130.803c-50.158,26.979 -162.756,23.483 -215.12,17.678c-159.435,-17.674 -241.405,-67.262 -273.062,-150.697" />
    <path d="M1134.46,1146.81c-22.881,-0.122 -39.844,-2.992 -44.656,-6.668" />
    <path d="M1199.37,1202.43c-47.935,-47.569 -135.874,-13.301 -210.891,-2.707" />
    <path d="M1184.55,1224.56c-40.169,-16.718 -108.156,-2.373 -182.303,18.85c-91.539,20.237 -183.362,16.587 -275.368,-2.352c-152.821,-13.76 -251.451,-107.461 -293.164,-285.124c-27.267,-168.914 -12.42,-272.242 27.827,-336.016c50.288,-156.608 120.598,-213.816 204.903,-201.555c157.467,4.603 235.942,123.639 150.558,369.635c-17.589,50.677 -86.7,77.084 -120.837,75.357c-97.765,-4.943 -106.961,-258.159 -58.42,-338.925c27.381,-45.56 111.628,-35.571 130.091,17.917c22.962,66.525 23.325,132.258 -13.105,222.268c-8.097,28.188 -23.999,51.725 -52.48,67.763c-39.051,5.213 -53.029,-51.743 -58.834,-132.184c-9.966,-111.026 9.433,-169.964 53.088,-169.799c54.916,0.208 60.909,86.24 18.356,252.982" />
    <path d="M537.963,932.061c-23.887,48.916 38.341,136.747 158.971,153.333c87.765,7.665 169.804,-11.955 244.6,-66.097c43.777,-27.852 90.214,-92.157 134.246,-210.292" />
    <path d="M333.382,388.442c-47.55,65.908 -109.927,188.009 -173.368,292.8" />
    <path d="M157.321,773.447c30.476,-66.529 68.434,-140.451 106.472,-206.791c35.944,-62.689 70.351,-127.275 117.962,-187.812c66.292,-84.29 152.58,-125.056 258.48,-123.135c149.718,5.765 263.81,49.927 321.08,155.328c14.54,40.797 26.506,84.378 32.75,134.149c10.497,64.137 16.927,134.759 11.426,224.401c-12.684,147.875 -97.262,254.29 -276.456,255.467c-126.284,-13.214 -189.836,-108.594 -210.575,-251.61c5.275,-157.644 30.971,-232.688 76.048,-258.19c50.276,-51.06 101.08,-75.314 162.173,-34.429c84.159,66.739 85.33,213.465 -0.65,341.791" />
    <path d="M660.587,285.889c-62.211,-4.134 -132.457,17.225 -189.402,54.682c-85.438,56.198 -209.666,291.936 -241.444,367.666c-8.819,21.019 -71.573,136.859 -81.226,166.643" />
    <path d="M953.346,478.596c-63.771,-125.511 -163.802,-190.756 -321.06,-160.878c-92.068,13.437 -167.823,65.18 -230.452,147.743c-11.303,30.638 -31.166,55.335 -60,73.806c-25.999,55.267 -46.844,113.397 -65.224,172.896c-14.396,58.014 -32.186,116.208 -49.852,174.394c-25.453,39.628 -51.094,110.218 -65.621,166.964" />
    <path d="M171.041,1124.17c-6.211,-16.138 -2.369,-31.509 4.288,-48.575" />
    <path d="M190.554,1211.69c4.418,-57.263 14.721,-126.082 18.495,-199.536c15.661,-76.737 12.318,-101.273 17.823,-125.352" />
    <path d="M214.539,1279.65c15.386,-81.044 23.548,-174.038 27.68,-262.456c9.795,-88.086 31.115,-178.09 59.211,-269.222c14.605,-74.518 42.318,-149.34 104.19,-224.955c71.636,-116.197 168.362,-186.721 310.218,-175.085c67.015,7.785 125.186,40.806 174.047,100.392c23.012,21.518 44.203,48.913 61.827,87.825c23.242,63.034 31.211,129.103 17.327,199.515c-20.28,87.778 -46.981,153.897 -154.512,230.351c-81.975,50.257 -159.687,22.531 -220.078,-67.173c-37.363,-63.681 -46.138,-121.443 -41.323,-173.147c5.105,-80.624 32.727,-158.476 42.138,-210.865" />
    <path d="M234.107,1323.43c14.344,-43.033 21.131,-87.212 23.574,-139.923" />
    <path d="M250.293,1357.37c14.924,-35.583 26.266,-66.118 29.785,-93.914c2.039,-93.849 -12.097,-217.063 -5.361,-297.264" />
    <path d="M270.008,1384.88c26.994,-50.437 38.834,-119.634 36.321,-202.326" />
    <path d="M283.58,1408.12c31.048,-53.741 67.611,-92.976 37.22,-255.275c-15.774,-71.621 -17.396,-147.625 -21.196,-240.767c9.268,-56.968 20.934,-131.518 43.925,-211.819c4.1,-14.32 16.634,-29.33 26.24,-40.803c14.529,-69.637 42.342,-108.023 88.734,-141.391c47.164,-87.343 114.342,-146.767 240.195,-134.298c106.077,10.51 178.286,72.878 183.299,219.27c4.491,131.111 -32.216,260.012 -125.587,282.826c-67.799,18.36 -110.343,10.772 -130.691,-19.623c-42.304,-46.815 -50.78,-106.815 -42.271,-173.435" />
    <path d="M300.753,1429.34c55.092,-67.715 58.99,-171.092 55.304,-274.989c-20.016,-73.325 -23.535,-130.455 -23.324,-198.433c-0.778,-45.906 5.958,-83.311 18.134,-114.562c26.201,-169.216 14.521,-137.871 18.877,-183.78" />
    <path d="M686.268,419.706c-85.304,29.847 -156.593,89.442 -181.389,181.021c-12.399,68.53 -20.33,140.289 -15.427,221.322c-6.013,111.862 12.773,203.462 86.678,250.023c50.869,42.317 137.969,74.444 216.006,73.267c111.107,-12.775 245.091,-89.192 274.995,-201.008c11.809,-136.009 14.376,-250.593 0.745,-327.622c-12.445,-64.63 -54.006,-123.17 -70.508,-183.179" />
    <path d="M576.111,862.259c31.15,41.028 95.605,90.35 160.229,94.817c105.871,-9.935 191.345,-96.033 208.381,-303.179c-0.205,-34.997 -10.751,-76.373 -25.95,-101.032c-43.726,-70.943 -21.192,-91.439 -29.357,-104.457" />
    <path d="M650.675,887.647c47.181,63.217 162.031,52.892 216.983,-56.31c37.538,-74.595 50.579,-160.043 40.698,-296.531" />
    <path d="M715.847,822.306c-34.119,-28.515 -28.983,-49.195 -34.369,-83.401c-29.084,-184.708 54.456,-263.263 23.966,-27.71" />
    <path d="M458.736,517.868c-6.56,20.929 -20.711,59.558 -42.38,111.616c-16.195,54.134 -24.488,119.489 -28.295,191.211c15.594,149.955 -16.909,221.607 58.975,345.379c57.67,77.328 163.66,150.268 356.493,143.272c97.235,-3.527 213.105,-19.589 321.254,-55.367c14.684,-2.599 25.359,-3.709 47.203,5.03" />
    <path d="M513.892,881.569c34.156,81.244 82.288,149.058 177.805,171.334c121.093,10.745 225.212,-27.903 305.79,-135.05c56.064,-103.911 62.645,-224.768 23.554,-361.268" />
    <path d="M696.883,1085.08c25.104,65.238 260.733,24.588 373.025,-174.671" />
    <path d="M364.045,899.745c-4.631,95.094 -0.475,191.958 48.064,297.757c32.634,59.08 70.01,113.559 138.388,137.962" />
    <path d="M428.338,1032.03c32.751,117.611 86.601,218.119 306.879,241.673c40.988,4.382 58.685,33.051 90.663,33.891" />
    <path d="M427.76,1130.44c33.578,112.65 112.287,191.768 225,202.36c60.657,7.715 106.461,11.067 144.075,12.014c114.329,6.982 239.017,-2.342 356.471,-58.13" />
    <path d="M1125.11,1326.89c-96.275,50.945 -208.87,66.162 -395.24,48.476c-44.778,-4.249 -85.508,-5.331 -143.721,-6.894c-60.395,-1.622 -106.164,7.733 -162.368,41.622" />
    <path d="M499.973,1376.29c-40.809,-41.668 -66.324,-103.515 -66.628,-142.846" />
    <path d="M398.543,1164.46c4.662,25.777 3.046,78.365 17.731,141.211c11.629,21.964 19.545,40.09 20.011,50.513c0.573,12.826 -34.015,33.398 -90.874,104.59" />
    <path d="M348.053,1119.98c54.759,113.213 38.762,244.607 -27.345,325.309c40.45,-36.042 85.058,-82.315 92.867,-149.924" />
    <path d="M370.233,1473.69c33.676,-27.333 93.981,-56.023 151.294,-63.1c12.328,-1.522 85.367,2.211 184.075,-5.716c18.17,-1.46 156.838,21.739 217.643,11.531c68.411,-11.485 124.087,-25.38 183.452,-45.698" />
    <path d="M585.928,1445.23c-60.278,-6.875 -119.113,9.789 -181.359,44.092" />
    <path d="M444.473,1503.78c62.943,-7.426 150.043,-35.315 240.878,-60.244c69.009,-18.939 214.667,26.932 340.043,11.314" />
    <path d="M1071.63,1408.52c-41.77,25.348 -147.588,24.292 -181.952,10.801" />
    <path d="M942.044,1493.17c-78.08,-13.035 -175.16,-28.639 -247.726,-17.039c-86.095,13.762 -145.413,49.842 -176.938,52.348" />
    <path d="M827.233,1506.11c-83.582,-11.937 -156.75,1.555 -221.496,35.609" />
    <path d="M155.069,958.935c113.678,-253.155 68.456,-211.631 84.02,-270.716" />
    <path d="M813.494,991.374c177.32,-84.434 115.33,-137.287 191.997,-221.787" />
</svg>
	<input type="range" min="0" max="1" step=".01" disabled>

css

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG指纹动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号