gsap实现svg书法路径绘制遮罩显示图片动画效果代码-html代码-BFW代码库

gsap实现svg书法路径绘制遮罩显示图片动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现svg书法路径绘制遮罩显示图片动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
           font-family: "proxima-nova", sans-serif;
          padding: 0;
          margin: 0;
          display: flex;
          height: 100vh;
          overflow: hidden;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 100%);
        }
        
        svg {
          width: auto;
          height: auto;
          max-width: 800px;
        
        }
        
        #letters path {
          fill: white;
        }
    </style>



</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">

  <defs>
    <mask id="m1" maskUnits="userSpaceOnUse">
      <path id="mask1" class="strokeMask part1" d="M418.27,248.91c10.32,15.83,24,40.87,29.05,80.25,5.1,39.91-3.49,70.57-9.8,92.24-13.24,45.46-34.32,75.27-57,106.75C356.46,561.52,330.93,597,284.65,628c-28.61,19.19-63.81,42.8-112.21,41.76-17.71-.38-61.15-1.31-84.61-33.77-22.44-31-11.62-70.23-8.35-82.06,3-10.68,12.15-44,43.94-61.73A79,79,0,0,1,211.29,498" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="108.4" />
      <path id="mask4" class="strokeMask part2" d="M860,95.15c-35.5,19.42-63.66,16.75-140,190.9C713.29,301.29,621,551.8,718,644.4c25.21,24.09,42.09,37.54,81.72,32.15,2.57-.35,63.51-9.65,92.43-63,7.24-13.35,22.81-42,10.72-71-11.28-27-38.18-54.25-90.43-34.16" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="150.04" />
    </mask>
    <mask id="m2" maskUnits="userSpaceOnUse">
      <path id="mask2" class="strokeMask part2" d="M382.43,268.52S343.58,395.79,267.22,378.37,205.6,260.49,205.6,260.49,219,109.11,394.48,145.28,578,456.07,578,456.07" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="112.53" />
    </mask>
    <mask id="m3" maskUnits="userSpaceOnUse">
      <path id="mask3" class="strokeMask part2" d="M577.56,453.6c1.78,49.26-8.54,110.91-14.79,138.63,0,0-6.37,35.5-41.79,81a51.78,51.78,0,0,1-16.56,15.4c-2.89,1.65-20.5,11.72-38.52,4.62-22.34-8.79-26.53-36.56-27.34-42a94.34,94.34,0,0,1-.73-18.65c2.23-65.73,13.77-93.06,23.45-117.31,12.32-30.86,26.53-50.94,42-72.79,8.78-12.42,35.53-49,90.9-98.21,45.64-40.55,86.11-67.78,117.85-89,38-25.38,72.15-56.74,112.08-79,0,0,25.17-15.83,47.38-47.37a41.48,41.48,0,0,0,5.77-18.1c.58-7.23-1.77-9.7-2.48-10.73-2.15-3.08-5.43-3.15-9.91-4.22-2.09-.5-2.35,0-5,1.38" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="10.72" />
    </mask>

    <mask id="imageMask" maskUnits="userSpaceOnUse">
      <g id="showImage" fill="white" opacity="0">
        <path d="M419.2,249.89h0a2.13,2.13,0,0,0-.92,2.92c17.3,32.32,25.07,64.59,25.07,95.08,0,144.28-199.63,284.83-306,284.83-37.31,0-57.83-17.42-57.83-53.49,0-47.26,34.82-93.9,84-93.9a85.67,85.67,0,0,1,37,8.51,2.13,2.13,0,0,0,3-2.38l0-.19a2.19,2.19,0,0,0-1.09-1.44c-13.37-7.12-26.15-10.1-38.93-10.1-50.37,0-92.66,49.75-92.66,107.59,0,85.2,49.13,126.86,111.94,126.86,102,0,269.29-138.68,269.29-352,0-39.16-9-77.12-30.06-111.51A2.15,2.15,0,0,0,419.2,249.89Z" />
        <path d="M782.44,204.07c21.76-59.7,49.13-103.23,79-103.23l1.7,0-3.36-6.23c-39,2.49-109.44,70.85-163.77,168.51l-6.84,13.06C650.59,350.22,622,439.77,622,530.57c0,140.55,69.65,195.9,14.........完整代码请登录后点击上方下载按钮下载查看