gsap+MorphSVGPlugin3实现划线等高线动画效果代码

代码语言:html

所属分类:其他

代码描述:gsap+MorphSVGPlugin3实现划线等高线动画效果代码,拖动鼠标按住鼠标左键拖动图形即可看到效果。

代码标签: gsap MorphSVGPlugin3 划线 等高线 动画

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


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

<head>

 
<meta charset="UTF-8">
 

 
 
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

html
, body, svg {
 
width:100%;
 
height:100%;
 
background:#111;
 
overflow:hidden;
 
font-family:Roboto, sans-serif;
 
font-size:20px;
}

text
{
 
user-select:none;
}
</style>

 
 


</head>

<body  >
 
<svg class="stage" fill="none" stroke="#fff">
 
<path class="path1" d="M0,0"/>
       
<path class="path2" d="M0,0"/>
 
<g class="blended"></g>
 
<rect width="100%" height="100%" fill="rgba(0,0,0,0)" stroke="none"/>
       
<text class="dir" x="80" y="40" text-anchor="middle" stroke="none" fill="#fff">Draw 2 Paths</text>  
</svg>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin3.min.js"></script>
     
<script type="module">
console.clear()

import { spline, pointsInPath } from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.0";

const blendSteps = 25,
      precision = 99,
      stage = document.querySelector('.stage'),
      path1 = document.querySelector('.path.........完整代码请登录后点击上方下载按钮下载查看

网友评论0