|
|
|
|
@ -1,8 +1,7 @@
|
|
|
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
|
|
|
import { AppModule } from '@/store/app'
|
|
|
|
|
import { waveInit } from './lib'
|
|
|
|
|
import { Debounce } from '@/utils/helper'
|
|
|
|
|
import { Wavery } from './lib/wave'
|
|
|
|
|
import { Debounce } from '@/utils/helper'
|
|
|
|
|
import { changeHsl, hexToRgb, rgbToHsl } from '@/utils/color'
|
|
|
|
|
|
|
|
|
|
export const OPACITY_ARR = [0.265, 0.4, 0.53, 1]
|
|
|
|
|
@ -11,10 +10,9 @@ export const bottomColors = ['#9C1EFF', '#8518E9', '#6F12D3', '#590ABD']
|
|
|
|
|
export const MAX_WAVES = 4
|
|
|
|
|
|
|
|
|
|
@Component
|
|
|
|
|
export default class DestructionTheme extends Vue {
|
|
|
|
|
export default class AgidaTheme extends Vue {
|
|
|
|
|
iconWidth = 667
|
|
|
|
|
iconHeight = 684
|
|
|
|
|
test = 1
|
|
|
|
|
|
|
|
|
|
wave = {
|
|
|
|
|
height: 300,
|
|
|
|
|
@ -24,7 +22,7 @@ export default class DestructionTheme extends Vue {
|
|
|
|
|
variance: 1,
|
|
|
|
|
animation: {
|
|
|
|
|
steps: 2,
|
|
|
|
|
time: 40000
|
|
|
|
|
time: 4000
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -33,44 +31,142 @@ export default class DestructionTheme extends Vue {
|
|
|
|
|
height: window.innerHeight
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get topColor() {
|
|
|
|
|
return '#03C79C'
|
|
|
|
|
get topColor(): string {
|
|
|
|
|
return AppModule.getThemeInput('top-color')?.value as string || '#00CC99'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get bottomColor() {
|
|
|
|
|
return '#9C1EFF'
|
|
|
|
|
get bottomColor(): string {
|
|
|
|
|
return AppModule.getThemeInput('bottom-color')?.value as string || '#6600FF'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get topColors() {
|
|
|
|
|
return this.generateArrayColors(this.topColor)
|
|
|
|
|
get animationSpeed(): number {
|
|
|
|
|
return AppModule.getThemeInput('animation-speed')?.value as number || 40
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get bottomColors() {
|
|
|
|
|
return this.generateArrayColors(this.bottomColor)
|
|
|
|
|
get topColors(): string[] {
|
|
|
|
|
const initHSL = rgbToHsl(hexToRgb(this.topColor))
|
|
|
|
|
const second = changeHsl(initHSL, 10, -3, -5)
|
|
|
|
|
const third = changeHsl(initHSL, 25, -3, -10)
|
|
|
|
|
const fourth = changeHsl(initHSL, 33, -3, -20)
|
|
|
|
|
|
|
|
|
|
return [initHSL, second, third, fourth]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
generateArrayColors(color: string) {
|
|
|
|
|
const initHSL = rgbToHsl(hexToRgb(color))
|
|
|
|
|
const second = changeHsl(initHSL, 17, 3, -5)
|
|
|
|
|
const third = changeHsl(initHSL, 26, 3, -8)
|
|
|
|
|
const thourd = changeHsl(initHSL, 35, 3, -12)
|
|
|
|
|
get bottomColors(): string[] {
|
|
|
|
|
const initHSL = rgbToHsl(hexToRgb(this.bottomColor))
|
|
|
|
|
const second = changeHsl(initHSL, 10, -3, 5)
|
|
|
|
|
const third = changeHsl(initHSL, 25, -3, 10)
|
|
|
|
|
const fourth = changeHsl(initHSL, 33, -3, 20)
|
|
|
|
|
|
|
|
|
|
return [initHSL, second, third, thourd]
|
|
|
|
|
return [initHSL, second, third, fourth]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get animationSpeed() {
|
|
|
|
|
return AppModule.getThemeInput('animation-speed')?.value as number || 40
|
|
|
|
|
get bottomActiveColor(): string {
|
|
|
|
|
return this.bottomColor // this.bottomColors[3]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get knifeSVG(): JSX.Element {
|
|
|
|
|
return <g>
|
|
|
|
|
<path d="M1233.68 556.289L490.85 201.979L400.013 392.424C1142.84 746.735 1233.68 556.289 1233.68 556.289Z" fill="url(#paint0_linear_602_754)"/>
|
|
|
|
|
<path d="M432.556 293.998L479.117 196.382L74.764 3.5156C59.8095 -3.61734 41.904 2.72332 34.7711 17.6778L3.55143 83.1312C-3.58151 98.0857 2.75915 115.991 17.7137 123.124L52.0107 139.483C65.6195 145.974 81.9138 140.204 88.4048 126.595C88.4048 126.595 102.294 97.911 145.302 118.425C188.31 138.938 173.495 170.432 173.495 170.432C173.495 170.432 188.648 139.1 231.655 159.613C274.663 180.127 259.849 211.621 259.849 211.621C259.849 211.621 274.692 180.141 318.009 200.802C361.326 221.463 346.203 252.809 346.203 252.809C346.203 252.809 361.355 221.477 404.363 241.991C447.371 262.504 432.556 293.998 432.556 293.998Z" fill="url(#paint1_linear_602_754)"/>
|
|
|
|
|
</g>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get agidaSVG(): JSX.Element {
|
|
|
|
|
return <g>
|
|
|
|
|
<path d="M236.522 618.424C214.225 622.652 204.614 620.602 184.495 607.788C175.291 601.813 166 593.101 166 593.101C223.5 607.788 267.5 566.618 293.675 571.01C312.903 574.236 339.52 591.001 339.52 591.001L340 607.531C329.492 607.531 303.286 631.11 289.19 653.664C284.577 660.968 278.81 669.041 276.247 671.604C268.687 679.165 253.309 685.059 244.98 683.522C243.8 683.241 243.063 682.984 242.673 682.537C242.173 681.963 242.241 681.076 242.673 679.421C245.364 667.76 258.947 648.282 274.197 633.545C285.217 623.037 288.293 620.987 305.464 612.273C329.171 600.099 330.068 599.586 327.633 596.639C325.968 594.717 324.174 594.46 314.819 595.101C306.105 595.742 301.364 596.895 291.496 600.996C274.709 607.916 249.208 615.989 236.522 618.424Z" fill="white"/>
|
|
|
|
|
<path d="M442.401 618.362C464.698 622.591 474.309 620.54 494.428 607.726C503.632 601.752 512.923 593.039 512.923 593.039C455.423 607.726 411.423 566.557 385.248 570.948C366.02 574.174 339.403 590.939 339.403 590.939L338.923 607.47C349.431 607.47 375.637 631.048 389.733 653.602C394.346 660.906 400.113 668.98 402.676 671.542C410.236 679.103 425.614 684.998 433.943 683.46C435.123 683.179 435.86 682.923 436.25 682.475C436.75 681.902 436.682 681.014 436.25 679.359C433.559 667.698 419.975 648.22 404.726 633.483C393.706 622.975 390.63 620.925 373.459 612.211C349.752 600.037 348.855 599.525 351.289 596.577C352.955 594.655 354.749 594.399 364.104 595.039C372.818 595.68 377.559 596.833 387.426 600.934C404.213 607.854 429.714 615.927 442.401 618.362Z" fill="white"/>
|
|
|
|
|
<path d="M327 90H302.361L289.29 68.1809L276.86 90H252.128L276.476 43.7891L252 0H276.348L289.29 21.1218L302.746 0H327L303.182 43.7891L327 90Z" fill="white"/>
|
|
|
|
|
<path d="M402 90H377.361L364.29 68.1809L351.86 90H327.128L351.476 43.7891L327 0H351.348L364.29 21.1218L377.746 0H402L378.182 43.7891L402 90Z" fill="white"/>
|
|
|
|
|
<path d="M426 90H402V0H426V90Z" fill="white"/>
|
|
|
|
|
<path d="M336.52 422.712L316.424 445.056L265.131 387.972H305.054L336.52 422.712Z" fill="white"/>
|
|
|
|
|
<path d="M371.661 388.636L318.894 447.306L372.412 506.811H412.458L358.939 447.306L411.707 388.636H371.661Z" fill="white"/>
|
|
|
|
|
<path d="M336.52 472.217L316.424 449.873L265.131 506.957H305.054L336.52 472.217Z" fill="white"/>
|
|
|
|
|
<path d="M428.98 234.452C428.98 210.159 442.862 190.464 473.076 190.464C526.972 190.464 524.818 169.224 524.818 169.224L521.588 210.444C521.588 234.738 501.845 254.432 477.491 254.432C423.596 254.432 426.827 271.175 426.827 271.175L428.98 234.452Z" fill="white"/>
|
|
|
|
|
<path d="M249.02 234.452C249.02 210.159 235.138 190.464 204.924 190.464C151.028 190.464 153.182 169.224 153.182 169.224L156.412 210.444C156.412 234.738 176.155 254.432 200.509 254.432C254.404 254.432 251.173 271.175 251.173 271.175L249.02 234.452Z" fill="white"/>
|
|
|
|
|
<path d="M175.251 499.349C175.251 499.349 204.006 522.632 220.283 535.811C236.559 548.99 226.17 577.893 226.17 577.893C226.17 577.893 195.851 553.344 182.769 542.751C169.687 532.158 175.251 499.349 175.251 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M129 542.962C129 542.962 157.756 566.246 174.032 579.425C190.308 592.604 216.418 576.43 216.418 576.43C216.418 576.43 186.099 551.881 173.016 541.288C159.934 530.695 129 542.962 129 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M118.91 444.189C118.91 444.189 144.144 471.249 158.427 486.566C172.71 501.882 158.399 529.057 158.399 529.057C158.399 529.057 131.793 500.526 120.313 488.215C108.832 475.904 118.91 444.189 118.91 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M67.038 480.938C67.038 480.938 92.2719 507.998 106.555 523.315C120.838 538.632 148.945 526.251 148.945 526.251C148.945 526.251 122.339 497.719 110.859 485.408C99.3787 473.097 67.038 480.938 67.038 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M83.639 377.825C83.639 377.825 100.437 410.792 109.945 429.452C119.453 448.112 98.205 470.29 98.205 470.29C98.205 470.29 80.4939 435.53 72.8519 420.532C65.2098 405.533 83.639 377.825 83.639 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M23.6467 398.852C23.6467 398.852 40.4444 431.82 49.9523 450.48C59.4602 469.14 89.8911 464.986 89.8911 464.986C89.8911 464.986 72.18 430.226 64.5379 415.228C56.8959 400.23 23.6467 398.852 23.6467 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M69.276 303.224C69.276 303.224 75.701 339.662 79.3377 360.287C82.9745 380.912 56.1713 395.908 56.1713 395.908C56.1713 395.908 49.3969 357.489 46.4739 340.911C43.5509 324.334 69.276 303.224 69.276 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M5.75718 305.793C5.75718 305.793 12.1821 342.231 15.8189 362.856C19.4556 383.481 49.7713 388.405 49.7713 388.405C49.7713 388.405 42.9969 349.986 40.0739 333.409C37.1508 316.831 5.75718 305.793 5.75718 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M74.8761 228.242C74.8761 228.242 69.7267 264.882 66.812 285.621C63.8973 306.361 33.7719 312.34 33.7719 312.34C33.7719 312.34 39.2013 273.708 41.544 257.038C43.8868 240.369 74.8761 228.242 74.8761 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M13.6722 211.057C13.6722 211.057 8.52276 247.697 5.60806 268.436C2.69336 289.175 30.0035 303.227 30.0035 303.227C30.0035 303.227 35.433 264.595 37.7757 247.925C40.1184 231.256 13.6722 211.057 13.6722 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M105.903 160.035C105.903 160.035 89.1059 193.002 79.5979 211.662C70.09 230.323 39.6592 226.169 39.6592 226.169C39.6592 226.169 57.3703 191.409 65.0123 176.41C72.6544 161.412 105.903 160.035 105.903 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M53.629 123.86C53.629 123.86 36.8314 156.827 27.3234 175.487C17.8155 194.148 39.063 216.325 39.063 216.325C39.063 216.325 56.7742 181.565 64.4162 166.567C72.0582 151.568 53.629 123.86 53.629 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M151.744 97.6303C151.744 97.6303 128.965 126.787 116.071 143.29C103.177 159.793 74.0978 149.909 74.0978 149.909C74.0978 149.909 98.116 119.167 108.479 105.903C118.843 92.6379 151.744 97.6303 151.744 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M107.332 52.1456C107.332 52.1456 84.553 81.3019 71.6592 97.8052C58.7654 114.309 75.3909 140.133 75.3909 140.133C75.3909 140.133 99.4091 109.391 109.773 96.1261C120.136 82.8615 107.332 52.1456 107.332 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M208.501 48.9768C208.501 48.9768 178.951 71.244 162.226 83.8478C145.5 96.4516 119.97 79.3779 119.97 79.3779C119.97 79.3779 151.126 55.8999 164.57 45.7695C178.013 35.6391 208.501 48.9768 208.501 48.9768Z" fill="white"/>
|
|
|
|
|
<path d="M175.251 499.349C175.251 499.349 204.006 522.632 220.283 535.811C236.559 548.99 226.17 577.893 226.17 577.893C226.17 577.893 195.851 553.344 182.769 542.751C169.687 532.158 175.251 499.349 175.251 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M129 542.962C129 542.962 157.756 566.246 174.032 579.425C190.308 592.604 216.418 576.43 216.418 576.43C216.418 576.43 186.099 551.881 173.016 541.288C159.934 530.695 129 542.962 129 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M118.91 444.189C118.91 444.189 144.144 471.249 158.427 486.566C172.71 501.882 158.399 529.057 158.399 529.057C158.399 529.057 131.793 500.526 120.313 488.215C108.832 475.904 118.91 444.189 118.91 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M67.038 480.938C67.038 480.938 92.2719 507.998 106.555 523.315C120.838 538.632 148.945 526.251 148.945 526.251C148.945 526.251 122.339 497.719 110.859 485.408C99.3787 473.097 67.038 480.938 67.038 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M83.639 377.825C83.639 377.825 100.437 410.792 109.945 429.452C119.453 448.112 98.205 470.29 98.205 470.29C98.205 470.29 80.4939 435.53 72.8519 420.532C65.2098 405.533 83.639 377.825 83.639 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M23.6467 398.852C23.6467 398.852 40.4444 431.82 49.9523 450.48C59.4602 469.14 89.8911 464.986 89.8911 464.986C89.8911 464.986 72.18 430.226 64.5379 415.228C56.8959 400.23 23.6467 398.852 23.6467 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M69.276 303.224C69.276 303.224 75.701 339.662 79.3377 360.287C82.9745 380.912 56.1713 395.908 56.1713 395.908C56.1713 395.908 49.3969 357.489 46.4739 340.911C43.5509 324.334 69.276 303.224 69.276 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M5.75718 305.793C5.75718 305.793 12.1821 342.231 15.8189 362.856C19.4556 383.481 49.7713 388.405 49.7713 388.405C49.7713 388.405 42.9969 349.986 40.0739 333.409C37.1508 316.831 5.75718 305.793 5.75718 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M74.8761 228.242C74.8761 228.242 69.7267 264.882 66.812 285.621C63.8973 306.361 33.7719 312.34 33.7719 312.34C33.7719 312.34 39.2013 273.708 41.544 257.038C43.8868 240.369 74.8761 228.242 74.8761 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M13.6722 211.057C13.6722 211.057 8.52276 247.697 5.60806 268.436C2.69336 289.175 30.0035 303.227 30.0035 303.227C30.0035 303.227 35.433 264.595 37.7757 247.925C40.1184 231.256 13.6722 211.057 13.6722 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M105.903 160.035C105.903 160.035 89.1059 193.002 79.5979 211.662C70.09 230.323 39.6592 226.169 39.6592 226.169C39.6592 226.169 57.3703 191.409 65.0123 176.41C72.6544 161.412 105.903 160.035 105.903 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M53.629 123.86C53.629 123.86 36.8314 156.827 27.3234 175.487C17.8155 194.148 39.063 216.325 39.063 216.325C39.063 216.325 56.7742 181.565 64.4162 166.567C72.0582 151.568 53.629 123.86 53.629 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M151.744 97.6303C151.744 97.6303 128.965 126.787 116.071 143.29C103.177 159.793 74.0978 149.909 74.0978 149.909C74.0978 149.909 98.116 119.167 108.479 105.903C118.843 92.6379 151.744 97.6303 151.744 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M107.332 52.1456C107.332 52.1456 84.553 81.3019 71.6592 97.8052C58.7654 114.309 75.3909 140.133 75.3909 140.133C75.3909 140.133 99.4091 109.391 109.773 96.1261C120.136 82.8615 107.332 52.1456 107.332 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M208.501 48.9768C208.501 48.9768 178.951 71.244 162.226 83.8478C145.5 96.4516 119.97 79.3779 119.97 79.3779C119.97 79.3779 151.126 55.8999 164.57 45.7695C178.013 35.6391 208.501 48.9768 208.501 48.9768Z" fill="white"/>
|
|
|
|
|
<path d="M503.169 499.349C503.169 499.349 474.413 522.632 458.137 535.811C441.86 548.99 452.249 577.893 452.249 577.893C452.249 577.893 482.569 553.344 495.651 542.751C508.733 532.158 503.169 499.349 503.169 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M549.42 542.962C549.42 542.962 520.664 566.246 504.388 579.425C488.111 592.604 462.002 576.43 462.002 576.43C462.002 576.43 492.321 551.881 505.403 541.288C518.485 530.695 549.42 542.962 549.42 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M559.509 444.189C559.509 444.189 534.275 471.249 519.992 486.566C505.709 501.882 520.021 529.057 520.021 529.057C520.021 529.057 546.627 500.526 558.107 488.215C569.587 475.904 559.509 444.189 559.509 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M611.382 480.938C611.382 480.938 586.148 507.998 571.865 523.315C557.581 538.632 529.474 526.251 529.474 526.251C529.474 526.251 556.081 497.719 567.561 485.408C579.041 473.097 611.382 480.938 611.382 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M594.781 377.825C594.781 377.825 577.983 410.792 568.475 429.452C558.967 448.112 580.215 470.29 580.215 470.29C580.215 470.29 597.926 435.53 605.568 420.532C613.21 405.533 594.781 377.825 594.781 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M654.773 398.852C654.773 398.852 637.975 431.82 628.467 450.48C618.959 469.14 588.528 464.986 588.528 464.986C588.528 464.986 606.24 430.226 613.882 415.228C621.524 400.23 654.773 398.852 654.773 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M609.144 303.224C609.144 303.224 602.719 339.662 599.082 360.287C595.445 380.912 622.248 395.908 622.248 395.908C622.248 395.908 629.023 357.489 631.946 340.911C634.869 324.334 609.144 303.224 609.144 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M672.662 305.793C672.662 305.793 666.237 342.231 662.601 362.856C658.964 383.481 628.648 388.405 628.648 388.405C628.648 388.405 635.423 349.986 638.346 333.409C641.269 316.831 672.662 305.793 672.662 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M603.544 228.242C603.544 228.242 608.693 264.882 611.608 285.621C614.522 306.361 644.648 312.34 644.648 312.34C644.648 312.34 639.218 273.708 636.876 257.038C634.533 240.369 603.544 228.242 603.544 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M664.747 211.057C664.747 211.057 669.897 247.697 672.812 268.436C675.726 289.175 648.416 303.227 648.416 303.227C648.416 303.227 642.987 264.595 640.644 247.925C638.301 231.256 664.747 211.057 664.747 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M572.516 160.035C572.516 160.035 589.314 193.002 598.822 211.662C608.33 230.323 638.76 226.169 638.76 226.169C638.76 226.169 621.049 191.409 613.407 176.41C605.765 161.412 572.516 160.035 572.516 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M624.791 123.86C624.791 123.86 641.588 156.827 651.096 175.487C660.604 194.148 639.356 216.325 639.356 216.325C639.356 216.325 621.645 181.565 614.003 166.567C606.361 151.568 624.791 123.86 624.791 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M526.676 97.6303C526.676 97.6303 549.455 126.787 562.349 143.29C575.243 159.793 604.322 149.909 604.322 149.909C604.322 149.909 580.304 119.167 569.94 105.903C559.577 92.6379 526.676 97.6303 526.676 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M571.087 52.1456C571.087 52.1456 593.867 81.3019 606.76 97.8052C619.654 114.309 603.029 140.133 603.029 140.133C603.029 140.133 579.01 109.391 568.647 96.1261C558.284 82.8615 571.087 52.1456 571.087 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M469.919 48.9768C469.919 48.9768 499.468 71.244 516.194 83.8478C532.92 96.4516 558.45 79.3779 558.45 79.3779C558.45 79.3779 527.293 55.8999 513.85 45.7695C500.406 35.6391 469.919 48.9768 469.919 48.9768Z" fill="white"/>
|
|
|
|
|
<path d="M503.169 499.349C503.169 499.349 474.413 522.632 458.137 535.811C441.86 548.99 452.249 577.893 452.249 577.893C452.249 577.893 482.569 553.344 495.651 542.751C508.733 532.158 503.169 499.349 503.169 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M549.42 542.962C549.42 542.962 520.664 566.246 504.388 579.425C488.111 592.604 462.002 576.43 462.002 576.43C462.002 576.43 492.321 551.881 505.403 541.288C518.485 530.695 549.42 542.962 549.42 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M559.509 444.189C559.509 444.189 534.275 471.249 519.992 486.566C505.709 501.882 520.021 529.057 520.021 529.057C520.021 529.057 546.627 500.526 558.107 488.215C569.587 475.904 559.509 444.189 559.509 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M611.382 480.938C611.382 480.938 586.148 507.998 571.865 523.315C557.581 538.632 529.474 526.251 529.474 526.251C529.474 526.251 556.081 497.719 567.561 485.408C579.041 473.097 611.382 480.938 611.382 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M594.781 377.825C594.781 377.825 577.983 410.792 568.475 429.452C558.967 448.112 580.215 470.29 580.215 470.29C580.215 470.29 597.926 435.53 605.568 420.532C613.21 405.533 594.781 377.825 594.781 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M654.773 398.852C654.773 398.852 637.975 431.82 628.467 450.48C618.959 469.14 588.528 464.986 588.528 464.986C588.528 464.986 606.24 430.226 613.882 415.228C621.524 400.23 654.773 398.852 654.773 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M609.144 303.224C609.144 303.224 602.719 339.662 599.082 360.287C595.445 380.912 622.248 395.908 622.248 395.908C622.248 395.908 629.023 357.489 631.946 340.911C634.869 324.334 609.144 303.224 609.144 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M672.662 305.793C672.662 305.793 666.237 342.231 662.601 362.856C658.964 383.481 628.648 388.405 628.648 388.405C628.648 388.405 635.423 349.986 638.346 333.409C641.269 316.831 672.662 305.793 672.662 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M603.544 228.242C603.544 228.242 608.693 264.882 611.608 285.621C614.522 306.361 644.648 312.34 644.648 312.34C644.648 312.34 639.218 273.708 636.876 257.038C634.533 240.369 603.544 228.242 603.544 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M664.747 211.057C664.747 211.057 669.897 247.697 672.812 268.436C675.726 289.175 648.416 303.227 648.416 303.227C648.416 303.227 642.987 264.595 640.644 247.925C638.301 231.256 664.747 211.057 664.747 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M572.516 160.035C572.516 160.035 589.314 193.002 598.822 211.662C608.33 230.323 638.76 226.169 638.76 226.169C638.76 226.169 621.049 191.409 613.407 176.41C605.765 161.412 572.516 160.035 572.516 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M624.791 123.86C624.791 123.86 641.588 156.827 651.096 175.487C660.604 194.148 639.356 216.325 639.356 216.325C639.356 216.325 621.645 181.565 614.003 166.567C606.361 151.568 624.791 123.86 624.791 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M526.676 97.6303C526.676 97.6303 549.455 126.787 562.349 143.29C575.243 159.793 604.322 149.909 604.322 149.909C604.322 149.909 580.304 119.167 569.94 105.903C559.577 92.6379 526.676 97.6303 526.676 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M571.087 52.1456C571.087 52.1456 593.867 81.3019 606.76 97.8052C619.654 114.309 603.029 140.133 603.029 140.133C603.029 140.133 579.01 109.391 568.647 96.1261C558.284 82.8615 571.087 52.1456 571.087 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M469.919 48.9768C469.919 48.9768 499.468 71.244 516.194 83.8478C532.92 96.4516 558.45 79.3779 558.45 79.3779C558.45 79.3779 527.293 55.8999 513.85 45.7695C500.406 35.6391 469.919 48.9768 469.919 48.9768Z" fill="white"/>
|
|
|
|
|
</g>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get yinYangSVG(): JSX.Element {
|
|
|
|
|
return <g>
|
|
|
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M289.088 578.175C448.746 578.175 578.175 448.746 578.175 289.088C578.175 129.429 448.746 0 289.088 0C129.429 0 0 129.429 0 289.088C0 448.746 129.429 578.175 289.088 578.175ZM289.087 570.763C214.383 570.763 142.737 541.086 89.9132 488.262C37.0889 435.437 7.41248 363.792 7.41248 289.087C7.41248 214.383 37.0889 142.737 89.9132 89.9132C142.737 37.0889 214.383 7.41248 289.087 7.41248C326.44 7.41248 362.262 22.2507 388.675 48.6628C415.087 75.075 429.925 110.898 429.925 148.25C429.925 185.602 415.087 221.425 388.675 247.837C362.262 274.249 326.44 289.087 289.087 289.087C251.735 289.087 215.912 303.926 189.5 330.338C163.088 356.75 148.25 392.573 148.25 429.925C148.25 467.277 163.088 503.1 189.5 529.512C215.912 555.924 251.735 570.763 289.087 570.763ZM326.15 429.925C326.15 450.394 309.557 466.988 289.088 466.988C268.618 466.988 252.025 450.394 252.025 429.925C252.025 409.456 268.618 392.863 289.088 392.863C309.557 392.863 326.15 409.456 326.15 429.925Z" fill="white"/>
|
|
|
|
|
<path d="M289.088 185.312C309.557 185.312 326.15 168.719 326.15 148.25C326.15 127.781 309.557 111.188 289.088 111.188C268.618 111.188 252.025 127.781 252.025 148.25C252.025 168.719 268.618 185.312 289.088 185.312Z" fill="white"/>
|
|
|
|
|
</g>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get activeFragment() {
|
|
|
|
|
return this.knifeSVG
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get width() {
|
|
|
|
|
get width(): number {
|
|
|
|
|
return this.screen.width
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get height() {
|
|
|
|
|
get height(): number {
|
|
|
|
|
return this.screen.height
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get viewBox() {
|
|
|
|
|
get viewBox(): string {
|
|
|
|
|
return `0 0 ${this.width} ${this.height}`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -102,10 +198,11 @@ export default class DestructionTheme extends Vue {
|
|
|
|
|
generateWave(type: 'bottom' | 'top') {
|
|
|
|
|
const wavery = new Wavery(this.wave)
|
|
|
|
|
const waveSvg = wavery.generateSvg()
|
|
|
|
|
console.log('GENERATE WAVE')
|
|
|
|
|
|
|
|
|
|
const { height, width, xmlns, paths } = waveSvg.svg
|
|
|
|
|
const isTop = type === 'top'
|
|
|
|
|
const colorsArray = isTop ? topColors : bottomColors
|
|
|
|
|
const colorsArray = isTop ? this.topColors : this.bottomColors
|
|
|
|
|
const angle = Math.atan(window.innerHeight / window.innerWidth) * (180 / Math.PI) * 1.1
|
|
|
|
|
|
|
|
|
|
return <svg
|
|
|
|
|
@ -151,88 +248,19 @@ export default class DestructionTheme extends Vue {
|
|
|
|
|
>
|
|
|
|
|
<rect width={this.width} height={this.height} fill="#22233D"/>
|
|
|
|
|
<mask id="mask-agida" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width={this.width} height={this.height}>
|
|
|
|
|
<g id="main" style={`transform: translate(calc(${this.width / 2}px - ${this.iconWidth / 2}px), calc(${this.height / 2}px - ${this.iconHeight / 2}px))`}>
|
|
|
|
|
<path d="M237.103 618.424C214.805 622.652 205.194 620.602 185.075 607.788C175.872 601.813 166.581 593.101 166.581 593.101C224.081 607.788 268.081 566.618 294.255 571.01C313.484 574.236 340.101 591.001 340.101 591.001L340.581 607.531C330.073 607.531 303.866 631.11 289.77 653.664C285.157 660.968 279.391 669.041 276.828 671.604C269.267 679.165 253.89 685.059 245.56 683.522C244.38 683.241 243.644 682.984 243.254 682.537C242.754 681.963 242.822 681.076 243.254 679.421C245.945 667.76 259.528 648.282 274.777 633.545C285.798 623.037 288.873 620.987 306.045 612.273C329.752 600.099 330.649 599.586 328.214 596.639C326.548 594.717 324.754 594.46 315.399 595.101C306.686 595.742 301.944 596.895 292.077 600.996C275.29 607.916 249.789 615.989 237.103 618.424Z" fill="white"/>
|
|
|
|
|
<path d="M442.981 618.362C465.279 622.591 474.89 620.54 495.009 607.726C504.212 601.752 513.503 593.039 513.503 593.039C456.003 607.726 412.003 566.557 385.829 570.948C366.6 574.174 339.983 590.939 339.983 590.939L339.503 607.47C350.011 607.47 376.218 631.048 390.314 653.602C394.927 660.906 400.693 668.98 403.256 671.542C410.817 679.103 426.194 684.998 434.524 683.46C435.704 683.179 436.44 682.923 436.83 682.475C437.33 681.902 437.262 681.014 436.83 679.359C434.139 667.698 420.556 648.22 405.307 633.483C394.286 622.975 391.211 620.925 374.039 612.211C350.332 600.037 349.435 599.525 351.87 596.577C353.536 594.655 355.33 594.399 364.685 595.039C373.398 595.68 378.14 596.833 388.007 600.934C404.794 607.854 430.295 615.927 442.981 618.362Z" fill="white"/>
|
|
|
|
|
<path d="M327.581 90H302.942L289.871 68.1809L277.441 90H252.709L277.056 43.7891L252.581 0H276.928L289.871 21.1218L303.326 0H327.581L303.763 43.7891L327.581 90Z" fill="white"/>
|
|
|
|
|
<path d="M402.581 90H377.942L364.871 68.1809L352.441 90H327.709L352.056 43.7891L327.581 0H351.928L364.871 21.1218L378.326 0H402.581L378.763 43.7891L402.581 90Z" fill="white"/>
|
|
|
|
|
<path d="M426.581 90H402.581V0H426.581V90Z" fill="white"/>
|
|
|
|
|
<path d="M337.101 422.712L317.005 445.056L265.711 387.972H305.635L337.101 422.712Z" fill="white"/>
|
|
|
|
|
<path d="M372.241 388.636L319.474 447.306L372.992 506.811H413.038L359.52 447.306L412.287 388.636H372.241Z" fill="white"/>
|
|
|
|
|
<path d="M337.101 472.217L317.005 449.873L265.711 506.957H305.635L337.101 472.217Z" fill="white"/>
|
|
|
|
|
<path d="M429.561 234.452C429.561 210.159 443.443 190.464 473.657 190.464C527.552 190.464 525.399 169.224 525.399 169.224L522.168 210.444C522.168 234.738 502.426 254.432 478.072 254.432C424.177 254.432 427.407 271.175 427.407 271.175L429.561 234.452Z" fill="white"/>
|
|
|
|
|
<path d="M249.6 234.452C249.6 210.159 235.718 190.464 205.504 190.464C151.609 190.464 153.762 169.224 153.762 169.224L156.993 210.444C156.993 234.738 176.735 254.432 201.089 254.432C254.984 254.432 251.754 271.175 251.754 271.175L249.6 234.452Z" fill="white"/>
|
|
|
|
|
<path d="M175.831 499.349C175.831 499.349 204.587 522.632 220.863 535.811C237.14 548.99 226.751 577.893 226.751 577.893C226.751 577.893 196.432 553.344 183.349 542.751C170.267 532.158 175.831 499.349 175.831 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M129.581 542.962C129.581 542.962 158.336 566.246 174.613 579.425C190.889 592.604 216.999 576.43 216.999 576.43C216.999 576.43 186.679 551.881 173.597 541.288C160.515 530.695 129.581 542.962 129.581 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M119.491 444.189C119.491 444.189 144.725 471.249 159.008 486.566C173.291 501.882 158.98 529.057 158.98 529.057C158.98 529.057 132.373 500.526 120.893 488.215C109.413 475.904 119.491 444.189 119.491 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M67.6186 480.938C67.6186 480.938 92.8526 507.998 107.136 523.315C121.419 538.632 149.526 526.251 149.526 526.251C149.526 526.251 122.92 497.719 111.439 485.408C99.9593 473.097 67.6186 480.938 67.6186 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M84.2195 377.825C84.2195 377.825 101.017 410.792 110.525 429.452C120.033 448.112 98.7855 470.29 98.7855 470.29C98.7855 470.29 81.0744 435.53 73.4324 420.532C65.7903 405.533 84.2195 377.825 84.2195 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M24.2272 398.852C24.2272 398.852 41.0249 431.82 50.5328 450.48C60.0407 469.14 90.4716 464.986 90.4716 464.986C90.4716 464.986 72.7604 430.226 65.1184 415.228C57.4764 400.23 24.2272 398.852 24.2272 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M69.8565 303.224C69.8565 303.224 76.2815 339.662 79.9182 360.287C83.555 380.912 56.7518 395.908 56.7518 395.908C56.7518 395.908 49.9774 357.489 47.0544 340.911C44.1314 324.334 69.8565 303.224 69.8565 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M6.33756 305.793C6.33756 305.793 12.7625 342.231 16.3992 362.856C20.036 383.481 50.3517 388.405 50.3517 388.405C50.3517 388.405 43.5773 349.986 40.6543 333.409C37.7312 316.831 6.33756 305.793 6.33756 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M75.4565 228.242C75.4565 228.242 70.3071 264.882 67.3924 285.621C64.4777 306.361 34.3524 312.34 34.3524 312.34C34.3524 312.34 39.7818 273.708 42.1245 257.038C44.4672 240.369 75.4565 228.242 75.4565 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M14.2527 211.057C14.2527 211.057 9.10328 247.697 6.18858 268.436C3.27388 289.175 30.5841 303.227 30.5841 303.227C30.5841 303.227 36.0135 264.595 38.3562 247.925C40.6989 231.256 14.2527 211.057 14.2527 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M106.484 160.035C106.484 160.035 89.6863 193.002 80.1784 211.662C70.6705 230.323 40.2396 226.169 40.2396 226.169C40.2396 226.169 57.9507 191.409 65.5928 176.41C73.2348 161.412 106.484 160.035 106.484 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M54.2094 123.86C54.2094 123.86 37.4117 156.827 27.9038 175.487C18.3959 194.148 39.6434 216.325 39.6434 216.325C39.6434 216.325 57.3545 181.565 64.9966 166.567C72.6386 151.568 54.2094 123.86 54.2094 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M152.325 97.6303C152.325 97.6303 129.545 126.787 116.651 143.29C103.758 159.793 74.6785 149.909 74.6785 149.909C74.6785 149.909 98.6968 119.167 109.06 105.903C119.424 92.6379 152.325 97.6303 152.325 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M107.913 52.1456C107.913 52.1456 85.1336 81.3019 72.2398 97.8052C59.346 114.309 75.9715 140.133 75.9715 140.133C75.9715 140.133 99.9897 109.391 110.353 96.1261C120.717 82.8615 107.913 52.1456 107.913 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M209.082 48.9768C209.082 48.9768 179.532 71.244 162.806 83.8478C146.08 96.4516 120.55 79.3779 120.55 79.3779C120.55 79.3779 151.707 55.8999 165.15 45.7695C178.594 35.6391 209.082 48.9768 209.082 48.9768Z" fill="white"/>
|
|
|
|
|
<path d="M175.831 499.349C175.831 499.349 204.587 522.632 220.863 535.811C237.14 548.99 226.751 577.893 226.751 577.893C226.751 577.893 196.432 553.344 183.349 542.751C170.267 532.158 175.831 499.349 175.831 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M129.581 542.962C129.581 542.962 158.336 566.246 174.613 579.425C190.889 592.604 216.999 576.43 216.999 576.43C216.999 576.43 186.679 551.881 173.597 541.288C160.515 530.695 129.581 542.962 129.581 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M119.491 444.189C119.491 444.189 144.725 471.249 159.008 486.566C173.291 501.882 158.98 529.057 158.98 529.057C158.98 529.057 132.373 500.526 120.893 488.215C109.413 475.904 119.491 444.189 119.491 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M67.6186 480.938C67.6186 480.938 92.8526 507.998 107.136 523.315C121.419 538.632 149.526 526.251 149.526 526.251C149.526 526.251 122.92 497.719 111.439 485.408C99.9593 473.097 67.6186 480.938 67.6186 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M84.2195 377.825C84.2195 377.825 101.017 410.792 110.525 429.452C120.033 448.112 98.7855 470.29 98.7855 470.29C98.7855 470.29 81.0744 435.53 73.4324 420.532C65.7903 405.533 84.2195 377.825 84.2195 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M24.2272 398.852C24.2272 398.852 41.0249 431.82 50.5328 450.48C60.0407 469.14 90.4716 464.986 90.4716 464.986C90.4716 464.986 72.7604 430.226 65.1184 415.228C57.4764 400.23 24.2272 398.852 24.2272 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M69.8565 303.224C69.8565 303.224 76.2815 339.662 79.9182 360.287C83.555 380.912 56.7518 395.908 56.7518 395.908C56.7518 395.908 49.9774 357.489 47.0544 340.911C44.1314 324.334 69.8565 303.224 69.8565 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M6.33756 305.793C6.33756 305.793 12.7625 342.231 16.3992 362.856C20.036 383.481 50.3517 388.405 50.3517 388.405C50.3517 388.405 43.5773 349.986 40.6543 333.409C37.7312 316.831 6.33756 305.793 6.33756 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M75.4565 228.242C75.4565 228.242 70.3071 264.882 67.3924 285.621C64.4777 306.361 34.3524 312.34 34.3524 312.34C34.3524 312.34 39.7818 273.708 42.1245 257.038C44.4672 240.369 75.4565 228.242 75.4565 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M14.2527 211.057C14.2527 211.057 9.10328 247.697 6.18858 268.436C3.27388 289.175 30.5841 303.227 30.5841 303.227C30.5841 303.227 36.0135 264.595 38.3562 247.925C40.6989 231.256 14.2527 211.057 14.2527 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M106.484 160.035C106.484 160.035 89.6863 193.002 80.1784 211.662C70.6705 230.323 40.2396 226.169 40.2396 226.169C40.2396 226.169 57.9507 191.409 65.5928 176.41C73.2348 161.412 106.484 160.035 106.484 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M54.2094 123.86C54.2094 123.86 37.4117 156.827 27.9038 175.487C18.3959 194.148 39.6434 216.325 39.6434 216.325C39.6434 216.325 57.3545 181.565 64.9966 166.567C72.6386 151.568 54.2094 123.86 54.2094 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M152.325 97.6303C152.325 97.6303 129.545 126.787 116.651 143.29C103.758 159.793 74.6785 149.909 74.6785 149.909C74.6785 149.909 98.6968 119.167 109.06 105.903C119.424 92.6379 152.325 97.6303 152.325 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M107.913 52.1456C107.913 52.1456 85.1336 81.3019 72.2398 97.8052C59.346 114.309 75.9715 140.133 75.9715 140.133C75.9715 140.133 99.9897 109.391 110.353 96.1261C120.717 82.8615 107.913 52.1456 107.913 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M209.082 48.9768C209.082 48.9768 179.532 71.244 162.806 83.8478C146.08 96.4516 120.55 79.3779 120.55 79.3779C120.55 79.3779 151.707 55.8999 165.15 45.7695C178.594 35.6391 209.082 48.9768 209.082 48.9768Z" fill="white"/>
|
|
|
|
|
<path d="M503.749 499.349C503.749 499.349 474.994 522.632 458.717 535.811C442.441 548.99 452.83 577.893 452.83 577.893C452.83 577.893 483.149 553.344 496.231 542.751C509.313 532.158 503.749 499.349 503.749 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M550 542.962C550 542.962 521.244 566.246 504.968 579.425C488.692 592.604 462.582 576.43 462.582 576.43C462.582 576.43 492.901 551.881 505.984 541.288C519.066 530.695 550 542.962 550 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M560.09 444.189C560.09 444.189 534.856 471.249 520.573 486.566C506.289 501.882 520.601 529.057 520.601 529.057C520.601 529.057 547.207 500.526 558.687 488.215C570.167 475.904 560.09 444.189 560.09 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M611.962 480.938C611.962 480.938 586.728 507.998 572.445 523.315C558.162 538.632 530.055 526.251 530.055 526.251C530.055 526.251 556.661 497.719 568.141 485.408C579.621 473.097 611.962 480.938 611.962 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M595.361 377.825C595.361 377.825 578.563 410.792 569.055 429.452C559.548 448.112 580.795 470.29 580.795 470.29C580.795 470.29 598.506 435.53 606.148 420.532C613.79 405.533 595.361 377.825 595.361 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M655.353 398.852C655.353 398.852 638.556 431.82 629.048 450.48C619.54 469.14 589.109 464.986 589.109 464.986C589.109 464.986 606.82 430.226 614.462 415.228C622.104 400.23 655.353 398.852 655.353 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M609.724 303.224C609.724 303.224 603.299 339.662 599.662 360.287C596.026 380.912 622.829 395.908 622.829 395.908C622.829 395.908 629.603 357.489 632.526 340.911C635.449 324.334 609.724 303.224 609.724 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M673.243 305.793C673.243 305.793 666.818 342.231 663.181 362.856C659.545 383.481 629.229 388.405 629.229 388.405C629.229 388.405 636.003 349.986 638.926 333.409C641.849 316.831 673.243 305.793 673.243 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M604.124 228.242C604.124 228.242 609.273 264.882 612.188 285.621C615.103 306.361 645.228 312.34 645.228 312.34C645.228 312.34 639.799 273.708 637.456 257.038C635.113 240.369 604.124 228.242 604.124 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M665.328 211.057C665.328 211.057 670.477 247.697 673.392 268.436C676.307 289.175 648.997 303.227 648.997 303.227C648.997 303.227 643.567 264.595 641.224 247.925C638.882 231.256 665.328 211.057 665.328 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M573.097 160.035C573.097 160.035 589.894 193.002 599.402 211.662C608.91 230.323 639.341 226.169 639.341 226.169C639.341 226.169 621.63 191.409 613.988 176.41C606.346 161.412 573.097 160.035 573.097 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M625.371 123.86C625.371 123.86 642.169 156.827 651.677 175.487C661.185 194.148 639.937 216.325 639.937 216.325C639.937 216.325 622.226 181.565 614.584 166.567C606.942 151.568 625.371 123.86 625.371 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M527.256 97.6303C527.256 97.6303 550.035 126.787 562.929 143.29C575.823 159.793 604.902 149.909 604.902 149.909C604.902 149.909 580.884 119.167 570.52 105.903C560.157 92.6379 527.256 97.6303 527.256 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M571.667 52.1456C571.667 52.1456 594.447 81.3019 607.341 97.8052C620.235 114.309 603.609 140.133 603.609 140.133C603.609 140.133 579.591 109.391 569.227 96.1261C558.864 82.8615 571.667 52.1456 571.667 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M470.499 48.9768C470.499 48.9768 500.049 71.244 516.774 83.8478C533.5 96.4516 559.03 79.3779 559.03 79.3779C559.03 79.3779 527.874 55.8999 514.43 45.7695C500.987 35.6391 470.499 48.9768 470.499 48.9768Z" fill="white"/>
|
|
|
|
|
<path d="M503.749 499.349C503.749 499.349 474.994 522.632 458.717 535.811C442.441 548.99 452.83 577.893 452.83 577.893C452.83 577.893 483.149 553.344 496.231 542.751C509.313 532.158 503.749 499.349 503.749 499.349Z" fill="white"/>
|
|
|
|
|
<path d="M550 542.962C550 542.962 521.244 566.246 504.968 579.425C488.692 592.604 462.582 576.43 462.582 576.43C462.582 576.43 492.901 551.881 505.984 541.288C519.066 530.695 550 542.962 550 542.962Z" fill="white"/>
|
|
|
|
|
<path d="M560.09 444.189C560.09 444.189 534.856 471.249 520.573 486.566C506.289 501.882 520.601 529.057 520.601 529.057C520.601 529.057 547.207 500.526 558.687 488.215C570.167 475.904 560.09 444.189 560.09 444.189Z" fill="white"/>
|
|
|
|
|
<path d="M611.962 480.938C611.962 480.938 586.728 507.998 572.445 523.315C558.162 538.632 530.055 526.251 530.055 526.251C530.055 526.251 556.661 497.719 568.141 485.408C579.621 473.097 611.962 480.938 611.962 480.938Z" fill="white"/>
|
|
|
|
|
<path d="M595.361 377.825C595.361 377.825 578.563 410.792 569.055 429.452C559.548 448.112 580.795 470.29 580.795 470.29C580.795 470.29 598.506 435.53 606.148 420.532C613.79 405.533 595.361 377.825 595.361 377.825Z" fill="white"/>
|
|
|
|
|
<path d="M655.353 398.852C655.353 398.852 638.556 431.82 629.048 450.48C619.54 469.14 589.109 464.986 589.109 464.986C589.109 464.986 606.82 430.226 614.462 415.228C622.104 400.23 655.353 398.852 655.353 398.852Z" fill="white"/>
|
|
|
|
|
<path d="M609.724 303.224C609.724 303.224 603.299 339.662 599.662 360.287C596.026 380.912 622.829 395.908 622.829 395.908C622.829 395.908 629.603 357.489 632.526 340.911C635.449 324.334 609.724 303.224 609.724 303.224Z" fill="white"/>
|
|
|
|
|
<path d="M673.243 305.793C673.243 305.793 666.818 342.231 663.181 362.856C659.545 383.481 629.229 388.405 629.229 388.405C629.229 388.405 636.003 349.986 638.926 333.409C641.849 316.831 673.243 305.793 673.243 305.793Z" fill="white"/>
|
|
|
|
|
<path d="M604.124 228.242C604.124 228.242 609.273 264.882 612.188 285.621C615.103 306.361 645.228 312.34 645.228 312.34C645.228 312.34 639.799 273.708 637.456 257.038C635.113 240.369 604.124 228.242 604.124 228.242Z" fill="white"/>
|
|
|
|
|
<path d="M665.328 211.057C665.328 211.057 670.477 247.697 673.392 268.436C676.307 289.175 648.997 303.227 648.997 303.227C648.997 303.227 643.567 264.595 641.224 247.925C638.882 231.256 665.328 211.057 665.328 211.057Z" fill="white"/>
|
|
|
|
|
<path d="M573.097 160.035C573.097 160.035 589.894 193.002 599.402 211.662C608.91 230.323 639.341 226.169 639.341 226.169C639.341 226.169 621.63 191.409 613.988 176.41C606.346 161.412 573.097 160.035 573.097 160.035Z" fill="white"/>
|
|
|
|
|
<path d="M625.371 123.86C625.371 123.86 642.169 156.827 651.677 175.487C661.185 194.148 639.937 216.325 639.937 216.325C639.937 216.325 622.226 181.565 614.584 166.567C606.942 151.568 625.371 123.86 625.371 123.86Z" fill="white"/>
|
|
|
|
|
<path d="M527.256 97.6303C527.256 97.6303 550.035 126.787 562.929 143.29C575.823 159.793 604.902 149.909 604.902 149.909C604.902 149.909 580.884 119.167 570.52 105.903C560.157 92.6379 527.256 97.6303 527.256 97.6303Z" fill="white"/>
|
|
|
|
|
<path d="M571.667 52.1456C571.667 52.1456 594.447 81.3019 607.341 97.8052C620.235 114.309 603.609 140.133 603.609 140.133C603.609 140.133 579.591 109.391 569.227 96.1261C558.864 82.8615 571.667 52.1456 571.667 52.1456Z" fill="white"/>
|
|
|
|
|
<path d="M470.499 48.9768C470.499 48.9768 500.049 71.244 516.774 83.8478C533.5 96.4516 559.03 79.3779 559.03 79.3779C559.03 79.3779 527.874 55.8999 514.43 45.7695C500.987 35.6391 470.499 48.9768 470.499 48.9768Z" fill="white"/>
|
|
|
|
|
<g id="main" style={`transform: translate(calc(${this.width / 2}px - ${this.iconWidth / 2}px), calc(${this.height / 2}px - ${this.iconHeight / 2 - 30}px))`}>
|
|
|
|
|
{this.activeFragment}
|
|
|
|
|
</g>
|
|
|
|
|
</mask>
|
|
|
|
|
<g mask="url(#mask-agida)">
|
|
|
|
|
<path d="M1862.93 140.4H-57.0667V1220.4H1862.93V140.4Z" fill="#6600FF"/>
|
|
|
|
|
<path d="M1862.93 140.4H-57.0667V1220.4H1862.93V140.4Z" fill={this.bottomActiveColor}/>
|
|
|
|
|
<g filter="url(#filter0_f_506_268)">
|
|
|
|
|
<path d="M1512.07 1310.6C1932.69 1310.6 2273.67 1022.9 2273.67 668C2273.67 313.102 1932.69 25.4 1512.07 25.4C1091.45 25.4 750.467 313.102 750.467 668C750.467 1022.9 1091.45 1310.6 1512.07 1310.6Z" fill="#00CC99"/>
|
|
|
|
|
<path d="M1646.47 889.4C2067.09 889.4 2408.07 601.698 2408.07 246.8C2408.07 -108.098 2067.09 -395.8 1646.47 -395.8C1225.85 -395.8 884.867 -108.098 884.867 246.8C884.867 601.698 1225.85 889.4 1646.47 889.4Z" fill="#6600FF"/>
|
|
|
|
|
<path d="M272.6 1112.6C693.22 1112.6 1034.2 824.898 1034.2 470C1034.2 115.102 693.22 -172.6 272.6 -172.6C-148.02 -172.6 -489 115.102 -489 470C-489 824.898 -148.02 1112.6 272.6 1112.6Z" fill="#00CC99"/>
|
|
|
|
|
<path d="M1145.13 1514C1565.75 1514 1906.73 1226.3 1906.73 871.4C1906.73 516.502 1565.75 228.8 1145.13 228.8C724.513 228.8 383.533 516.502 383.533 871.4C383.533 1226.3 724.513 1514 1145.13 1514Z" fill="#00CC99"/>
|
|
|
|
|
<path d="M690.733 855.2C1111.35 855.2 1452.33 567.498 1452.33 212.6C1452.33 -142.298 1111.35 -430 690.733 -430C270.113 -430 -70.8667 -142.298 -70.8667 212.6C-70.8667 567.498 270.113 855.2 690.733 855.2Z" fill="#6600FF"/>
|
|
|
|
|
<path d="M281.133 1447.4C701.753 1447.4 1042.73 1159.7 1042.73 804.8C1042.73 449.902 701.753 162.2 281.133 162.2C-139.487 162.2 -480.467 449.902 -480.467 804.8C-480.467 1159.7 -139.487 1447.4 281.133 1447.4Z" fill="#00CC99"/>
|
|
|
|
|
<path d="M1512.07 1310.6C1932.69 1310.6 2273.67 1022.9 2273.67 668C2273.67 313.102 1932.69 25.4 1512.07 25.4C1091.45 25.4 750.467 313.102 750.467 668C750.467 1022.9 1091.45 1310.6 1512.07 1310.6Z" fill={this.topColor}/>
|
|
|
|
|
<path d="M1646.47 889.4C2067.09 889.4 2408.07 601.698 2408.07 246.8C2408.07 -108.098 2067.09 -395.8 1646.47 -395.8C1225.85 -395.8 884.867 -108.098 884.867 246.8C884.867 601.698 1225.85 889.4 1646.47 889.4Z" fill={this.bottomActiveColor}/>
|
|
|
|
|
<path d="M272.6 1112.6C693.22 1112.6 1034.2 824.898 1034.2 470C1034.2 115.102 693.22 -172.6 272.6 -172.6C-148.02 -172.6 -489 115.102 -489 470C-489 824.898 -148.02 1112.6 272.6 1112.6Z" fill={this.topColor}/>
|
|
|
|
|
<path d="M1145.13 1514C1565.75 1514 1906.73 1226.3 1906.73 871.4C1906.73 516.502 1565.75 228.8 1145.13 228.8C724.513 228.8 383.533 516.502 383.533 871.4C383.533 1226.3 724.513 1514 1145.13 1514Z" fill={this.topColor}/>
|
|
|
|
|
<path d="M690.733 855.2C1111.35 855.2 1452.33 567.498 1452.33 212.6C1452.33 -142.298 1111.35 -430 690.733 -430C270.113 -430 -70.8667 -142.298 -70.8667 212.6C-70.8667 567.498 270.113 855.2 690.733 855.2Z" fill={this.bottomActiveColor}/>
|
|
|
|
|
<path d="M281.133 1447.4C701.753 1447.4 1042.73 1159.7 1042.73 804.8C1042.73 449.902 701.753 162.2 281.133 162.2C-139.487 162.2 -480.467 449.902 -480.467 804.8C-480.467 1159.7 -139.487 1447.4 281.133 1447.4Z" fill={this.topColor}/>
|
|
|
|
|
</g>
|
|
|
|
|
</g>
|
|
|
|
|
<defs>
|
|
|
|
|
|