gsap+svg实现多彩线条波纹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg实现多彩线条波纹动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  background: black;
  overflow: hidden;
  margin: 0;
}

svg {
  width: 100vw;
  height: 100vh;
  opacity: 0;
}

defs path {
  stroke: white;
  stroke-width: 2px;
}
</style>



</head>

<body >
  <svg viewBox="0 0 921.5 600" preserveAspectRatio="xMidYMid slice">
  <defs></defs>
  <path d="M922.2-71.4c-13.43656-.412-26.48915,5.62324-35.99986,14.90046-14.855,13.16536-29.04824,42.71862-47.9996,46.90013-17.572,1.75686-29.56248-18.48017-40.00091-29.9-29.18831-35.737-40.50058-23.80184-63.99953,7.89994C717.36217-9.113,702.9969-3.10112,678.1999-18.80068c-9.80071-5.794-20.17021-13.15093-31.99991-13.29919-21.53446.34057-37.32314,19.99687-60,8.99916-23.38951-10.14357-39.21427-55.75048-67.99964-38.69961C498.937-51.89154,479.02251-12.143,458.20042-16.39949c-11.45371-3.33172-19.31009-13.99176-28.00056-21.50037C413.92368-52.97929,402.31529-44.67435,390.2-29.99949c-9.99742,11.65631-18.84148,25.89031-31.99977,34.29966-18.84346,10.84032-34.29633-12.23026-52.00044-15.59961-9.15219-2.33868-18.91.39229-27.99975,1.69967-13.97887,2.1049-26.77544-5.99233-40-8.90051-25.62086-6.35959-41.05658,16.23289-64,12.60093-25.66962-6.55755-37.99794-30.49476-68.00018-15.79995-11.469,5.43541-23.12182,12.3855-36,13.69907C38.95149-5.59716,16.01128-31.37117-5.8-49.9" fill="none" stroke="#e8505b" stroke-dasharray="8 5"/>
  <path d="M922.2-56.3a56.94513,56.94513,0,0,0-36,12.60012c-14.53055,10.97908-29.409,37.51327-47.99959,38.70049-17.535-1.107-28.95878-21.385-40.00088-33.1-34.37177-42.28981-48.22773-1.69194-71.99957,23.8-15.17058,16.46925-30.61237,13.269-48.00013,2.49878C669.6424-16.81079,660.42445-23.07,650.2-23.5c-22.089-.35286-37.08827,26.6514-60,20.6-26.02393-7.27763-40.04983-64.55317-67.99962-53.8006-23.35574,11.24147-32.78865,42.10628-56,52.80116-15.69881,4.14511-25.8689-13.21158-36.00068-22.2-13.07129-13.02322-23.6025-12.90669-35.99967.90009C383.38367-13.56468,374.59275.985,362.20014,11.1001c-16.20165,13.09869-30.341-2.107-44.00021-10.90058-6.9496-4.44042-15.65447-7.58087-24-6.79922C287.71877-6.15244,280.66752-4.103,274.2-3.50006c-9.34789.98225-18.92261-2.18495-28-3.90008-20.23839-3.97656-34.479,6.7327-51.99982,14.10089C164.92935,19.50593,146.38282-18.809,118.2-17.10041c-12.61817.69626-23.98422,8.03261-36,11.20034C48.334,4.54672,20.14637-19.465-5.8-37.6" fill="none" stroke="#e8505b" stroke-dasharray="23 2"/>
  <path d="M922.2-39.1c-14.04.007-28.65536,3.55258-39.99989,12.10028-15.13446,10.18256-31.53287,34.08971-51.99971,23-20.18208-10.4688-36.22226-50.58582-60-45.90088-24.44324,8.54316-32.33009,41.53223-56.0006,51.8003C691.84,10.00314,674.946-13.38164,654.20006-16.40042c-30.30464-2.485-50.05055,53.57238-80.00013,18.59989-12.61224-13.14236-28.55912-54.67817-47.99936-52.39994-21.39506,5.4936-35.01355,39.4101-52.0011,53.59978C445.478,28.28,433.26837-31.16834,406.20014-24.10063c-6.21795,2.33463-11.72848,8.10152-16,13.00081-8.98756,10.157-17.10208,22.42577-28,30.69989C345.88745,32.10033,330.93281,14.17158,318.2,5.09948,311.424.2022,302.69562-3.39677,294.2-2.49964c-10.55386,1.20262-21.23322,5.32248-32,4.39928-21.92555-2.15679-32.92833-.09792-51.99983,11.601-22.17142,13.86705-34.99359,13.9364-56.00005-2.50139C144.42533,3.7228,134.2838-4.7949,122.2-7.7999,110.18133-10.72681,97.77227-6.35379,86.2001-3.39974,73.25632-.18466,59.24117.43781,46.2-2.60024,27.78866-6.61468,11.108-16.39235-5.8-24.3" fill="none" stroke="#e8505b" stroke-dasharray="24 4"/>
  <path d="M922.2-20c-13.47139.34546-27.77378,1.31331-39.99994,7.5001C869.3-6.75364,857.17355,4.80441,842.2002,3.60023c-32.05478-4.4394-48.32175-70.92042-84.00009-35.1995C741.7454-16.71348,728.32642,13.8032,702.20044,9.70061,686.0963,7.05175,673.82923-5.93151,658.2001-9.80031c-27.63938-4.53285-39.38884,31.47642-64.00025,36.89987-19.35218,1.91811-30.909-27.83129-40.0004-41.399-6.81777-10.14123-14.00345-26.14263-27.999-26.5011C508.5262-37.75549,493.90032-6.7464,482.19939,6.49932c-18.848,24.05407-30.18763,18.04535-47.99931-2.69994-6.48068-6.89065-13.84507-16.19935-24-16.89947C388.17237-11.05484,376.9236,25.904,354.1998,30.09958c-16.68629.90652-26.77985-16.40443-40.00012-23.89889A30.425,30.425,0,0,0,290.2,2.20054c-6.42219,1.68687-13.47888,4.18337-20,5.49942-6.34586,1.11247-13.60428,1.28065-20,2C233.76256,11.14753,219.69388,20.957,206.2002,29.60041c-14.98621,9.584-28.91052,10.919-44.00011.29889C143.543,17.35719,126.7344-3.37813,102.19981-1.99967,88.97134-1.261,75.51055,1.58574,62.2,1.09958,39.06822,1.05377,16.5136-5.58293-5.8-10.9" fill="none" stroke="#e8505b" stroke-dasharray="11 3"/>
  <path d="M922.2,0c-14.06338.09731-30.64875-.88817-44.00129,3.10029-17.22254,5.03642-31.89948,11.14245-47.99864-.701-15.48757-9.81861-28.75382-35.19743-47.99964-35.29993-20.19241,3.19023-32.85851,27.04845-48.00086,39.2-15.14448,13.47626-31.46469,11.1713-47.99968,1.8C677.24652,3.15963,668.319-3.56059,658.2-5.9c-12.735-2.85113-23.69833,6.67925-32,15.10034-21.26136,21.9151-37.79119,45.50129-59.99972,8.69916-9.27461-12.65925-25.35869-55.04228-43.99977-48.79975-23.47008,10.80186-35.676,55.27641-60.00034,63.10053-11.96526,1.63545-20.587-9.72368-28.00027-17.4002C425.05632,4.62081,412.4924-9.21739,398.2.90066c-18.51621,12.87577-34.59938,46.18428-60,25.29869-10.35065-7.73741-19.22265-19.25883-32-23.09945-11.02464-2.809-21.92276,3.44256-32.0001,7.1C265.31047,13.40761,255.29442,14.54174,246.2,17c-20.787,5.17216-35.49059,23.5758-55.99966,29.10075-9.65377,2.25489-19.9811-1.32713-28.0002-6.70112C147.10587,29.3159,134.4417,15.094,118.2,6.7a61.37693,61.37693,0,0,0-20-5.79977C91.28146-.24289,3.3368.49577-5.8.3" fill="none" stroke="#f9d56e" stroke-dasharray="11 4"/>
  <path d="M922.2,20c-18.63657-.37017-37.295-4.61473-56-3.19941-46.60907,4.571-57.07375-49.42844-88-36.30128C754.7686-7.69627,740.58087,27.43639,710.20014,21.59991c-14.65832-2.89374-27.302-11.76184-40-19.10024-29.50795-17.76954-45.44331,14.88327-64.00031,32.10063-23.52751,23.97605-35.67186,1.61463-48-18.90072C550.70834,4.359,538.83215-24.55594,522.20051-20.40054c-18.75053,7.88236-31.805,40.1063-48.00114,54.59986-29.90017,28.12966-43.25461-33.14483-71.99926-25.4C384.36845,15.36168,371.86555,41.69481,350.19983,33.7c-18.64965-7.26758-29.77446-32.55847-51.99969-29.90043C289.80867,5.28922,281.86545,10.22493,274.2,13.7c-7.53853,3.435-16.13347,6.04715-24,8.59993-17.72292,5.02747-32.15706,17.32635-47.99967,26.10068C161.799,70.177,136.18782,11.76556,98.19968,3.00062,80.06308-1.57714,60.68572-1.80475,42.2.5998,26.10838,2.83513,10.11178,7.31916-5.8,10.5" fill="none" stroke="#14b1ab" stroke-dasharray="31 4"/>
  <path d="M922.2,39.1c-15.1026.205-29.61665-5.37535-44-9.20017-11.89183-3.141-24.73976-4.71587-36-9.89983C832.06856,15.33269,822.91079,7.84,814.20007.99986,800.58225-9.81393,788.598-13.08595,774.2-1.59932c-20.53381,16.2535-34.17858,39.72743-64,28.19855-15.76877-4.82134-29.45365-14.81476-43.9997-22.19971-27.686-14.3263-43.48389,16.823-60.00048,33.50056C599.19868,45.11772,588.93,55.17024,578.2,49.49963,558.24573,36.04308,552.65945,8.76968,534.19966-6.29969c-10.57749-7.8317-21.08441,1.40357-27.99959,9.500.........完整代码请登录后点击上方下载按钮下载查看