1<svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
2<defs>
3 <polygon id="liquid"></polygon>
4 <clipPath id="mainMask">
5 <polygon points="402.1 325.43 367.12 334.05 340.15 357.94 327.38 391.63 331.72 427.4 352.19 457.05 384.09 473.79 420.12 473.79 452.02 457.05 472.49 427.4 476.83 391.63 464.05 357.94 437.08 334.05 402.1 325.43" fill="#fff" stroke="#000" stroke-miterlimit="10"/>
6 </clipPath>
7 <clipPath id="liquidMask">
8 <use xlink:href="#liquid" />
9 </clipPath>
10 </defs>
11 <g id="pipette1" class="glass" fill="none" stroke="#aaccfb" stroke-miterlimit="10" stroke-width="4" transform="translate(0, 38)">
12<polygon class="liquid" stroke="none" points="34.28 79.01 34.28 94.68 27.91 104.62 27.91 111.41 23.32 114 18.73 111.41 18.73 104.62 12.36 94.68 12.36 79.01 34.28 79.01" fill="#5299f9"/>
13<rect id="level" class="liquid" stroke="none" x="12.36" y="48.05" width="22" height="32" fill="#5299f9"/>
14 <g opacity="0.5">
15 <polyline points="12.07 28.65 12.07 11.51 12.07 6.83 14.07 4 15.84 2 19.94 2 27.21 2 31.06 2 32.57 4 34.57 7.16 34.57 12.01 34.57 28.65" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/>
16 <polygon points="42.05 39.01 4.59 39.01 2 36.43 2 32.19 2 31.53 4.59 28.95 4.59 28.95 42.05 28.95 44.64 31.53 44.64 36.43 42.05 39.01" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/>
17 <polyline points="34.28 39.01 34.28 94.68 27.91 104.62 27.91 111.41 23.32 114.41 18.73 111.41 18.73 104.62 12.36 94.68 12.36 39.01" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/>
18
19 </g>
20
21 <g id="pipetteShine" opacity="0.25" stroke="none">
22 <polygon points="21.63 11.58 18.15 13.1 18.25 9.3 21.73 7.79 21.63 11.58" fill="#fff"/>
23 <polygon points="17.88 90.03 17.86 90.03 16.87 89.04 16.87 47.02 18.87 47.02 18.87 89.04 17.88 90.03" fill="#fff"/>
24 </g>
25 </g>
26
27 <g id="flask" class="glass" fill="#AACCFB" stroke="#AACCFB" stroke-miterlimit="10" stroke-width="6" >
28<!-- <path d="M438.68,219.23v99.08a90,90,0,1,1-77.36,0V219.23" />
29 <line x1="341.31" y1="219.23" x2="458.69" y2="219.23" /> -->
30 <polyline points="444.09 221.01 444.09 320.09 476.46 348.76 491.79 389.2 486.58 432.13 462.02 467.72 423.73 487.81 380.48 487.81 342.19 467.72 317.62 432.13 312.41 389.2 327.75 348.76 360.12 320.09 360.12 221.01" stroke-linecap="round" stroke-width="8"/>
31 <line x1="343.42" y1="221.01" x2="460.79" y2="221.01" stroke-width="8"/>
32
33 </g>
34 <g id="drip">
35 <polygon class="liquid" points="3.3 4.06 0 13.72 1.86 18.5 7.93 21.59 14.11 18.92 15.79 13.72 12.33 3.7 7.89 0 3.3 4.06"/>
36 <polygon points="6.71 6.76 5.22 7.96 4.88 6.08 6.37 4.88 6.71 6.76" fill="#fff" opacity="0.5"/>
37
38 </g>
39 <!-- <circle class="liquid" cx="399" cy="420" r="4" /> -->
40 <rect id="droplet" class="liquid" x="399" y="420" width="6" height="6" />
41 <g clip-path="url(#mainMask)">
42 <use xlink:href="#liquid" x="770" y="0" class="poly darkLiquid" opacity="0.3"/>
43<use xlink:href="#liquid" class="poly" y="0"/>
44
45 <g id="bubbleGroup" stroke-width="0" fill="#FFF" opacity="1" clip-path="url(#liquidMask)">
46 <rect x="300" y="380" width="3" height="3" />
47 <rect x="300" y="380" width="3" height="3" />
48 <rect x="300" y="380" width="3" height="3" />
49 <rect x="300" y="380" width="3" height="3" />
50 <rect x="300" y="380" width="3" height="3" />
51 <rect x="300" y="380" width="3" height="3" />
52 <rect x="300" y="380" width="3" height="3" />
53 <rect x="300" y="380" width="3" height="3" />
54 <rect x="300" y="380" width="3" height="3" />
55 <rect x="300" y="380" width="3" height="3" />
56 <rect x="300" y="380" width="3" height="3" />
57 <rect x="300" y="380" width="3" height="3" />
58 <rect x="300" y="380" width="3" height="3" />
59 <rect x="300" y="380" width="3" height="3" />
60 <rect x="300" y="380" width="3" height="3" />
61 <rect x="300" y="380" width="3" height="3" />
62 <rect x="300" y="380" width="3" height="3" />
63 <rect x="300" y="380" width="3" height="3" />
64 <rect x="300" y="380" width="3" height="3" />
65 <rect x="300" y="380" width="3" height="3" />
66 <rect x="300" y="380" width="3" height="3" />
67 <rect x="300" y="380" width="3" height="3" />
68</g>
69</g>
70
71 <g id="flaskShine" opacity="0.25" stroke="none">
72 <polygon points="375.69 300 372.19 296.51 372.19 238.68 375.69 235.18 379.18 238.68 379.18 296.51 375.69 300" fill="#fff"/>
73 <rect x="414" y="233" width="16" height="80" rx="0" ry="6" fill="#fff" opacity="0.1"/>
74 <polygon points="368.47 362.44 351.13 369.58 354.5 351.13 371.84 344 368.47 362.44" fill="#fff"/>
75 <polygon points="453 407.77 464.55 422.2 443.58 452.6 421.36 464.21 417.62 459.38 434.66 444.52 453 407.77" fill="#fff"/>
76 </g>
77</svg>
78
79<!-- <a href="https://greensock.com"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a> -->