js+svg实现一个曲线生长动画效果代码-html代码-BFW代码库

js+svg实现一个曲线生长动画效果代码

代码语言：html

所属分类：动画

代码描述：js+svg实现一个曲线生长动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background: hsla(220,50%,90%,.5);
}
</style>



</head>

<body >
  <svg id="svg" width="100%" height="100%" viewbox="100 0 600 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
	<g id="lines">
		<path d="" stroke="hsla(0, 10%, 50%, .4)" stroke-width=".1" id="trace" fill="none" />
	</g>
	
	<path d="m 300 200 c 310 310 -120 120 -30 -30" id="animated" fill="none">
		<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 360 200" to="360 360 200" dur="10s" repeatCount="indefinite" id="rotate"></animateTransform>
	</path>
	
	<path d="m 300 200 c 310 310 -120 120 -30 -30" id="animated2" fill="none">
		<animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 360 200" from="360 360 200" dur="12s" repeatCount="indefinite" id="rotate"></animateTransform>
	</path>

	<path d="m 300 200 c 310 310 -120 120 -30 -30" id="animated3" fill="none">
		<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 360 200" to="360 360 200" dur="6s" repeatCount="indefinite" id="rotate"></animateTransform>
	</path>
</svg>
  
      <script >
function getPointAtLength(length, element) {
  const point = element.getPointAtLength(length);
  const matrix = element.getCTM().inverse();
  return point.matrixTransform(matrix);
}
const path1 = document.getElementById("animated");
const path2 = document.getElementById("animated2").........完整代码请登录后点击上方下载按钮下载查看