1<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewbox="200 150 400 300">
2 <defs>
3
4 <g id="container" filter="url(#goo)">
5
6 <path class="seg" d="M412.9,251.7c-4.1-1.1-8.5-1.7-12.9-1.7" />
7
8 </g>
9
10 <filter id="goo" color-interpolation-filters="sRGB" filterunits="objectBoundingBox" x="-100%" y="-100%" width="250%" height="250%">
11
12 <fegaussianblur in="SourceGraphic" stddeviation="8" result="blur" />
13
14 <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" />
15
16 <feblend />
17
18 </filter>
19
20 <radialgradient id="grad" cx="400.5176" cy="298.0287" r="125.9247" gradientunits="userSpaceOnUse">
21
22 <stop offset="0.39" style="stop-color:#FF4F59" />
23
24 <stop offset="0.45" style="stop-color:#FFFC31" />
25
26 </radialgradient>
27
28 </defs>
29 <g id="wrapper">
30
31 <use x="20" y="20" xlink:href="#container" fill="none" stroke-width="20" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="#5B1E00" opacity="0.05" />
32
33 <use xlink:href="#container" fill="none" stroke-width="20" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="url(#grad)" />
34
35 </g>
36
37</svg>
38
39<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
40
41<script src="./script.js"></script>