TweenMax+MorphSVGPlugin+DrawSVGPlugin+svg实现小球弹跳线条文字显示动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+MorphSVGPlugin+DrawSVGPlugin+svg实现小球弹跳线条文字显示动画效果代码，点击开始按钮，红色小球下落，画出一道弧线，起伏向前，文字显示出来。
代码标签： TweenMax MorphSVGPlugin DrawSVGPlugin svg 小球 弹跳 线条
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
overflow: hidden;
width: 100%;
height: 100vh;
position: relative;
background-color: rgb(32, 32, 32);
}
/* === SVG === */
svg {
display: block;
width: 100%;
height: 100vh;
}
svg #startText,
svg #restartText {
fill: #ffffff;
pointer-events: none;
}
svg #ball {
pointer-events: none;
}
svg #text,
svg #com {
fill:transparent;
}
svg #paths {
fill:none;
stroke: rgb(80, 80, 80);
stroke-width: 2px;
stroke-linejoin:round;
stroke-dasharray:10;
stroke:gray;
opacity: 0;
}
svg #startClick {
opacity: 0;
cursor: pointer;
}
svg #startClick:hover + #startText,
svg #restartClick:hover + #restartText {
stroke: rgba(255,65,65,0.3);
stroke-width: 4px;
}
svg #restartClick {
cursor: pointer;
fill:transparent;
}
svg #restartText {
opacity:0;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="wrapper" ontouchstart="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1378 564" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- I use mask to make dashed line (DrawSVG plugin won’t draw a dashed path) -->
<g stroke-width="3px" stroke="#fff">
<mask id="mask1">
<path id="path1_m" d="M196.5,79l3,321.5s188-246,473,7" />
</mask>
<mask id="mask2">
<path id="path2_m"
d="M672.5,407.5s-141.2-111.8-261.8-10c-.2.2-.5-.1-.4-.3,36.5-57.4,205.9-744.5,542.2,2.3" />
</mask>
<mask id="mask2_1">
<path id="path2_1_m" d="M952,399.2c1.7-503.1,103.2-502.7,101.5.3" />
</mask>
<mask id="mask3">
<path id="path3_m" d="M1054.5,399.5c.3-159.5,21.7-422.2,42,0" />
</mask>
<mask id="mask4">
<path id="path4_m" d="M1097,400c.3-73.6,26.2-196.4,40,0" />
</mask>
<mask id="mask5">
<path id="path5_m" d="M1138,400c-.1-24.1,47.7-102.5,67,82" />
</mask>
<mask id="mask6">
<path id="path6_m" d="M1205,482c1.9-11.9,56.7-134,91,9" />
</mask>
<mask id="mask8">
<path id="path8_m" d="M1294,492C1122,40.1,887.4-84.9,539.5,396.5" />
</mask>
<mask id="maskB1">
<path id="path_b1_m" d="M541,426.5c-.4-38.4,55.1-399.7,140.5-63-54.5-105.5-139.6-89.3-140-42" />
</mask>
<mask id="maskB2">
<path id="path_b2_m" d="M542,426.5c.4-38.4-55.6-398.7-141-62,54.5-105.5,140.1-91.3,140.5-44" />
</mask>
<mask id="mask9">
<path id="path9_m" d="M541,322.5C544.5,191.8,752.1-20.6,868,400" />
</mask>
<mask id="mask10">
<path id="path10_m"
d="M867.5,402.5l-59,33,58,22-56-4,55-5-56-2,57-5-57-2,57-6-58-2,58-6-58-2,59-23" />
</mask>
<mask id="mask11">
<path id="path11_m" d="M867.5,401.5c-16.3-192.3-494.2-690.2-576-7" />
</mask>
</g>
<!-- use for fake morphing effect on some letters -->
<clipPath id="r_clipPath">
<circle id="r_circle" cx="200" cy="402" r="0" />
</clipPath>
<clipPath id="e_clipPath">
<circle id="e_circle" cx="952.5" cy="401.5" r="0.5" />
</clipPath>
<clipPath id="h_clipPath">
<circle id="h_circle" cx="869.5" cy="401.5" r="0.5" />
</clipPath>
<clipPath id="com_clipPath">
<circle id="com_circle" cx="1295" cy="500" r="1" />
</clipPath>
<!-- for hide letter: "T" -->
<clipPath id="rect_clip">
<rect id="tHide" x="1039" y="263" width="124" height="168" />
</clipPath>
<!-- for shine effect -->
<linearGradient id="shine" x1="0%" y1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="rgba(255,255,255,0.2)" />
<stop offset="100%" stop-color="transparent" />
</linearGradient>
</defs>
<!-- background -->
<image width="2000" height="1294" transform="translate(-11 -186) scale(0.7)" preserveAspectRatio="xMinYMin slice" xlink:href="https://user-images.githubusercontent.com/26748614/112760873-cf72ca00-8ff8-11eb-8395-4ffdd3b499b5.jpg"/>
<!-- for shine effect -->
<rect id="shine" x="0" y="-50%" width="30%" height="200%" transform='translate(2000 0) skewX(-25)'
fill="url(#shine)" style="opacity:0" />
<!-- use for capturing click event on "Start" text -->
<rect id="startClick" x="103" y="43.4" width="180" height="57.59" />
<g id="startText">
<path
d="M139.8,72.5c-3-3.1-7.1-4-11.4-4.2s-7.7.9-10.8-.6a4.8,4.8,0,0,1-1.3-7.8c3.1-3,10.5-1.4,14.4-1.4s5.1-.1,7.6,0c.4,0,3.4.3,3.8,0s.4-9.3-.1-9.7-9.5-.1-11.5-.1c-5.1,0-11.3-.9-16.2,1a14.8,14.8,0,0,0-7.5,20.5,15.1,15.1,0,0,0,8.5,7c4.9,1.6,10.2-.4,15.1.9a4.8,4.8,0,0,1,3.7,5.6c-.7,3.4-3.7,4-6.7,4.1-5.2.1-10.5-.3-15.8-.2-2.1,0-3-.3-3.8,1.1s-.5,6.4-.1,7.4.5,1.4,2.8,1.4h8c5.3,0,11.6,1,16.7-1.1C144.5,92.3,147.1,79.7,139.8,72.5Z" />
<path
d="M160.2,46.5c-1.8,0-8-1.3-9.2.2s-.2,7.8-.1,9.8.5,2.8.2,3.6-1.3.7-2.9,1-1.2-.2-1.8.5,0,4.3,0,5.4-.8,3.1,1.5,3.5,2.1-1,3.1.7-.1,4.3-.1,5.6c0,6.9.9,13.5,7.1,17.8a18,18,0,0,0,9.6,2.9c2.8.1,6.4,1.2,6.9-2,.1-.9.3-6.1-.1-6.8s-5.1-.4-6.5-.5c-8.3-.6-7.6-7.1-7.7-13.7-.1-2.6-1-3.6,1.6-4.1s4.7,0,6.8,0,3.5.5,4.6.1,1-.1,1.2-2,0-2.5,0-3.7.4-3.1-.5-3.7-4.4,0-5.7,0-4.1.3-6.1.1-1.5.3-2-1.4.1-4.1.1-5.7Z" />
<path
d="M208.9,65.4c-12-11.3-30.8-3.6-31.3,12.9s18.6,25.7,31.3,14.2c1.7,2.3,6,8.6,6,2.3s-.1-10.4,0-15.6c0-2.7.1-5.5.1-8.2s.7-6.7-.2-8.9S210.3,63.8,208.9,65.4Z" />
<path
d="M232.3,62.2a15.2,15.2,0,0,0-5.1,3.2c-1.3-1.9-5-7.5-5.5-2.5s.2,12.8.2,18.9v9.8c0,1.4-.8,4.9.3,5.9s5.2.1,6.2.1c3.5,0,2.8-1.1,2.8-4.3,0-5.5-1.7-13.8.7-18.8s7.6-4.1,12.1-4.1c2.6,0,2.5-.2,2.4-2.8,0-1,.7-5.2,0-6.1s-3.2-.4-4.3-.4C238.8,61.2,235.5,61,232.3,62.2Z" />
<path
d="M279.2,70.4c0-1.9,1.3-8-.2-9.3s-8.6-.1-10.5,0-3.4.4-3.4-2.5.9-7.8.1-10.7-1.8-1.4-4.1-1.4c-.7,0-4.2-.6-4.9,0s-.4,3.7-.3,4.8.9,6.5.1,8.6-3.5,0-4.7,1.6-.1,5.1-.1,6.7c.1,4.5,2.2.3,4.4,2.3s.2,7.3.2,9.1c.1,3.4.5,6.7,2.2,9.7,4,7.1,11.1,8.2,18.5,8.2,3.3.1,2.8-.6,2.8-3.7s.9-4.7-.7-5.6-3.6.1-4.6.1a13.1,13.1,0,0,1-4.8-.8c-3.7-1.6-4.2-5.4-4.2-9.1,0-1.6-.8-6.8.4-7.9s5-.1,6.2-.1Z" />
</g>
<!-- use for capturing click event on "Restart" text -->
<rect id="restartClick" x="181" y="64.4" width="189" height="35.59" />
<g id="restartText">
<path fill="red" id="r_restart"
d="M191.1,96.8c-1,0-5.4.6-6,0s0-3.8,0-4.5V73.6c0-1.1-.7-4.7,0-5.6s3.7-.3,4.7-.3c6.8,0,14.7-.7,18.3,6.7a11,11,0,0,1,.1,9.7,11.4,11.4,0,0,1-2.8,3.8c-.4.3-1.6,1.1-1.7,1.5s1.4,3.3,1.8,4.1l1.5,3.3h-3.2c-.7,0-2.6.4-3.2,0s-1.2-4.8-2.7-5.8-6-.4-6.6,0S191.1,95.7,191.1,96.8Zm0-23.2v9.1c0,.8-.2,2.2.3,2.5s3.9,0,4.9,0c5.1-.1,9.7-5.6,5.2-9.9C198.9,72.8,194.4,73.6,191.1,73.6Z" />
<path
d="M234,96.8H217.4c-.8,0-3.7.4-4.1-.1s0-5,0-6v-20c0-.9-.4-2.6.3-3s2.2,0,2.7,0h15.1c2.6,0,2.6-.4,2.6,2.4,0,.6.4,3.1,0,3.5a12.2,12.2,0,0,1-2.7,0h-9.9c-.2,0-1.9-.2-2.1,0s0,3.3,0,3.9-.3,1.5.6,1.9,3.5,0,4.7,0,3.1-.5,4.1,0,.6,1,.6,2.3.3,3.1,0,3.5-2.8,0-3.1,0c-1.9,0-3.8-.1-5.6,0s-1.3-.2-1.3,1.3-.5,4,0,4.5,2.6,0,3,0c3.3,0,7.3-.6,10.7,0,1.2.2.8-.3,1,1.1A36.9,36.9,0,0,1,234,96.8Z" />
<path
d="M236.1,76.5a9,9,0,0,1,8.6-8.7,42.1,42.1,0,0,1,5-.1h7.8c2.1,0,1.6.2,1.6,2.4,0,.6.3,2.7,0,3.2s-.3.1-.9.3c-2.2.4-5.1,0-7.4,0a33.7,33.7,0,0,0-5.5,0c-2.9.3-4.6,4.2-1.3,5.6s4.5.2,6.4.2c3.6,0,7,1.2,8.8,4.5A8.5,8.5,0,0,1,256,95.5c-2.2,1.3-4.5,1.3-6.9,1.3h-8c-1.3,0-2.8.4-3.3-.5a15.6,15.6,0,0,1,.1-5.3c.8-.7,5.1,0,6.1,0s4.8.2,7.1,0,4.6-4.5,1.1-5.7-4.7,0-6.8-.1C240.5,85,236.1,81.6,236.1,76.5Z" />
<path
d="M276.6,96.8c-1.3,0-4.5.6-5.5,0s-.5-.8-.5-2v-20c-.1-1.4.2-1-1-1.2s-4.7,0-6.8,0-1.3-1-1.3-3-.5-2.4.5-2.9,3.8,0,5.2,0h14.6c.5,0,3.4-.4,3.8,0s.2,4.3.1,4.9.1.7-.3,1-2.4,0-2.9,0-5.2-.7-5.9,0,0,2.8,0,3.3V96.8Z" />
<path
d="M311.8,96.8h-4.3c-2,0-1.7.2-1.7-1.8s.4-3.6-.1-4-3.5,0-4.1,0-7.2-.8-7.9.3.6,3.8,0,5,.3.1-.5.5-2.2,0-2.8,0-2.4.3-2.8-.2,0-3.3,0-4V81.4c0-4.8,1.3-9.3,5.7-11.9,6.4-3.9,15.5-1,17.9,6.2,1.2,3.4.6,7.5.6,11Zm-6-11.6c0-3.2.8-7.5-1.8-9.9a6.2,6.2,0,0,0-8-.5c-1.9,1.4-2.3,3.5-2.3,5.7s-.5,4.2,0,4.7,2.4,0,2.9,0Z" />
<path
d="M323.2,96.8c-1,0-5.5.6-6.1,0s0-3.8,0-4.5V73.6c0-1.1-.6-4.7,0-5.6s3.7-.3,4.7-.3c6.9,0,14.7-.7,18.3,6.7a11,11,0,0,1,.1,9.7,12.6,12.6,0,0,1-2.7,3.8c-.5.3-1.7,1.1-1.8,1.5s1.5,3.3,1.8,4.1l1.5,3.3h-3.2c-.7,0-2.6.4-3.2,0s-1.2-4.8-2.7-5.8-5.9-.4-6.5,0S323.2,95.7,323.2,96.8Zm0-23.2v9.1c0,.8-.3,2.2.2,2.5s3.9,0,5,0c5.1-.1,9.6-5.6,5.1-9.9C330.9,72.8,326.4,73.6,323.2,73.6Z" />
<path
d="M357.5,96.8c-1.3,0-4.5.6-5.6,0s-.5-.8-.5-2V80.9c0-2,.1-4.1,0-6.1s.3-1-.9-1.2-4.7,0-6.9,0-1.3-1-1.3-3-.4-2.4.6-2.9,3.8,0,5.1,0h14.6c.6,0,3.4-.4,3.9,0s.2,4.3,0,4.9.1.7-.2,1-2.4,0-3,0-5.2-.7-5.8,0,0,2.8,0,3.3V96.8Z" />
</g>
<!-- Arrow and Click text (displayed immediately at the beginning) -->
<g id="arrow_click">
<g id="text_Click" fill="#fffdfd">
<path d="M296.8,158.4c-3-2.1-2.5-7.1-2.8-10.3s-.3-5.9-.3-8.9.1-10.5,5.8-10c1.8.2,3.3,1.9.8,1.6s-3-.3-4.2,1.1-1.4,5.8-1.4,8.5a100.1,100.1,0,0,0,.9,12.2c.4,3,1.8,6.9,5.9,4.7.3-.2,1.1-1.3,1.5-1.1s.3,1.3-.1,1.7S298.4,159.5,296.8,158.4Z" />
<path d="M306.8,158.2c.5-1.4.1-3.7.1-5.2s.1-5.1.1-7.6,0-6.7.2-10.1c0-.5,0-2.2.9-1.5s.1,2.5.1,3.1v6.5c.1,4.4-.1,8.5-.1,12.8,0,2.5,1.6,1.1,3.4,1.6s1.1,1-.3,1.2S307,159.6,306.8,158.2Z" />
<path d="M317.4,158.2c-.6,0-2.3.1-1.3-.8s1,0,1.4-.4,0-4.9-.1-6.4c-.2-4.4.2-8.7.1-13.1a8.1,8.1,0,0,0-.1-2.2c-.3-1.1,0-.8-1.2-1s-2.5,0-1-.9,5-.2,5.5.7-1.6.2-2,.5-.1,6-.1,7.2-.1,4,0,6,.2,4,.2,6-.4,2.5.1,3,2.8-.4,3,.7S317.7,158.9,317.4,158.2Z" />
<path d="M328.3,158.9c-3.6-1.1-3.2-6.4-3.2-9.3a73.4,73.4,0,0,1,.2-9.4c.3-3,1.2-7.6,5.2-7.2,1.3.1,1.5.6.2,1.2s-1.1-.2-1.8.1a4.3,4.3,0,0,0-1.5,2.4,18.2,18.2,0,0,0-.8,5.2c-.1,2.6-.2,5.2-.2,7.8s-.3,7.5,3.2,8.2c.4.1,2-.4,2.2-.2s-.5,1.1-.8,1.3A3.2,3.2,0,0,1,328.3,158.9Z" />
<path d="M342.7,155.9c-1.5-4.1-2-8.3-3.2-12.4-1.9,4.2-2.2,8.3-2,12.8,0,.8.6,2.3.1,2.8s-1.3-.9-1.3-1.4a42.8,42.8,0,0,1,0-6.2c.1-5.3.7-10.7.7-16,0-.6-.2-1.9.3-2.2s.9,2.1.9,2.5c-.2,2.7-.2,5.4-.2,8.1.8-.3,1.8-3,2.1-3.6a38,38,0,0,1,3.2-6c.1-.2.3-.8.6-.9s.4,1.6.1,2c-1.3,2-2.9,4.2-3.2,6.6-.5,4,1.3,8.6,2.6,12.3.4,1.1,2,3,2,4.1C345.4,161.3,342.9,156.4,342.7,155.9Z" />
<path d="M357.9,159.4c-.1,0-2.1-.7-1.4-1.2s1,.1,1.4.1,2.7,0,3.6-1.8c1.8-3.8.7-8.2-1.1-11.7s-3.6-6.6-3.5-10.4a5.6,5.6,0,0,1,1.7-4.4c.4-.4,4.2-1.6,3.9.2s-1.2-.2-1.5-.1a2.6,2.6,0,0,0-2.1,1.4c-1.1,1.6-.7,3.9-.3,5.7A29.5,29.5,0,0,0,361,143c1.3,2.8,2.6,5.5,2.8,8.6S362.3,160.1,357.9,159.4Z" />
<path d="M372.3,158.1c-.1-5.9-.4-11.7-.7-17.6-.1-1.5-.1-3.1-.2-4.6a9.6,9.6,0,0,0,0-1.7h-2.3c-1.6-.2-2.3-.9-.3-1.1s3.8.3,5.7.3a6.1,6.1,0,0,1,1.9,0c2.1.9-1.2.9-1.9.9s-1.3-.2-1.7.3.1,3.6.1,4.4l.6,12.1c.1,1.7.2,3.4.2,5S373.7,159.2,372.3,158.1Z" />
<path d="M388.2,159c-.8-1-.6-2.9-.8-4.1s-.1-1.9-2.1-2-2.5-.5-3.1.1-.3,3.5-.7,4.5-1.4,1.1-1.3-.5.8-3.6,1.1-5.4.7-4,1-5.9,1.4-6.2,1.7-9.4c.2-1.3,0-2.9,1.1-3.3s1.5,3.2,1.6,4.6c.3,3.2.7,6.4,1,9.6l.9,6.9C388.7,154.9,389.9,159.4,388.2,159Zm-1.2-7c-.4-5.4-.9-10.9-1.4-16.3-.7,3-1.3,6.1-1.9,9.1s-.7,3.4-.9,5.1-.4,1.3.4,1.9S386,152.1,387,152Z" />
<path d="M399.1,159.1c-.9-1.1-1.1-3.2-1.4-4.5s-.7-4.3-1.2-6.5c-.2-.7-.4-2.6-1.3-2.8s-.8,2.9-.7,3.7.1,3.5.2,5.3.7,3.3.3,4-.6.9-1.1.4-.1-2.7-.1-3.3-.1-2.6-.1-4q-.3-5.1-.3-10.2c-.1-2-.7-5.2-.1-7.1s2.8-1.2,4-.2,1.1,2.2,1.2,3.5a12.4,12.4,0,0,1-.1,2.7c-.2,1.5-1.3,2.7-1.7,4.1s.2,2.7.5,4,1,4.1,1.6,6.2S400.8,159.9,399.1,159.1Zm-3.2-15.5c1-1.3,3.1-10.3-.7-9.6-1.5.3-.8,4.3-.7,5.6S393.8,146.3,395.9,143.6Z" />
<path d="M406.9,158.1c-.1-5.9-.4-11.7-.7-17.6,0-1.5-.1-3.1-.2-4.6s.2-1.5,0-1.7h-2.3c-1.6-.2-2.3-.9-.3-1.1s3.8.3,5.7.3c.4,0,1.6-.2,1.9,0,2.1.9-1.2.9-1.9.9s-1.3-.2-1.7.3.1,3.6.1,4.4c.2,4,.5,8.1.6,12.1.1,1.7.2,3.4.2,5S408.3,159.2,406.9,158.1Z" />
<path d="M423,158.8c-.4-.5-.2-2.1-.2-2.7s.3-3.8.4-5.6-.1-4.1-.1-6.2a69.1,69.1,0,0,0,.2-9.1c-.1-1.8-.2-3,2.3-2.2s3.1,4.3,3,7a14.3,14.3,0,0,1-.6,3.7,7.5,7.5,0,0,0-.7,1.2c-.3,1-.2.3.2,1.3a15.7,15.7,0,0,1,1.3,6.5,7.1,7.1,0,0,1-1.3,4.4C426.8,158,424.1,160,423,158.8Zm2.9-1.9c2.6-2,2.8-10.8-1.5-10.8a86.8,86.8,0,0,0-.2,11.4A2.7,2.7,0,0,0,425.9,156.9Zm-1.2-12.2c2.8,0,2.6-4.2,2.5-6s-.6-6.1-2.4-4.4S423.7,144.2,424.7,144.7Z" />
<path d="M436.8,158.8c-2.1-1.2-2-3.9-2.1-6.1s-.3-5.6-.4-8.5,0-4.8-.1-7.2-.4-2.7.1-3.7c2.7.4-1.3,28.3,4.8,24.6,1.8-1.1,1.7-6.4,1.8-8,.2-3.9.2-7.8.2-11.8a29.8,29.8,0,0,1,.1-4.2c.1-1,.4-2.2,1.2-.6s-.3,5.4-.4,7.3S442.9,162.3,436.8,158.8Z" />
<path d="M450.7,158.1c-.2-5.9-.4-11.7-.7-17.6-.1-1.5-.2-3.1-.2-4.6s.1-1.5-.1-1.7h-2.3c-1.5-.2-2.2-.9-.3-1.1s3.9.3,5.7.3a6.7,6.7,0,0,1,2,0c2,.9-1.3.9-1.9.9s-1.3-.2-1.7.3.1,3.6.1,4.4c.1,4,.4,8.1.6,12.1.1,1.7.1,3.4.2,5S452.1,159.2,450.7,158.1Z" />
<path d="M462.1,158.1c-.1-5.9-.4-11.7-.7-17.6-.1-1.5-.1-3.1-.2-4.6a9.6,9.6,0,0,0,0-1.7h-2.3c-1.6-.2-2.3-.9-.3-1.1s3.8.3,5.7.3a6.1,6.1,0,0,1,1.9,0c2.1.9-1.2.9-1.9.9s-1.3-.2-1.7.3.1,3.6.1,4.4l.6,12.1c.1,1.7.2,3.4.2,5S463.5,159.2,462.1,158.1Z" />
<path d="M470.5,145.2c0-2.3-.9-11.7,2.8-12.1a6.2,6.2,0,0,1,3.9,1.4c1.1,1.1,1.4,3,1.7,4.4a49,49,0,0,1,.4,7.6c0,2.8.3,14.8-5.2,12.7S470.5,148.5,470.5,145.2Zm6.6,10.9c1.7-5.2.9-11,.6-16.4-.1-1.5-.1-3.2-1.3-4.4s-4.1-.1-4.3,2.4-.4,6.9-.3,10.3a25,25,0,0,0,.9,7.7C473.6,158.2,476,159.3,477.1,156.1Z" />
<path d="M493.8,158.8c-.9-1.8-1.2-4.2-1.9-6.2s-1-3-1.6-4.5-1.7-5.5-2.7-8.2c-.4-1-.8-2.7-1.7-3.6-.7,2.4-.3,5.8-.3,8.4s.1,5.6.2,8.6c.1.7.5,5.6-.5,5.4s-.7-8-.7-9.1c-.1-4.1,0-8.2.1-12.3,0-1.2.2-5.8,1.8-3.2s1,3.6,1.6,5.1,1.9,4.5,2.8,6.8,1.7,7.1,3.4,10.3c1.3-5,.9-10.8,1-15.9,0-.8-.5-6.9.5-7s.8,3.2.8,3.8c-.3,4.8-.4,9.9-.7,14.8-.1,1.6.2,4.4-.6,5.9S494.7,158.7,493.8,158.8Z" />
</g>
<path id="arrow" fill="rgba(255,255,255,0.67)" d="M229.6,120.2c.3,7.2.5,14.5.7,21.8,0,.8,1.2.9,1.7.4a23.7,23.7,0,0,0,4.3-9.6c8.2,11.3,22.7,17.2,36.3,13.8a.5.5,0,1,0-.2-.9,35.9,35.9,0,0,1-35.2-14.6,25.5,25.5,0,0,0,10.7-3.5c.6-.4.9-1.6,0-1.8a80.2,80.2,0,0,1-17-6.7C230.2,118.7,229.6,119.5,229.6,120.2Zm15.4,6.7a23.9,23.9,0,0,1-8.5,2.4.7.7,0,0,0-.7.5,1.1,1.1,0,0,0-.8.8,20.7,20.7,0,0,1-3,8.4c-.1-5.8-.3-11.6-.4-17.4A73.2,73.2,0,0,0,245,126.9Z"/>
</g>
<!-- main text "RICOCHET" -->
<g id="text">
<path id="r" clip-path="url(#r_clipPath)"
d="M165.1,552.4H134.7V400.5h60.8a57.9,57.9,0,0,1,16.1,2.2,57.2,57.2,0,0,1,14.4,6.1,59.5,59.5,0,0,1,12.3,9.5,64.3,64.3,0,0,1,9.6,12.4,60.1,60.1,0,0,1,6.1,14.5,56.9,56.9,0,0,1,2.2,16.1,60.6,60.6,0,0,1-2,15.3,63,63,0,0,1-5.6,14,54,54,0,0,1-9,12.3,58.6,58.6,0,0,1-11.8,9.8l16.8,39.7H212.3l-13.2-30.6-34,.2Zm0-121.5v60.8h30.4a28.8,28.8,0,0,0,11.7-2.4,30.6,30.6,0,0,0,9.7-6.5,32.4,32.4,0,0,0,6.5-9.7,30.2,30.2,0,0,0,0-23.6,31.2,31.2,0,0,0-6.5-9.7,30.6,30.6,0,0,0-9.7-6.5,28.8,28.8,0,0,0-11.7-2.4Z" />
<path id="i" d="M306.5,552.4H276.1V400.5h30.4Z" />
<path id="c1"
d="M456,533.8c-28.8,24.8-72.6,24.8-101.5.4s-36.3-65.7-18.1-98.3,56.8-48,92.1-37a76.9,76.9,0,0,1,22,11c6.2,4.4,5.7,3.9,2.3,9.6l-12.9,21.2c-29.1-31.4-83.3-8.8-83.3,33.4s54.2,64.6,83.3,33.3Z" />
<path id="o"
d="M618.1,475.1c0,71.7-92.4,105.3-138.6,50.5s5.3-142.9,76.9-127.2C592,406.2,618.1,438.6,618.1,475.1Zm-30.2,0c0-26.3-22-48.3-48.3-48.3s-48.4,22-48.4,48.3,21,47.1,46.4,48.1C564.5,524.3,587.9,502.2,587.9,475.1Z" />
<path id="c2"
d="M759.3,533.8c-28.7,24.8-72.5,24.8-101.5.4s-36.3-65.7-18.1-98.3,56.9-48,92.1-37a78.8,78.8,0,0,1,22.1,11c6.1,4.4,5.7,3.9,2.2,9.6l-12.9,21.2c-29.1-31.4-83.2-8.8-83.2,33.4s54.2,64.6,83.2,33.3Z" />
<path id="h" clip-path="url(#h_clipPath)"
d="M807.3,552.4H776.9V400.5h30.4v60.8H868V400.5h30.5V552.4H868V491.7H807.3Z" />
<path id="e" clip-path="url(#e_clipPath)"
d="M1030.8,552.4H926.6V400.5h104.2v30.4H957v30.4h50v30.4H957V522h73.8Z" />
<path id="t" clip-path="url(#rect_clip)" d="M1115.9,552.4h-30.3V430.9h-45.7V400.5h121.5v30.4h-45.5Z" />
</g>
<!-- trajectory for ball and tail (mask is used for dashed line) -->
<g id="paths">
<path id="path1" mask="url(#mask1)" d="M196.5,79l3,321.5s188-246,473,7" />
<path id="path2" mask="url(#mask2)"
d="M672.5,407.5s-141.2-111.8-261.8-10c-.2.2-.5-.1-.4-.3,36.5-57.4,205.9-744.5,542.2,2.3" />
<path id="path2_1" mask="url(#mask2_1)" d="M952,399.2c1.7-503.1,103.2-502.7,101.5.3" />
<path id="path3" mask="url(#mask3)" d="M1054.5,399.5c.3-159.5,21.7-422.2,42,0" />
<path id="path4" mask="url(#mask4)" d="M1097,400c.3-73.6,26.2-196.4,40,0" />
<path id="path5" mask="url(#mask5)" d="M1138,400c-.1-24.1,47.7-102.5,67,82" />
<path id="path6" mask="url(#mask6)" d="M1205,482c1.9-11.9,56.7-134,91,9" />
<path id="path8" mask="url(#mask8)" d="M1294,492C1122,40.1,887.4-84.9,539.5,396.5" />
<path id="path_b1" mask="url(#maskB1)"
d="M541,426.5c-.4-38.4,55.1-399.7,140.5-63-54.5-105.5-139.6-89.3-140-42" />
<path id="path_b2" mask="url(#maskB2)"
d="M542,426.5c.4-38.4-55.6-398.7-141-62,54.5-105.5,140.1-91.3,140.5-44" />
<path id="path9" mask="url(#mask9)" d="M541,322.5C544.5,191.8,752.1-20.6,868,400" />
<path id="path10" mask="url(#mask10)"
d="M867.5,402.5l-59,33,58,22-56-4,55-5-56-2,57-5-57-2,57-6-58-2,58-6-58-2,59-23" />
<path id="path11" mask="url(#mask11)" d="M867.5,401.5c-16.3-192.3-494.2-690.2-576-7" />
</g>
<!-- balls -->
<circle id="ball" fill="red" cx="196.3" cy="78.8" r="11" />
<circle id="bBall2" fill="rgba(255,0,4,0.6)" opacity=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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