gsap+svg实现手写签名动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+svg实现手写签名动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	width: 100%;
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
svg {
	width: 60%;
	min-width: 150px;
	max-width: 400px;
}
</style>



</head>

<body  >
  <svg viewBox="0 0 3412 1391" >
 <defs>
     <clipPath id="mariane-letter-M-clip">
         <path d="M832 402c0,2 1,3 3,3 -1,1 -1,3 -2,4 0,2 -2,2 -4,1 0,2 1,3 3,4 1,0 1,1 0,3 -4,0 -6,2 -6,6 -1,3 -1,6 0,9l-4 0c1,1 1,3 1,4 0,2 1,2 3,1 0,1 -2,1 -6,1 -2,3 -1,5 1,4 3,0 4,0 5,2 0,3 -1,5 -4,4 -3,0 -5,1 -5,4 1,1 3,1 6,1 -2,2 -3,5 -3,9 -1,3 -3,5 -6,6 1,3 2,6 3,8 1,2 1,5 0,10 -2,-1 -2,-2 -2,-4 1,-2 0,-3 -2,-3 -2,1 -3,4 -2,10 1,6 0,10 -4,11 -1,3 -1,4 1,4 2,0 4,1 5,3 -6,5 -8,11 -7,17 2,6 -1,11 -7,16 0,3 1,4 2,3 1,-2 2,-1 4,0 -2,6 -3,10 -3,13 0,4 -1,9 -3,15 -3,0 -4,0 -3,2 0,1 -2,1 -6,-1 7,5 9,11 5,17 -4,7 -6,13 -6,19 -2,-2 -3,-2 -3,1 0,2 -2,3 -6,1 1,-5 1,-11 0,-18 -2,2 -3,3 -2,5 0,1 -2,2 -7,2 5,3 7,6 7,10 0,3 3,7 8,10 -2,3 -5,4 -9,4 0,-2 1,-3 2,-4 2,0 2,-1 1,-3 -7,1 -10,4 -8,11 1,6 0,12 -3,17 4,-1 6,-3 6,-5 0,-3 0,-5 0,-8 2,-2 4,-3 5,-2 1,1 1,0 1,-4 3,2 4,4 3,8 -2,3 -3,6 -4,8 5,4 6,11 4,20 -2,10 -5,18 -9,25 1,1 2,2 2,4 0,1 1,3 3,4 -5,8 -7,18 -7,30 1,12 -3,21 -11,28 -2,2 -3,4 -3,5 2,0 3,-2 3,-5l4 0c3,3 4,7 1,10 -2,4 -2,8 1,13 -5,1 -7,3 -6,5 1,3 2,5 4,7 -5,-1 -8,0 -8,2 -1,3 -3,4 -7,4 0,2 1,3 3,2 2,0 3,0 3,2 2,0 3,-1 3,-4 2,2 3,6 3,13 -1,7 -4,12 -9,15 1,1 2,2 3,1 1,0 3,0 5,2 -4,2 -5,6 -4,12 2,5 -1,9 -7,11 3,8 5,16 5,23 0,8 -3,15 -8,22 4,3 6,9 5,18 -3,0 -5,-1 -5,-3 -1,3 0,6 2,8 2,2 0,2 -5,1 0,2 1,3 2,4 2,0 3,2 4,4 -6,4 -7,11 -3,22 -2,-2 -3,-3 -4,-2 -1,0 -3,1 -5,2 -1,2 -1,3 1,3 1,0 3,1 4,2 0,2 0,3 2,3 1,0 3,-1 4,-3 2,2 1,4 -2,8 -3,3 -2,6 3,8 0,2 -1,3 -4,3 -2,0 -4,1 -5,3 1,4 4,6 8,6 -1,4 -3,6 -6,6 -3,0 -6,1 -8,3 4,1 6,3 7,5 0,3 1,6 2,9 -2,2 -3,6 -3,13 2,0 3,0 3,-2 0,-1 1,-2 3,-1l0 11 -6 0 0 40c-4,-2 -6,-1 -7,1 -1,3 -4,4 -8,4 0,3 2,4 6,3 4,-1 7,-3 8,-5 3,9 4,17 3,24 0,6 0,14 1,24 0,2 1,3 3,3 2,-1 4,0 5,2 -2,6 -4,13 -6,21 -1,8 1,13 6,16 0,8 0,18 2,28 2,10 3,22 5,36 2,2 3,2 4,1 1,-1 2,0 4,2 0,2 -2,3 -6,3 3,4 4,9 4,15 0,7 3,11 9,13 1,16 5,30 12,41 7,12 14,25 21,39 -5,0 -6,1 -3,3 3,2 4,4 3,6 -1,-2 -2,-3 -3,-2 -2,0 -2,2 -1,5 -2,-1 -4,-2 -5,-2 -2,0 -3,0 -4,-1l0 -5c-2,0 -3,1 -3,3 0,1 1,2 3,2 -3,2 -5,2 -6,0 -1,-2 -4,-2 -8,0 -2,-5 -4,-9 -6,-12 -3,-3 -5,-7 -6,-12 -5,0 -9,-1 -11,-3 -3,-2 -5,-4 -8,-6 -1,-2 -1,-4 0,-4 1,-1 1,-2 1,-4 -7,-17 -15,-33 -25,-48 -9,-15 -16,-32 -20,-51 -1,-2 -1,-5 0,-8 1,-4 1,-7 0,-10 -1,-2 -2,-3 -3,-2 -1,0 -2,0 -3,-2 -5,-12 -8,-26 -10,-44 -1,-18 -2,-33 -2,-44 0,-13 -1,-25 -4,-38 -3,-12 -5,-25 -5,-37 0,-19 1,-38 3,-58 2,-19 2,-37 0,-54 0,-6 1,-13 3,-19 2,-7 4,-13 5,-19 1,-8 0,-16 -1,-23 -2,-8 -1,-15 1,-22 1,-2 2,-3 3,-4 1,0 2,-2 3,-4 -1,-1 -2,-1 -3,-1 -1,0 -2,-1 -2,-2 1,-7 2,-14 4,-21 1,-8 3,-16 4,-24 1,-6 1,-11 0,-17 -1,-5 0,-11 4,-16 0,-3 -1,-4 -3,-4 -2,0 -2,-2 -1,-5 8,-17 11,-35 11,-55 -1,-20 4,-40 13,-60 0,-2 -1,-4 -2,-4 -1,-1 -1,-2 0,-5 7,-39 15,-79 23,-118 8,-40 16,-77 24,-112 11,-47 22,-91 33,-132 11,-40 20,-85 28,-134 -5,1 -7,4 -7,8 0,5 -3,6 -9,5l0 9c-1,0 -2,0 -2,0 -1,-1 -2,-1 -3,-1 -13,17 -23,34 -32,50 -8,17 -20,32 -35,46 -1,3 -1,5 0,5 1,1 1,2 1,4 -5,2 -9,5 -11,10 -3,4 -5,9 -7,14 -2,5 -4,10 -7,15 -2,5 -6,9 -11,11l0 16c-5,5 -9,11 -13,17 -4,6 -6,12 -6,19 -2,-1 -3,-2 -3,-4 0,-1 -1,-2 -3,-2 0,5 -1,8 -3,10 -1,1 -4,3 -8,5 5,1 7,3 5,5 -2,2 -4,4 -6,6 0,1 1,1 4,1 -11,20 -20,40 -28,60 -8,19 -16,38 -23,57 -4,0 -6,1 -7,2 -3,18 -9,31 -17,40 2,6 1,14 -2,23 -4,9 -8,14 -13,15l0 12c-1,0 -2,0 -2,-1 0,0 0,0 -1,0 -2,10 -5,22 -8,36 -4,14 -10,23 -19,28 0,1 0,2 1,2 1,1 2,0 2,-2 0,9 -2,19 -7,29 -4,10 -8,18 -11,24 2,11 0,22 -6,32 -6,11 -11,21 -15,32 -5,13 -10,26 -14,39 -5,13 -10,27 -15,41 -8,21 -17,41 -27,61 -10,19 -27,33 -51,40 -3,1 -5,0 -5,-1 -1,-2 -2,-2 -4,-2 -2,0 -4,1 -7,4 -11,-3 -20,-9 -25,-17 -6,-9 -11,-17 -16,-25 -2,0 -3,1 -3,2 0,2 -1,2 -3,1 -10,-17 -19,-35 -28,-54 -8,-19 -11,-40 -9,-63 -7,-76 -4,-151 9,-226 0,-3 -1,-5 -3,-7 8,-24 13,-52 15,-83 2,-31 7,-57 16,-79 -2,-10 -2,-21 1,-33 2,-11 6,-21 10,-30 -1,-20 1,-40 6,-60 5,-19 7,-43 6,-71 -4,5 -8,10 -12,16 -3,5 -5,12 -6,20 -5,3 -9,7 -11,12 -2,5 -4,10 -5,15 -2,5 -4,10 -6,15 -3,5 -6,9 -10,12 -8,26 -19,54 -32,84 -13,30 -23,61 -31,93 -8,20 -16,43 -23,67 -8,25 -15,50 -22,75 -7,26 -14,51 -20,75 -6,25 -11,47 -15,67 0,1 -1,2 -4,2 -10,66 -22,127 -36,184 -14,56 -24,115 -29,175 -3,10 -5,20 -7,29 -2,10 -2,18 0,26 -2,2 -4,5 -5,8 -1,3 -3,4 -6,4 1,7 1,13 -1,16 -2,3 -4,6 -6,9 -7,0 -12,-1 -15,-1 -2,-1 -6,0 -12,1 -14,-8 -24,-19 -30,-33 -5,-13 -7,-29 -5,-46 3,-21 7,-44 12,-69 5,-25 9,-47 12,-66 5,-32 12,-67 21,-104 9,-38 16,-73 21,-105 8,-27 16,-54 24,-81 8,-27 15,-55 20,-84 12,-32 22,-64 29,-96 8,-32 18,-63 32,-92 0,-3 0,-5 -1,-6 -1,-1 -1,-3 0,-6 6,-10 9,-20 10,-30 1,-10 6,-18 15,-24 2,-20 7,-38 15,-55 8,-16 16,-35 24,-56 2,-2 4,-2 4,0 1,2 2,3 5,3 0,-2 0,-4 -1,-6 -1,-2 -2,-4 -2,-6 3,-12 8,-21 14,-26 6,-6 10,-16 13,-30 1,-1 3,-1 4,-1 2,0 3,-1 6,-2 -3,-8 0,-14 7,-18 7,-4 12,-9 14,-16 0,-2 -1,-2 -3,0 5,-17 14,-29 28,-35 14,-6 30,-6 47,-1l0 7c7,1 11,2 14,3 2,1 7,1 14,-1 1,5 3,10 7,14 3,5 3,9 -1,14 0,2 0,3 1,2 0,-1 2,-2 4,-2 -2,4 -3,8 -2,12 1,3 2,7 2,12 3,-2 4,-3 3,-4 -1,-1 -1,-3 0,-6 1,0 2,3 4,10 -1,0 -2,1 -2,1 -1,1 -1,1 -2,1 2,1 3,2 3,4 0,1 1,3 3,5 0,2 -1,3 -3,3 -1,-1 -2,-1 -3,-1 0,1 1,1 3,1 2,11 2,24 1,40 -1,16 -5,28 -13,35 0,2 1,3 5,2 3,-1 6,-1 7,1 -2,3 -4,6 -5,8 -1,2 0,4 3,7 -8,1 -12,5 -11,11 0,6 -1,11 -4,16 3,0 5,-1 5,-3 1,-2 1,-4 1,-7 0,-2 0,-5 1,-7 0,-3 2,-4 4,-5 -2,5 -2,10 0,16 2,6 0,10 -6,11 -1,4 0,5 3,4 4,-1 5,1 3,5 -3,-1 -6,0 -9,4 -2,4 -3,9 -3,14 -4,0 -7,-1 -8,-2l0 6c1,2 2,2 2,1 1,-2 2,-2 4,-1 0,4 -1,5 -3,4 -2,-2 -3,-1 -3,1 5,4 8,3 8,-3 1,-6 3,-10 7,-11 -2,7 -2,13 -1,19 2,5 0,12 -6,19 5,4 5,8 2,12 -4,4 -4,8 -1,13 -2,2 -4,4 -6,6 -2,2 -5,2 -10,0 -2,4 -4,7 -5,8 4,0 7,-1 9,-2 2,-1 5,-1 9,-1 0,9 -1,17 -4,23 -3,7 -3,15 0,25 -2,1 -6,2 -10,2 -5,1 -8,-1 -10,-5 -4,10 -4,17 0,22 5,-1 8,-4 8,-9 0,-5 3,-6 9,-4 -6,14 -10,31 -11,51 -1,20 -5,40 -13,60 0,3 1,5 4,5 -5,18 -7,33 -7,47 1,13 -2,26 -8,38 4,8 3,13 -3,15 1,1 2,2 3,3 1,1 1,3 0,6 -3,1 -4,1 -4,-1 0,-2 -1,-4 -3,-5 5,9 7,24 6,44 -5,2 -6,6 -3,13 3,7 3,14 1,20l-10 0 0 -8c-5,0 -7,2 -6,6 2,3 2,7 0,11 8,-3 14,-3 18,1 -3,8 -4,16 -2,23 2,7 2,14 -1,22 2,4 4,6 6,5 -1,2 -3,3 -4,4 -2,0 -2,1 -2,3 0,2 0,4 0,4 1,1 1,2 1,4 2,0 3,0 4,-1 0,0 2,-1 4,-1 -6,7 -8,15 -5,23 3,8 5,16 5,24 2,-1 3,-2 4,-4 1,-1 3,-2 6,-2 11,-20 22,-41 32,-62 10,-21 18,-43 24,-66l6 0c-2,-9 0,-13 6,-13 -2,-10 0,-21 6,-33 6,-11 11,-23 16,-35 3,-9 6,-17 9,-24 2,-7 5,-14 8,-21 14,-33 27,-66 38,-99 12,-33 24,-66 38,-98 2,-1 4,0 5,3 1,3 2,3 4,0 2,5 2,11 0,17 -3,6 -7,10 -12,12 -1,4 -1,8 -1,11 0,4 -2,6 -5,8 0,2 1,4 3,5 2,1 3,2 3,4 7,-5 8,-11 3,-18 2,0 4,0 4,-1 1,-1 2,-1 4,1 2,-8 4,-14 7,-19 3,-5 5,-11 5,-18l6 0c0,-5 1,-11 5,-17 3,-7 6,-12 12,-15 -1,-4 -1,-9 2,-15 2,-6 6,-10 11,-13 -2,-2 -3,-4 -3,-6 0,-1 0,-3 -1,-5 3,-3 5,-6 8,-9 2,-3 5,-6 8,-9 -1,-2 -2,-3 -4,-3 -2,0 -3,-1 -2,-4 6,-4 10,-10 12,-18 2,-8 7,-14 15,-17 -2,-4 -2,-7 1,-10 2,-2 5,-5 7,-7 3,-3 5,-5 6,-8 1,-2 -1,-5 -5,-8 5,-3 11,-8 17,-16 7,-7 10,-15 9,-23 5,-1 8,-4 9,-8 1,-5 4,-7 9,-7 -2,-4 -2,-8 2,-13 3,-4 7,-9 11,-13 4,-5 8,-9 11,-13 3,-4 4,-8 3,-12 1,-3 3,-5 6,-5 4,0 5,-2 3,-7l4 0c-3,-4 -3,-6 -1,-7 2,0 2,-3 1,-8 7,0 11,-1 12,-4 0,-2 1,-6 2,-11 2,0 4,-1 5,-2 2,-1 3,-2 5,-3 1,-3 1,-4 0,-4 -2,0 -3,-1 -3,-3l2 -2c2,-1 3,-1 4,0 0,1 1,2 3,2 -2,-2 -1,-5 3,-8 4,-3 4,-5 0,-7 2,-1 4,-2 6,-3 2,-1 4,-2 6,-3 0,-2 0,-4 0,-4 -1,-1 -1,-2 -1,-4 5,1 9,-1 12,-5 3,-5 5,-9 7,-13 -4,-1 -7,0 -9,2 -3,3 -5,6 -8,9 -2,4 -5,7 -7,10 -3,3 -7,5 -12,5 1,2 1,3 0,5 -2,1 -2,4 -1,7 -2,0 -3,0 -3,-1 0,-1 -1,-1 -2,-1 -2,2 -2,4 -1,5 1,1 1,3 1,6 -3,1 -4,1 -5,-1 0,-1 -2,-2 -4,-2 1,5 0,9 -5,12 -4,3 -7,8 -7,15 -2,0 -3,-1 -3,-2 0,-1 -1,-1 -3,-1 1,4 0,7 -3,10 -3,3 -6,5 -10,6 0,3 1,5 4,6 -6,1 -9,4 -10,9 -1,4 -3,9 -5,14 -3,-2 -5,-2 -7,-1 -1,2 -2,4 -3,7 0,3 -1,6 -3,9 -1,3 -3,5 -6,6 -1,2 -1,3 0,4 1,1 1,3 1,5 -2,0 -4,-1 -6,-3 -2,5 -3,8 -2,10 0,2 0,5 -2,8 -4,0 -5,-1 -3,-3 3,-2 3,-3 1,-2 -5,2 -7,5 -6,8 1,3 2,6 3,9 -2,-1 -3,-2 -4,-2 -1,0 -1,-1 0,-3 -4,2 -6,4 -4,6 1,2 2,5 2,9 -5,-3 -8,-3 -8,-1 -1,2 -2,5 -4,9 -2,0 -3,1 -4,3 0,2 -2,3 -5,1l0 14c-3,0 -5,1 -6,4 -1,2 -2,5 -4,7 3,3 5,4 6,4 -10,4 -16,15 -18,32 -2,2 -4,2 -4,0 -1,-1 -2,-2 -4,-2 -2,2 -2,7 0,14 -3,0 -5,-1 -6,-2 2,8 1,14 -3,17 -4,4 -5,8 -3,12 -5,2 -8,4 -8,7 -1,3 -3,6 -8,8 3,7 4,13 0,18 -3,5 -6,11 -8,18 -2,-2 -3,-4 -3,-5 -6,6 -7,12 -3,17 -9,0 -11,3 -6,9 -7,1 -10,-2 -8,-8 11,-23 21,-45 31,-66 9,-21 21,-41 36,-61 2,-8 5,-17 11,-27 5,-10 12,-18 20,-23 -3,-7 -2,-12 3,-15 5,-3 8,-8 8,-15 11,-17 22,-34 33,-50 12,-17 23,-34 34,-51 11,-11 22,-23 32,-35 10,-13 21,-23 34,-32 8,1 15,1 21,1 6,0 13,1 20,3 0,3 -1,5 -3,5 3,2 7,3 11,3 5,0 9,1 14,3 -2,5 -1,7 2,8 3,0 5,2 7,4 1,8 4,17 7,29 4,12 2,20 -5,25 1,1 2,1 3,1 1,-1 2,0 4,2 -7,9 -9,19 -6,30 -2,1 -3,2 -5,3 -1,1 -3,1 -5,1 -1,4 0,6 4,4 4,-1 6,0 5,5 -2,0 -3,0 -3,-1 0,-1 -1,-1 -3,0 4,10 4,18 -1,24 -4,6 -6,14 -4,25 -2,3 -4,4 -7,3 -3,-2 -6,0 -8,5 0,2 1,2 3,1 2,-1 4,-1 6,0 0,6 -3,8 -10,6 -2,2 -3,3 -2,3 2,2 4,3 5,3 1,0 2,2 4,5 0,4 -1,7 -3,8 -2,2 0,3 5,4 -3,7 -7,12 -11,14 2,3 3,6 1,9 -1,3 -1,6 1,9 -2,1 -4,1 -7,1 -2,0 -5,1 -7,3 2,2 5,3 7,4 3,0 3,-1 2,-5 4,1 5,3 3,6 -3,3 -6,4 -9,3 1,3 2,6 2,9 0,4 1,7 3,9 .........完整代码请登录后点击上方下载按钮下载查看