1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<filter id="reverse_c">
<feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="linear" slope="10000" intercept="-4999.5"/>
<feFuncG type="linear" slope="10000" intercept="-4999.5"/>
<feFuncB type="linear" slope="10000" intercept="-4999.5"/>
</feComponentTransfer>
</filter>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M1,1H0V0H1Z"/>
</defs>
<svg y="11%" viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)" y="10.9%">
<animateMotion dur="1ms" repeatCount="indefinite"/>
</image>
<svg preserveAspectRatio="none" width="100%" height="11%" viewBox="0 0 1 100">
<rect width="1" height="100" fill="#383E45"/>
<rect width="1" height="100" fill="#383E45" filter="url(#reverse_c)" opacity="0.2"/>
<rect y="50" width="1" height="50" fill="#383E45"/>
<rect y="60" width="1" height="30" fill="#FFFFFF"/>
</svg>
<svg preserveAspectRatio="xMinYMid meet" height="11%" viewBox="0 0 340 100">
<rect transform="translate(-1, 0)" y="50" width="340" height="50" fill="#383E45"/>
<g>
<circle cx="29.71" cy="26.79" r="6.7" fill="#ff5b5c"/>
<circle cx="50.77" cy="26.79" r="6.7" fill="#ffba44"/>
<circle cx="71.82" cy="26.79" r="6.7" fill="#00c54b"/>
</g>
<g transform="translate(0, 1)">
<path d="M340,50c-6.62,0-8.7-4.23-8.85-6.91v-18A17.23,17.23,0,0,0,313.92,7.9H119.66a17.22,17.22,0,0,0-17.22,17.22v18c-.16,2.69-2,6.92-8.61,6.92Z" fill="#383E45"/>
<path fill="#383E45" filter="url(#reverse_c)" d="M318.52,31.39,316.13,29l2.39-2.44a.85.85,0,0,0,0-1.31,1.11,1.11,0,0,0-1.47,0l-2.3,2.34-2.3-2.34a1.13,1.13,0,0,0-1.48,0,.85.85,0,0,0,0,1.31l2.4,2.44L311,31.39a.85.85,0,0,0,0,1.31,1.15,1.15,0,0,0,1.48,0l2.3-2.34,2.3,2.34a1.14,1.14,0,0,0,1.47,0A.85.85,0,0,0,318.52,31.39Z"/>
</g>
<path fill="#383E45" filter="url(#reverse_c)" d="M99.37,80.37a7,7,0,1,1,1.18-1.29L98.29,75h2.13a5.68,5.68,0,1,0-1.75,4.1Z"/>
<path fill="#383E45" filter="url(#reverse_c)" d="M21.7,74.29h8.64v1.42H21.7l3.81,3.81-1,1L19,75l5.52-5.52,1,1Z"/>
<path fill="#383E45" filter="url(#reverse_c)" d="M64.55,74.29H55.91v1.42h8.64l-3.81,3.81,1,1L67.27,75l-5.52-5.52-1,1Z"/>
<path d="M171.74,60a15,15,0,1,0,0,30H340V60Z" fill="#FFFFFF"/>
<path d="M175.06,74.05h.44a.41.41,0,0,1,.31.14.51.51,0,0,1,.13.34v4.73a.51.51,0,0,1-.13.34.44.44,0,0,1-.31.13h-7a.44.44,0,0,1-.31-.13.51.51,0,0,1-.13-.34V74.53a.51.51,0,0,1,.13-.34.41.41,0,0,1,.31-.14h.44v-.47a3.49,3.49,0,0,1,.24-1.27,3.2,3.2,0,0,1,.66-1.07,3,3,0,0,1,1-.72,2.86,2.86,0,0,1,2.36,0,3,3,0,0,1,1,.72,3.37,3.37,0,0,1,.66,1.07,3.49,3.49,0,0,1,.24,1.27Zm-.88,0v-.47a2.49,2.49,0,0,0-.64-1.67,2.1,2.1,0,0,0-3-.16l-.15.16a2.45,2.45,0,0,0-.65,1.67v.47ZM171.54,76v1.89h.88V76Z" fill="#FFFFFF" filter="url(#reverse_c)"/>
<rect y="60" x="320" width="30" height="30" fill="#FFFFFF"/>
</svg>
<svg preserveAspectRatio="xMaxYMid meet" height="11%" viewBox="0 0 110 100">
<rect x="1" y="50" width="110" height="50" fill="#383E45"/>
<path fill="#383E45" filter="url(#reverse_c)" d="M83.14,68.6A1.42,1.42,0,1,0,84.56,70,1.41,1.41,0,0,0,83.14,68.6Zm0,9.94A1.43,1.43,0,1,0,84.56,80,1.42,1.42,0,0,0,83.14,78.54Zm0-5A1.42,1.42,0,1,0,84.56,75,1.42,1.42,0,0,0,83.14,73.57Z"/>
<circle opacity="0.2" cx="54.72" cy="74.99" r="10.42" fill="#383E45" filter="url(#reverse_c)"/>
<path d="M15.87,60H0V90H15.87a15,15,0,1,0,0-30Z" fill="#FFFFFF"/>
<rect y="60" x="-15" width="30" height="30" fill="#FFFFFF"/>
<path fill="#FFFFFF" filter="url(#reverse_c)" d="M12.09,79.53l-5,2.8L8.2,76.7,4,72.8l5.7-.68,2.41-5.21,2.41,5.21,5.7.67L16,76.69l1.12,5.64Zm0-1.63,3,1.69-.68-3.4L17,73.84l-3.43-.4L12.09,70.3l-1.45,3.14-3.43.41,2.54,2.34-.68,3.39,3-1.68Z"/>
</svg>
</svg>
|
