gsap+svg实现三维线条球体交互动画效果代码-html代码-BFW代码库

gsap+svg实现三维线条球体交互动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现三维线条球体交互动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
html, body, svg {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:radial-gradient(#222,#000);
}
</style>


  
</head>

<body >
  <svg viewBox="0 0 800 800" preserveAspectRatio="xMidYMid slice">
  <g id="stage"></g>
</svg>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
      <script>
const stage = document.querySelector('#stage'),
      nPaths = 50,
      rad = 550

// create sphere of rings
for (let i=0; i<nPaths; i++){
  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle")
  stage.appendChild(circle)
  gsap.set(circle, {
    attr:{
      fill:'none',
      stroke:'hsl('+(145+i/nPaths*200)+',100%,50%)',//'#000',
      'stroke-width':.6,
      // 'stroke-dasharray':'1 4',
      cx:400,
      cy:gsap.utils.interpolate(40.........完整代码请登录后点击上方下载按钮下载查看