svg+vivus实现指纹路径动画效果-html代码-BFW代码库

svg+vivus实现指纹路径动画效果

代码语言：html

所属分类：动画

代码描述：svg+vivus实现指纹路径动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html, body {
	font-family: sans-serif;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	background: hsla(60, 27%, 98%, 1);
}
path {
	stroke-width: 7px;
	stroke: #999;
	fill: none;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}

svg {
	width: 50vw;
	height: 50vh;
}
.app {
	margin-top: -10%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

input {
	width: 400px;
}

h1 {
		font-weight: 100;
}
</style>




</head>

<body translate="no" >
  <div class="app">

<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=".........完整代码请登录后点击上方下载按钮下载查看