469 lines
No EOL
23 KiB
HTML
469 lines
No EOL
23 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="stylesheet" type="text/css" href="style.css"/>
|
|
<title>Pause</title>
|
|
</head>
|
|
<body>
|
|
<svg
|
|
id="logo_eventname_glow_off"
|
|
width="3454.9861"
|
|
height="1248.83203"
|
|
viewBox="-169.960991 -181.961546 3454.9861 1248.83203"
|
|
version="1.1"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter id="motionBlur">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="4,0"/>
|
|
</filter>
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB" id="offTextBlur216Primary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#3f012d" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
|
|
id="offTextInset216Primary">
|
|
<feFlood flood-color="#c6257d" result="flood-white"/>
|
|
<feFlood flood-color="#3f012d" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feComponentTransfer in="SourceAlpha" result="reduced_alpha">
|
|
<feFuncA type="table" tableValues="0 0.5"/>
|
|
</feComponentTransfer>
|
|
<feGaussianBlur in="reduced_alpha" stdDeviation="6.75" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB" id="offTextBlur520Primary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#3f012d" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
|
|
id="offTextInset520Primary">
|
|
<feFlood flood-color="#c6257d" result="flood-white"/>
|
|
<feFlood flood-color="#3f012d" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feComponentTransfer in="SourceAlpha" result="reduced_alpha">
|
|
<feFuncA type="table" tableValues="0 0.5"/>
|
|
</feComponentTransfer>
|
|
<feGaussianBlur in="reduced_alpha" stdDeviation="16.25" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
|
|
id="offTextBlur216Secondary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#012c3f" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
|
|
id="offTextInset216Secondary">
|
|
<feFlood flood-color="#2493c2" result="flood-white"/>
|
|
<feFlood flood-color="#012c3f" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feComponentTransfer in="SourceAlpha" result="reduced_alpha">
|
|
<feFuncA type="table" tableValues="0 0.5"/>
|
|
</feComponentTransfer>
|
|
<feGaussianBlur in="reduced_alpha" stdDeviation="6.75" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
|
|
id="offTextBlur520Secondary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#012c3f" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-25%" y="-150%" width="150%" height="400%" color-interpolation-filters="sRGB"
|
|
id="offTextInset520Secondary">
|
|
<feFlood flood-color="#2493c2" result="flood-white"/>
|
|
<feFlood flood-color="#012c3f" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feComponentTransfer in="SourceAlpha" result="reduced_alpha">
|
|
<feFuncA type="table" tableValues="0 0.5"/>
|
|
</feComponentTransfer>
|
|
<feGaussianBlur in="reduced_alpha" stdDeviation="16.25" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur216Primary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#ffffff" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_0" stdDeviation="13.5"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#c6257d" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_1">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_0"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_1" stdDeviation="27"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#c6257d" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_2">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_1"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textInset216Primary">
|
|
<feFlood flood-color="#ffffff" result="flood-white"/>
|
|
<feFlood flood-color="#c6257d" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3.375" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur520Primary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#ffffff" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_0" stdDeviation="32.5"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#c6257d" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_1">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_0"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_1" stdDeviation="65"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#c6257d" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_2">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_1"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textInset520Primary">
|
|
<feFlood flood-color="#ffffff" result="flood-white"/>
|
|
<feFlood flood-color="#c6257d" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="8.125" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur216Secondary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="6.75"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#ffffff" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_0" stdDeviation="13.5"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#4badd8" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_1">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_0"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_1" stdDeviation="27"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#4badd8" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_2">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_1"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB"
|
|
id="textInset216Secondary">
|
|
<feFlood flood-color="#ffffff" result="flood-white"/>
|
|
<feFlood flood-color="#4badd8" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3.375" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB" id="textBlur520Secondary">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="16.25"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#ffffff" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_0">
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_0" stdDeviation="32.5"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#4badd8" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_1">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_0"/>
|
|
</feMerge>
|
|
|
|
<feGaussianBlur in="drop_shadow_1" stdDeviation="65"/>
|
|
<feOffset dx="0" dy="0" result="offsetblur"/>
|
|
<feFlood flood-color="#4badd8" flood-opacity="1"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feMerge result="drop_shadow_2">
|
|
<feMergeNode/>
|
|
<feMergeNode in="drop_shadow_1"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter x="-150%" y="-150%" width="400%" height="400%" color-interpolation-filters="sRGB"
|
|
id="textInset520Secondary">
|
|
<feFlood flood-color="#ffffff" result="flood-white"/>
|
|
<feFlood flood-color="#4badd8" result="flood-glow-color"/>
|
|
|
|
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded"/>
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="8.125" result="inset_drop_shadow"/>
|
|
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white"/>
|
|
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow"/>
|
|
<feMerge result="final">
|
|
<feMergeNode in="flooded"/>
|
|
<feMergeNode in="inset_shadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<svg
|
|
viewBox="0 0 1920 1080"
|
|
id="svgPath"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<path id="path"
|
|
style="stroke: #0a6c96; stroke-width: 1;"
|
|
d="m 1677.8292,292.27393 c 55.084,488.37161 -338.5601,290.3106 -496.5146,-39.12473 C 1023.3601,-76.286132 622.72673,52.592934 281.99729,223.54688 -58.73214,394.50083 841.95815,964.71196 700.68754,404.63365 618.872,80.269613 305.26947,350.52312 260.73941,552.8828 c -44.53006,202.35968 66.92569,320.221 115.39494,349.54486 82.44744,49.88063 337.9628,57.74931 482.40081,-35.86799 C 1002.9732,772.94236 464.70894,365.43868 875.42403,225.89874 1286.1391,86.358812 976.56924,742.93404 1256.8456,728.05538 1537.122,713.17671 1548.5761,-0.05325501 1786.4785,567.72474 2024.3809,1135.5027 838.37233,759.97802 919.28954,551.00007 1000.2068,342.02212 1622.7453,-196.09768 1677.8292,292.27393 Z"/></g></svg>
|
|
|
|
<div id="scene">
|
|
<svg
|
|
id="bgAnimation"
|
|
width="1920"
|
|
height="1080"
|
|
style="position: absolute; left: 0; top: 0; overflow: visible"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path id="fairydust"
|
|
d="M 60.482594,8.8028279e-5 C 60.482594,-3.3353067 59.433234,-6.6702988 57.336328,-9.4663104 L 54.315139,-13.494162 A 38.20193,38.201953 0 0 0 32.405474,-27.782381 l -2.042726,-0.474327 a 44.57261,44.572638 0 0 0 -17.793997,-0.486211 l -20.755569,3.642751 a 5.0353151,5.0353182 0 0 0 -4.088877,5.829892 5.0353151,5.0353182 0 0 0 5.8298872,4.088678 L 14.309761,-18.82455 a 34.50198,34.502001 0 0 1 13.772593,0.376642 l 2.043937,0.475334 a 28.123242,28.12326 0 0 1 16.133554,10.5207937 l 3.021187,4.0278518 c 1.535168,2.0469577 1.535168,4.8010754 0,6.8480329 l -5.438543,7.2512616 a 16.737388,16.737398 0 0 1 -9.762468,6.298176 l -6.930005,1.540405 A 34.864522,34.864545 0 0 1 13.352447,18.781422 L 1.5114002,16.62832 1.7909609,16.68794 a 22.554183,22.554198 0 0 0 -16.7085849,2.480196 5.0353151,5.0353182 0 0 0 -0.242501,0.151463 64.73401,64.734052 0 0 1 -20.207324,8.938696 l -0.601821,0.150053 a 16.81191,16.811921 0 0 1 -11.565917,-1.25601 l -2.219769,-1.10354 c -1.00666,-0.500513 -1.00666,-1.243322 0,-1.743833 l 2.219769,-1.103538 0.0031,-0.0012 a 108.76281,108.76287 0 0 1 14.023754,-5.804715 l 0.0046,-0.0016 c 6.599486,-2.202045 11.082326,-8.4216704 11.082326,-15.3792718 v -3.9861594 c 0.05942,-6.9024144 -4.336011,-13.1107608 -10.865607,-15.3498658 l -0.04009,-0.0135 a 110.17269,110.17276 0 0 1 -14.207847,-5.866952 l -2.21997,-1.102936 c -1.006661,-0.500509 -1.006661,-1.243319 0,-1.743832 l 2.21997,-1.103538 a 16.81191,16.811921 0 0 1 11.565917,-1.25601 l 12.325446,3.082219 a 5.0353151,5.0353182 0 0 0 6.106023,-3.66531 5.0353151,5.0353182 0 0 0 -3.663092,-6.106432 l -12.325846,-3.080606 a 26.892611,26.892628 0 0 0 -18.492698,2.008689 l -2.218157,1.103339 c -7.882886,3.91949 -7.882886,15.859439 0,19.778931 l 2.218157,1.103137 a 120.24333,120.2434 0 0 0 15.507159,6.4023067 l -0.0417,-0.013292 c 2.465692,0.8455308 4.083035,3.1309608 4.060477,5.7374431 v 4.0723738 c 0,2.663079 -1.673536,4.9845624 -4.200057,5.8268704 l -0.0031,0.00141 a 118.83344,118.83351 0 0 0 -15.325888,6.342487 l -2.215135,1.101929 c -7.882684,3.919492 -7.882684,15.85944 0,19.779134 l 2.218359,1.102936 a 26.892611,26.892628 0 0 0 18.492496,2.009092 l 0.602224,-0.150245 c 8.234149,-2.058639 16.054196,-5.508638 23.1316333,-10.191486 a 12.471468,12.471476 0 0 1 9.22248185,-1.359535 5.0353151,5.0353182 0 0 0 0.27976213,0.05942 L 11.550357,28.689734 a 44.935152,44.93518 0 0 0 17.785136,-0.34502 l 6.928392,-1.540606 A 26.820103,26.820118 0 0 0 51.899396,16.717748 L 57.336328,9.4664865 C 59.433234,6.6706763 60.482594,3.3354828 60.482594,8.8028279e-5 M 35.104606,-0.00232892 A 5.0353151,5.0353182 0 0 0 30.06929,-5.0376472 5.0353151,5.0353182 0 0 0 25.033975,-0.00232892 c 0,2.84072512 -2.194791,5.03531832 -5.035314,5.03531832 -2.840523,0 -5.035316,-2.1945932 -5.035316,-5.03531832 0,-2.84072518 2.194793,-5.03531828 5.035316,-5.03531828 a 5.0353151,5.0353182 0 0 0 5.035314,-5.0353188 5.0353151,5.0353182 0 0 0 -5.035314,-5.035318 c -8.283094,0 -15.105946,6.8228565 -15.105946,15.10595508 0,8.28309872 6.822852,15.10595492 15.105946,15.10595492 8.283093,0 15.105945,-6.8226548 15.105945,-15.10595492 m -72.63281,0 A 5.0353151,5.0353182 0 0 0 -42.56352,-5.0376472 h -12.883758 a 5.0353151,5.0353182 0 0 0 -5.035316,5.03531828 5.0353151,5.0353182 0 0 0 5.035316,5.03531832 h 12.883758 a 5.0353151,5.0353182 0 0 0 5.035316,-5.03531832"
|
|
filter="url(#motionBlur)"
|
|
fill="#4B3176"/>
|
|
<g id="trail"></g>
|
|
</svg>
|
|
<svg id="breakText" viewBox="0 0 5160 1000" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<text id="breakTextText" x="2580" y="500">Break</text>
|
|
</defs>
|
|
<g id="blur216Primary" filter="url(#textBlur216Primary)" style="mix-blend-mode: screen;">
|
|
<use href="#breakTextText"/>
|
|
</g>
|
|
<g id="inset216Primary" filter="url(#textInset216Primary)">
|
|
<use href="#breakTextText"/>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>-->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/MotionPathPlugin.min.js"></script>-->
|
|
<script src="assets/script/gsap.min.js"></script>
|
|
<script src="assets/script/MotionPathPlugin.min.js"></script>
|
|
<script>
|
|
gsap.registerPlugin(MotionPathPlugin)
|
|
|
|
const randomMap = {
|
|
'1': '0.4',
|
|
'1.4': '0.7',
|
|
'3': '0.4',
|
|
'4': '0.9',
|
|
'8.4': '0.7',
|
|
'14': '0.8',
|
|
'14.5': '0.1',
|
|
'15': '0.6',
|
|
'17': '0.2',
|
|
'17.5': '0.6',
|
|
'23': '0.7',
|
|
'29': '0.2',
|
|
}
|
|
|
|
const n = 40;
|
|
const trail = document.querySelector('#trail')
|
|
for (let i = 0; i < n; i++) {
|
|
trail.insertAdjacentHTML('beforeend', `<g class="trail" filter="url(#motionBlur)"><circle r="${10 - ((i) / n * 5)}" fill="#b2a0cb" style="opacity: 0;" fill-opacity="${(1 - (i + 1) / n) * 0.3}"/></g>`)
|
|
}
|
|
|
|
const timeline = new TimelineMax()
|
|
|
|
timeline
|
|
.addLabel('start', '0')
|
|
timeline
|
|
.to("#fairydust", {
|
|
motionPath: {
|
|
path: "#path",
|
|
autoRotate: true,
|
|
start: n * 0.0005,
|
|
end: 1 + n * 0.0005,
|
|
},
|
|
ease: "none",
|
|
transformOrigin: "50% 50%",
|
|
duration: 30,
|
|
}, 'start')
|
|
|
|
for (let i = 0; i < n; i++) {
|
|
timeline.to(
|
|
`.trail:nth-child(${i + 1})`,
|
|
{
|
|
motionPath: {
|
|
path: "#path",
|
|
start: n * 0.0005 - (0.0005 * i),
|
|
end: 1 + n * 0.0005 - (0.0005 * i),
|
|
autoRotate: true,
|
|
},
|
|
ease: "none",
|
|
transformOrigin: "50% 50%",
|
|
duration: 30,
|
|
onStart: () => {
|
|
document.querySelector(`.trail:nth-child(${i + 1}) > circle`).setAttribute('transform', 'translate(-55,0)')
|
|
document.querySelector(`.trail:nth-child(${i + 1}) > circle`).style.opacity = '1';
|
|
},
|
|
},
|
|
`start`
|
|
);
|
|
}
|
|
|
|
for (const t in randomMap) {
|
|
const v = randomMap[t]
|
|
timeline.to('#breakTextText',
|
|
{
|
|
keyframes: [
|
|
{opacity: 1},
|
|
{opacity: parseFloat(v)},
|
|
{opacity: 1}
|
|
],
|
|
duration: 0.2,
|
|
ease: 'bounce.in',
|
|
},
|
|
`start+=${t}`);
|
|
}
|
|
|
|
// When rendering, stop the animation because we need a freeze frame.
|
|
const params = new URL(location).searchParams
|
|
if (params.get('render') != null) {
|
|
timeline.pause()
|
|
}
|
|
if (params.get('transparent') != null) {
|
|
document.documentElement.classList.add('is-transparent')
|
|
}
|
|
|
|
const fps = 25
|
|
|
|
// setTimeout(() => {
|
|
// for (let i = 0; i < n; i++) {
|
|
// document.querySelector(`#trail > :nth-child(${i + 1}) > circle`).setAttribute('transform', 'translate(-80,0)')
|
|
// }
|
|
// }, 1000)
|
|
|
|
|
|
// This function tells renderer about basic information about the video.
|
|
function getInfo() {
|
|
return {
|
|
fps,
|
|
numberOfFrames: timeline.duration() * fps,
|
|
}
|
|
}
|
|
|
|
// This function will be called before rendering each frame of the video.
|
|
async function seekToFrame(frame) {
|
|
timeline.seek((frame + 1) / fps, false)
|
|
return new Promise(resolve => requestAnimationFrame(resolve))
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |