gsap+svg实现多彩线条波纹动画效果代码
代码语言：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.50028C499.32146,11.2012,492.624,20.93918,486.2,29.3c-7.2605,8.75629-15.7601,20.00659-27.99989,21.00008-21.50458-1.4501-30.35452-30.044-52.00013-31.3-15.15707.7778-25.26842,15.81944-40.00011,18.29951-23.52,2.44434-35.3237-25.14494-55.99992-31.19921-8.24867-2.34657-17.00469,1.24353-23.9998,5.50007-7.63222,4.45783-15.83369,9.4544-24.00018,12.89939-11.96538,5.075-24.77145,9.4403-35.99983,16.10037C213.645,47.6876,201.02189,57.08237,186.2,58.29992c-28.09309.60456-46.88251-24.68906-68.00016-39.49943C98.18473,3.06792,71.14066-3.74266,46.19991,2.00029,28.13225,6.17622,11.511,15.45064-5.8,21.8" fill="none" stroke="#e8505b" stroke-dasharray="27 5"/>
<path d="M922.2,56.2c-15.82593.39858-30.116-7.786-44-14.30022C865.12474,35.8,850.89583,31.31134,838.2,24.4c-24.36434-12.81246-37.48636-32.67017-63.99987-9.69945C753.56039,32.17923,742.36256,46.976,714.20005,32.69929c-9.24171-4.21113-19.19176-8.3108-28-13.39936-9.04328-4.79375-18.068-11.1503-28-13.99995C636.62856-1.28894,622.384,21.12684,610.19989,35.1,593.92243,54.243,580.9482,66.88709,562.20015,41.69943c-9.997-11.473-22.48283-40.73649-39.99962-38.3-17.55132,5.74726-30.16033,30.92673-44.0011,43.39985-8.47443,8.59566-20.34134,14.86009-31.99951,8.4C427.48908,44.59117,414.58541,21.128,390.2,33.70072c-9.76262,4.72467-21.28905,9.31859-32,4.89865-20.3319-7.72454-35.77863-38.76241-59.9997-30C286.86194,13.51354,277.1,22.34371,266.19984,28.09967,254.83273,34.37767,241.961,38.47342,230.2,43.89989c-16.41814,7.52552-33.11753,18.67172-52.00007,16.29977-27.23123-3.60356-46.39864-26.11166-68-40.89935-19.19253-14.05423-45.19935-22.40588-68-12.29969C25.39948,13.84812,10.57831,25.28748-5.8,33" fill="none" stroke="#f9d56e" stroke-dasharray="23 2"/>
<path d="M922.2,70.5c-13.14042.40658-25.27278-6.20721-36-13.10028a280.72044,280.72044,0,0,0-28.0001-15.99963c-9.19564-4.521-18.99254-9.11048-27.99985-14.00024-9.70314-5.208-20.46462-12.38055-32-10.39982-24.23341,5.09917-40.25886,41.67285-68,28.99962-6.656-2.99282-13.47229-7.45723-20.00013-10.69958-9.10545-4.5635-18.94261-8.94225-27.9999-13.60015-16.14734-8.47976-35.378-20.45663-51.9999-6.29929-14.87924,11.95044-24.46989,30.08728-40,41.2995-12.78478,8.93679-23.85752-.88366-32-10.80074-9.5201-10.35572-19.90222-30.15681-35.99964-28.69994-18.73593,5.33462-31.945,29.74048-48.00093,41.09989-9.62451,7.56086-20.97158,9.771-31.99956,3.7-13.97767-7.62224-26.64687-22.22058-44-19.999-6.46617.81187-13.496,2.92092-19.99992,3.49962-11.98686,1.277-23.25433-5.31622-31.99983-12.90034-8.7646-7.18906-17.32115-16.26329-28.00009-20.59966-11.32309-4.81514-23.17717,1.99317-31.99991,8.90059-8.79976,6.60881-18.06857,13.843-28.0002,18.69939C246.87812,45.3034,234.043,48.41251,222.2,52.80005c-12.79415,4.5817-26.20213,9.57705-40.00007,9.29966-41.37069-.24379-66.56542-40.15807-103.99981-51.5C45.23186-.84338,20.85029,31.39911-5.8,44.8" fill="none" stroke="#e8505b" stroke-dasharray="15 2"/>
<path d="M922.2,81.4c-20.388.972-35.71863-15.18207-52.00023-24.99978C858.92246,49.18555,846.35514,43.343,834.2,37.8c-9.95434-4.316-20.76686-10.49463-31.99993-8.59994-15.959,3.45579-26.24162,18.31056-40.00027,25.99968-21.875,12.74038-37.56329-9.637-55.99986-17.80008C695.8212,32.6428,684.55,28.72381,674.2,23.8999c-11.12753-4.7459-23.59139-11.44417-35.99994-8.2-25.33731,6.32514-44.77261,62.65907-71.99974,46.00067-13.99-8.5463-22.92112-26.62111-40-29.60106-17.48176-.61115-33.98228,21.75978-48.00072,31.19985-10.06026,7.74251-23.72326,12.63032-35.9997,7.29991-13.33614-5.34059-25.18149-15.75841-40-16.89887-11.95185-.64218-24.93765,1.47833-35.99979-4.30085-19.75342-8.42374-37.89447-39.74185-59.99979-34.2C297.20343,17.83449,289.41114,24.585,282.2,30.3,272.50487,38.12961,262.06421,46.35475,250.2,50.59985,241.34935,53.88331,231.41651,55.50747,222.2,57.4c-7.76847,1.50582-16.15435,3.41054-24,4.5a106.79816,106.79816,0,0,1-52-5.1C130.70188,50.83658,116.44127,41.40154,102.2,33c-16.56518-9.52-36.91323-21.068-56.00009-11.89983C27.33935,30.47007,12.84337,47.18459-5.8,57" fill="none" stroke="#e8505b" stroke-dasharray="9 2"/>
<path d="M922.2,88.8c-20.39424,1.5871-35.82676-14.45168-52.00018-24.29993-9.90109-6.42566-21.13143-11.48215-31.99989-16-8.92986-3.42906-18.3288-7.95187-27.99991-8.60016-14.5738-.3103-25.28746,11.48377-36.00012,19.70018C748.8784,80.64033,735.0278,59.02833,714.2,45.49937c-10.854-6.80969-24.02638-9.222-36-13.29938-11.846-3.45735-23.49259-9.95451-35.99989-10.60023-20.97548.66645-33.50482,24.59037-48.00053,37.09958-33.12073,32.31207-44.68372-16.92709-75.99955-10.1-22.68633,7.22143-39.35852,29.22977-64.00009,31.30039-12.664.85582-24.44682-5.48931-35.99988-9.69994-10.11894-3.85813-21.43448-4.41167-32.00009-6.19943-30.24945-4.56347-46.83453-41.32566-71.99955-43.80117-12.65684-.06-22.84376,9.81922-32.00044,17.40069-25.15676,22.25-35.25733,23.99512-68.00012,25.19935-23.84957,1.98272-48.3415,3.4088.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0