logo.html

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
	<meta charset="UTF-8">
	<title>logo</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
	body{background: #000;}
		#signBox {
		background-color: #000;
		position: relative;
		width: 375;
		height: 600;
	}
	path {
		stroke-dasharray: 500;
		stroke-dashoffset: 20;
		animation: dash 5s linear;
		animation-fill-mode: forwards;
	}
	@keyframes dash {
		to {
		    stroke-dashoffset: 1;
		}
	}
	</style>
</head>
<body>
	 <div id="signBox">
  <svg id="signSvg" viewBox="0 0 375 375">
    <path id="signPath" d="M 100 120 a 100 100  0 1 1 0 1 h90 v -100 v 50h-30 a 10 10 0 0 0 0 50 a 25 25 0 1 1 -25 50"
    fill="none" stroke="#fff" stroke-width="2px"></path>
    <path id="signPath" d="M 200 120 a 100 100  0 1 1 0 1 h90 v -100 v 50h-30 a 10 10 0 0 0 0 50 a 25 25 0 1 1 -25 50"
    fill="none" stroke="#fff" stroke-width="2px"></path>
  </svg>
  <div id="pen"></div>
</div>

<script>
//代码获取长度并设置动画相关属性
var path = document.querySelector('path');
var len = path.getTotalLength();
console.log("总长度 : " + len);

//定义实线和空白区域长度
path.style.strokeDasharray = len + 10;
//定义初始dash部分相对起始点的偏移量,正数表示往前便宜
path.style.strokeDashoffset = len + 10;

</script>
</body>
</html>