Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[button]witty-bullfrog-54 #58

Open
ZiYi0414 opened this issue Dec 27, 2023 · 0 comments
Open

[button]witty-bullfrog-54 #58

ZiYi0414 opened this issue Dec 27, 2023 · 0 comments
Labels
Button Button 按钮 component

Comments

@ZiYi0414
Copy link
Owner

title: witty-bullfrog-54
made_by: kennyotsu

/* overengeneered pure css action button */
/* UIVERSE CSS Challenge entry */
/* by kennyotsu <3 */

/* container wraps everything together, applies general styles and does nothing else*/
.container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 200px;
  height: 200px;
  color: rgb(131, 131, 131);
  -webkit-transition: 400ms ease-in-out;
  transition: 400ms ease-in-out;
  transform: translateY(20px);
}

/* clickHandler, as the name suggests, handles clicks. 
	 Its a label for invisible checkbox, positioned absolutely and taking whole container space.
	 Comes with insane z-index. Stays above .container
	 When clicked, will change input state to checked */
#shuttle-wrapper {
  position: absolute;
  opacity: 0;
  -webkit-transition: 200ms ease-in;
  transition: 200ms ease-in;
  z-index: 200;
}

#b {
  width: 80px;
  height: auto;
  z-index: 200;
}

#shadow {
  position: absolute;
  width: 100px;
  height: 80px;
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
  transform: rotateX(45deg) rotateZ(45deg);
  bottom: -10px;
  z-index: -1;
  background: radial-gradient(rgba(0, 0, 0, 0.382) 0%, rgba(0, 0, 0, 0) 70%);
}

#clickHandler {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 999;
}

#clickHandler:hover {
  cursor: pointer;
}

.container:hover #shuttle-wrapper {
  opacity: 1;
  -webkit-transform: translateY(-100px) translateZ(140px);
  -ms-transform: translateY(-100px) translateZ(140px);
  transform: translateY(-100px) translateZ(140px);
  -webkit-transition: 400ms ease-in-out;
  transition: 400ms ease-in-out;
}

#checkbox {
  /* comment out to actually see the checkbox state */
  display: none;
  /*  */
  position: absolute;
  bottom: 0px;
  width: 200px;
}

/* this pseudo-selectors will fire animations when 
	 clickHandler changes checkbox state to checked */
#checkbox:checked ~ #shuttle-wrapper #b {
  -webkit-animation-name: launch;
  animation-name: launch;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#checkbox:checked ~ #shuttle-wrapper #shadow {
  -webkit-animation: shadow-launch 6s ease-in-out;
  animation: shadow-launch 6s ease-in-out;
}

#checkbox:checked ~ #to-hover {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#checkbox:checked ~ #button #to-launch {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}
/* and this will take care of hover */
#clickHandler:hover ~ #button {
  width: 200px;
  height: 200px;
  -webkit-transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  -webkit-box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
    28px 28px 28px 0 rgba(28, 27, 88, 0.315);
  box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
    28px 28px 28px 0 rgba(28, 27, 88, 0.315);
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.container:hover {
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
}

#to-launch {
  color: rgb(1, 85, 255);
  font-size: large;
  font-weight: bold;
  -webkit-transition: ease-out 200ms;
  transition: ease-out 200ms;
}

#to-hover {
  margin-top: 1em;
  text-align: center;
  -webkit-transition: ease-out 200ms;
  transition: ease-out 200ms;
}

#tag {
  opacity: 0;
  color: rgb(43, 43, 43);
  position: absolute;
}

#platform {
  position: absolute;
  width: 70%;
  height: 0;
  border-radius: 16px;
  background-color: rgb(234, 234, 234);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 150ms;
  transition-delay: 150ms;
  border: solid 0px rgba(42, 42, 42, 0);
  outline: dashed rgba(255, 173, 57, 0);
  -moz-outline-radius: 16px;
  outline-width: 0px;
  outline-offset: 0px;
}

#clickHandler:hover ~ #button #platform {
  height: 70%;
  background: rgb(244, 244, 244);
  border: solid 4px rgb(42, 42, 42);
  outline: dashed rgb(255, 172, 57);
  outline-width: 4px;
  outline-offset: -4px;
  -webkit-animation: shake_010 80ms infinite;
  animation: shake_010 80ms infinite;
}

.caution {
  -webkit-transform: translateY(-200);
  -ms-transform: translateY(-200);
  transform: translateY(-200);
  position: absolute;
  width: 100%;
  text-align: center;
}

#checkbox:checked ~ .caution {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#caution-left {
  -webkit-transition: 200ms ease;
  transition: 200ms ease;
  opacity: 0;
  -webkit-transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(
      -90deg
    );
  transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(
      -90deg
    );
}

#caution-right {
  -webkit-transition: 200ms ease;
  transition: 200ms ease;
  opacity: 0;
  -webkit-transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(
      0deg
    );
  transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(
      0deg
    );
}

#clickHandler:hover ~ #button .caution #caution-left {
  opacity: 1;
  -webkit-transition: 400ms ease-in;
  transition: 400ms ease-in;
  animation: glow_010 1.2s infinite;
}

#clickHandler:hover ~ #button .caution #caution-right {
  opacity: 1;
  -webkit-transition: 400ms ease-in;
  transition: 400ms ease-in;
  animation: glow_010 1.2s infinite;
}

#button {
  width: 200px;
  height: 80px;
  border: none;
  border-radius: 1.8rem;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
  box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ffffff),
    to(#ececec)
  );
  background: linear-gradient(125deg, #ffffff 50%, #f5f5ff);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: inherit;
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}

#clickHandler:hover ~ #button #to-launch {
  opacity: 0;
}

#clickHandler:hover ~ #to-hover {
  opacity: 0;
}

#checkbox:checked ~ #button #tag {
  -webkit-animation: tag-transition 5s ease-in-out;
  animation: tag-transition 5s ease-in-out;
}

/* launch sequence, takes only 20% of duration to completely fade out,
	 and stays there til 90% */

@keyframes launch {
  5% {
    opacity: 1;
  }

  15%,
  90% {
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shadow-launch {
  0% {
    opacity: 1;
  }

  10%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout_010 {
  100% {
    opacity: 1;
  }

  0%,
  20%,
  90% {
    opacity: 0;
  }
}

@keyframes shake_010 {
  0%,
  50% {
    -webkit-transform: translate3d(1px, 0px, 0px);
    transform: translate3d(1px, 0px, 0px);
  }

  100% {
    -webkit-transform: translate3d(0px, 1px, 0px);
    transform: translate3d(0px, 1px, 0px);
  }
}

@keyframes glow_010 {
  0% {
    color: rgb(94, 94, 94);
    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
  }

  70% {
    color: rgba(255, 255, 255, 0);
  }

  100% {
    color: rgb(94, 94, 94);
    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
  }
}

@keyframes tag-transition {
  0%,
  100% {
    opacity: 0;
  }

  20%,
  80% {
    opacity: 1;
  }
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}
<div class="container noselect">
  <label id="clickHandler" for="checkbox"></label>
  <input id="checkbox" type="checkbox" />

  <button id="button">
    <p id="to-launch">let's launch!</p>
    <p id="tag">by kennyotsu &lt;3</p>
    <div id="platform"></div>
    <div class="caution">
      <div id="caution-left">LAUNCH ZONE</div>
      <div id="caution-right">LAUNCH ZONE</div>
    </div>
  </button>

  <p id="to-hover">hover me</p>
  <div id="shuttle-wrapper">
    <div id="shadow"></div>
    <svg
      id="b"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 230.24 542.46"
    >
      <defs>
        <linearGradient
          id="d"
          x1="-130.63"
          y1="545.09"
          x2="-104.11"
          y2="549.77"
          gradientTransform="translate(160.35 -471.85) rotate(-7.06) scale(1.56 1.68)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#c6c6c6"></stop>
          <stop offset="0" stop-color="#b1b1b1"></stop>
          <stop offset=".02" stop-color="#858585"></stop>
          <stop offset=".04" stop-color="#606060"></stop>
          <stop offset=".05" stop-color="#424242"></stop>
          <stop offset=".07" stop-color="#2a2a2a"></stop>
          <stop offset=".09" stop-color="#191919"></stop>
          <stop offset=".1" stop-color="#101010"></stop>
          <stop offset=".13" stop-color="#0d0d0d"></stop>
          <stop offset=".31" stop-color="#454545"></stop>
          <stop offset=".33" stop-color="#4c4c4c"></stop>
          <stop offset=".35" stop-color="#484848"></stop>
          <stop offset=".52" stop-color="#2b2c2b"></stop>
          <stop offset=".68" stop-color="#171817"></stop>
          <stop offset=".84" stop-color="#0b0c0b"></stop>
          <stop offset="1" stop-color="#070807"></stop>
        </linearGradient>
        <linearGradient
          id="e"
          x1="70.56"
          y1="475.4"
          x2="113.37"
          y2="479.08"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset=".32" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset=".38" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset="1" stop-color="#b3511b" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient
          id="f"
          x1="65.74"
          y1="269.31"
          x2="123.89"
          y2="270.33"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#e5e5e5"></stop>
          <stop offset=".63" stop-color="#e3e3e3"></stop>
          <stop offset=".85" stop-color="#dcdcdc"></stop>
          <stop offset="1" stop-color="#d3d2d3"></stop>
        </linearGradient>
        <linearGradient
          id="g"
          x1="70.84"
          y1="114.99"
          x2="112.45"
          y2="114.99"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#1a1a1a"></stop>
          <stop offset=".05" stop-color="#2a2a2a"></stop>
          <stop offset=".15" stop-color="#434343"></stop>
          <stop offset=".2" stop-color="#4d4d4d"></stop>
          <stop offset=".3" stop-color="#474747"></stop>
          <stop offset=".69" stop-color="#383838"></stop>
          <stop offset="1" stop-color="#333"></stop>
        </linearGradient>
        <linearGradient
          id="h"
          x1="70.84"
          y1="142.07"
          x2="112.45"
          y2="142.07"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="i"
          x1="70.84"
          y1="178.73"
          x2="112.45"
          y2="178.73"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="j"
          x1="70.84"
          y1="254.03"
          x2="112.45"
          y2="254.03"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="k"
          x1="70.84"
          y1="329.25"
          x2="112.45"
          y2="329.25"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="l"
          x1="70.84"
          y1="386.88"
          x2="112.45"
          y2="386.88"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="m"
          x1="70.84"
          y1="407.2"
          x2="112.45"
          y2="407.2"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="n"
          x1="70.84"
          y1="414.79"
          x2="112.45"
          y2="414.79"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="o"
          x1="70.84"
          y1="423.88"
          x2="112.45"
          y2="423.88"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="p"
          x1="70.84"
          y1="435.68"
          x2="112.45"
          y2="435.68"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="q"
          x1="70.84"
          y1="446.33"
          x2="112.45"
          y2="446.33"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="r"
          x1="70.67"
          y1="280.59"
          x2="112.45"
          y2="280.59"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset=".14" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset=".19" stop-color="#fff" stop-opacity=".03"></stop>
          <stop offset=".23" stop-color="#fff" stop-opacity=".08"></stop>
          <stop offset=".25" stop-color="#fff" stop-opacity=".15"></stop>
          <stop offset=".28" stop-color="#fff" stop-opacity=".23"></stop>
          <stop offset=".3" stop-color="#fff" stop-opacity=".34"></stop>
          <stop offset=".32" stop-color="#fff" stop-opacity=".47"></stop>
          <stop offset=".34" stop-color="#fff" stop-opacity=".61"></stop>
          <stop offset=".36" stop-color="#fff" stop-opacity=".78"></stop>
          <stop offset=".36" stop-color="#fff" stop-opacity=".8"></stop>
          <stop offset=".38" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset="1" stop-color="#b3511b" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient
          id="s"
          x1="63.17"
          y1="455.38"
          x2="120.43"
          y2="464.45"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset=".15" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset=".2" stop-color="#fff" stop-opacity=".03"></stop>
          <stop offset=".24" stop-color="#fff" stop-opacity=".08"></stop>
          <stop offset=".27" stop-color="#fff" stop-opacity=".15"></stop>
          <stop offset=".29" stop-color="#fff" stop-opacity=".23"></stop>
          <stop offset=".32" stop-color="#fff" stop-opacity=".34"></stop>
          <stop offset=".34" stop-color="#fff" stop-opacity=".47"></stop>
          <stop offset=".36" stop-color="#fff" stop-opacity=".61"></stop>
          <stop offset=".38" stop-color="#fff" stop-opacity=".78"></stop>
          <stop offset=".38" stop-color="#fff" stop-opacity=".8"></stop>
          <stop offset=".39" stop-color="#fff" stop-opacity="0"></stop>
          <stop offset=".72" stop-color="#d3d3d3"></stop>
          <stop offset="1" stop-color="#d2d1d2"></stop>
        </linearGradient>
        <linearGradient
          id="t"
          x1="72.87"
          y1="87.78"
          x2="115.35"
          y2="91.43"
          xlink:href="#r"
        ></linearGradient>
        <linearGradient
          id="v"
          x1="102.87"
          y1="217.5"
          x2="194.16"
          y2="217.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#d68029"></stop>
          <stop offset="1" stop-color="#b3511b"></stop>
        </linearGradient>
        <linearGradient
          id="w"
          x1="134.44"
          y1="23.53"
          x2="158.77"
          y2="404.51"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".02" stop-color="#dd884e" stop-opacity=".4"></stop>
          <stop offset=".42" stop-color="#b76031" stop-opacity=".67"></stop>
          <stop offset="1" stop-color="#882e0d"></stop>
        </linearGradient>
        <linearGradient
          id="x"
          x1="102.66"
          y1="162"
          x2="194.16"
          y2="162"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#d8823a"></stop>
          <stop offset="1" stop-color="#bf611e"></stop>
        </linearGradient>
        <radialGradient
          id="y"
          cx="122.52"
          cy="64.81"
          fx="60.36"
          fy="71.95"
          r="134.05"
          gradientTransform="translate(119.12 192.29) rotate(-104.58) scale(1 .55)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".72" stop-color="#dd884e" stop-opacity="0"></stop>
          <stop offset="1" stop-color="#ed9654"></stop>
        </radialGradient>
        <radialGradient
          id="z"
          cx="130.39"
          cy="65.62"
          fx="68.57"
          fy="72.72"
          r="133.29"
          gradientTransform="translate(176.37 200.83) rotate(-75.42) scale(1 -.55)"
          xlink:href="#y"
        ></radialGradient>
        <linearGradient
          id="aa"
          x1="161.35"
          y1="438.65"
          x2="142.83"
          y2="217.56"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#a52c14"></stop>
          <stop offset=".19" stop-color="#a53014" stop-opacity=".84"></stop>
          <stop offset=".59" stop-color="#a73b14" stop-opacity=".44"></stop>
          <stop offset="1" stop-color="#aa4814" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient
          id="ab"
          x1="-43.8"
          y1="284.22"
          x2="-7.1"
          y2="285.84"
          gradientTransform="translate(189.08 .72) rotate(.18) scale(1.34 1)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#e65900" stop-opacity="0"></stop>
          <stop offset=".13" stop-color="#e45800" stop-opacity=".03"></stop>
          <stop offset=".29" stop-color="#de5502" stop-opacity=".12"></stop>
          <stop offset=".46" stop-color="#d55104" stop-opacity=".27"></stop>
          <stop offset=".65" stop-color="#c84b08" stop-opacity=".48"></stop>
          <stop offset=".84" stop-color="#b7430c" stop-opacity=".75"></stop>
          <stop offset="1" stop-color="#a83c11"></stop>
        </linearGradient>
        <linearGradient
          id="ac"
          x1="-65.46"
          y1="586.55"
          x2="-38.94"
          y2="591.23"
          xlink:href="#d"
        ></linearGradient>
        <linearGradient
          id="ad"
          x1="180.14"
          y1="532.12"
          x2="222.95"
          y2="535.79"
          xlink:href="#e"
        ></linearGradient>
        <linearGradient
          id="ae"
          x1="175.32"
          y1="326.03"
          x2="233.47"
          y2="327.04"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#e5e5e5"></stop>
          <stop offset=".04" stop-color="#e5e5e5"></stop>
          <stop offset=".05" stop-color="#e5e5e5"></stop>
          <stop offset=".63" stop-color="#e3e3e3"></stop>
          <stop offset=".86" stop-color="#dcdcdc"></stop>
          <stop offset="1" stop-color="#d3d2d3"></stop>
        </linearGradient>
        <linearGradient
          id="af"
          x1="180.42"
          y1="463.91"
          x2="222.03"
          y2="463.91"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="ag"
          x1="180.42"
          y1="471.51"
          x2="222.03"
          y2="471.51"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="ah"
          x1="180.42"
          y1="480.59"
          x2="222.03"
          y2="480.59"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="ai"
          x1="180.42"
          y1="492.4"
          x2="222.03"
          y2="492.4"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="aj"
          x1="180.43"
          y1="385.97"
          x2="222.04"
          y2="385.97"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#d45300"></stop>
          <stop offset="0" stop-color="#d35200"></stop>
          <stop offset=".07" stop-color="#995021"></stop>
          <stop offset=".13" stop-color="#704e38"></stop>
          <stop offset=".18" stop-color="#564d47"></stop>
          <stop offset=".2" stop-color="#4d4d4d"></stop>
          <stop offset=".3" stop-color="#474747"></stop>
          <stop offset=".69" stop-color="#383838"></stop>
          <stop offset="1" stop-color="#333"></stop>
        </linearGradient>
        <linearGradient
          id="ak"
          y1="443.6"
          y2="443.6"
          xlink:href="#aj"
        ></linearGradient>
        <linearGradient
          id="al"
          y1="310.75"
          y2="310.75"
          xlink:href="#aj"
        ></linearGradient>
        <linearGradient
          id="am"
          y1="235.44"
          y2="235.44"
          xlink:href="#aj"
        ></linearGradient>
        <linearGradient
          id="an"
          y1="198.78"
          y2="198.78"
          xlink:href="#aj"
        ></linearGradient>
        <linearGradient
          id="ao"
          y1="171.7"
          y2="171.7"
          xlink:href="#aj"
        ></linearGradient>
        <linearGradient
          id="ap"
          x1="180.42"
          y1="503.1"
          x2="222.03"
          y2="503.1"
          xlink:href="#g"
        ></linearGradient>
        <linearGradient
          id="aq"
          x1="180.25"
          y1="337.31"
          x2="222.03"
          y2="337.31"
          xlink:href="#r"
        ></linearGradient>
        <linearGradient
          id="ar"
          x1="172.75"
          y1="512.1"
          x2="230.01"
          y2="521.17"
          xlink:href="#s"
        ></linearGradient>
        <linearGradient
          id="as"
          x1="182.45"
          y1="144.49"
          x2="224.93"
          y2="148.14"
          xlink:href="#r"
        ></linearGradient>
        <linearGradient
          id="at"
          x1="33.58"
          y1="414.65"
          x2="68.43"
          y2="424"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#e8e8e8"></stop>
          <stop offset=".02" stop-color="#f2f2f2"></stop>
          <stop offset=".04" stop-color="#fafafa"></stop>
          <stop offset=".09" stop-color="#fdfdfd"></stop>
          <stop offset=".18" stop-color="#ededed"></stop>
          <stop offset=".38" stop-color="#d3d3d3"></stop>
          <stop offset=".58" stop-color="silver"></stop>
          <stop offset=".78" stop-color="#b5b5b5"></stop>
          <stop offset="1" stop-color="#b2b2b2"></stop>
        </linearGradient>
        <linearGradient
          id="au"
          x1="84.78"
          y1="461.9"
          x2="111.3"
          y2="466.58"
          gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
          xlink:href="#d"
        ></linearGradient>
        <linearGradient
          id="av"
          x1="49.55"
          y1="459.96"
          x2="78.06"
          y2="464.99"
          gradientTransform="translate(108.68 -1.95) rotate(13.28)"
          xlink:href="#d"
        ></linearGradient>
        <linearGradient
          id="aw"
          x1="70.1"
          y1="465.78"
          x2="84.28"
          y2="468.28"
          gradientTransform="translate(37.21 -2.14) rotate(4.64)"
          xlink:href="#d"
        ></linearGradient>
        <linearGradient
          id="ax"
          x1="17.4"
          y1="317.69"
          x2="185.62"
          y2="317.69"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#d5d5d5"></stop>
          <stop offset="1" stop-color="#d1d1d1"></stop>
        </linearGradient>
        <filter id="ay" filterUnits="userSpaceOnUse">
          <feOffset dx="13" dy="-6"></feOffset>
          <feGaussianBlur result="az" stdDeviation="6"></feGaussianBlur>
          <feFlood flood-color="#333" flood-opacity=".3"></feFlood>
          <feComposite in2="az" operator="in"></feComposite>
          <feComposite in="SourceGraphic"></feComposite>
        </filter>
        <linearGradient
          id="ba"
          x1="52.2"
          y1="302.93"
          x2="131.64"
          y2="307.1"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff"></stop>
          <stop offset=".06" stop-color="#f9f9f9"></stop>
          <stop offset=".18" stop-color="#f5f5f5"></stop>
          <stop offset=".37" stop-color="#c7c7c7"></stop>
          <stop offset=".55" stop-color="#c3c3c3"></stop>
          <stop offset=".7" stop-color="#b9b9b9"></stop>
          <stop offset=".75" stop-color="#b4b4b4"></stop>
          <stop offset=".94" stop-color="#d3d3d3"></stop>
        </linearGradient>
        <linearGradient
          id="bb"
          x1="89.33"
          y1="180.46"
          x2="88.01"
          y2="427.46"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff"></stop>
          <stop offset=".07" stop-color="#f7f8f8" stop-opacity=".85"></stop>
          <stop offset=".16" stop-color="#eeefef" stop-opacity=".65"></stop>
          <stop offset=".26" stop-color="#e5e7e7" stop-opacity=".48"></stop>
          <stop offset=".37" stop-color="#dee0e1" stop-opacity=".33"></stop>
          <stop offset=".47" stop-color="#d9dbdc" stop-opacity=".21"></stop>
          <stop offset=".58" stop-color="#d4d7d8" stop-opacity=".12"></stop>
          <stop offset=".7" stop-color="#d1d4d5" stop-opacity=".05"></stop>
          <stop offset=".83" stop-color="#cfd2d3" stop-opacity=".01"></stop>
          <stop offset="1" stop-color="#cfd2d3" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient
          id="bc"
          x1="-.05"
          y1="523.99"
          x2="69.93"
          y2="413.58"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#b8b7b7"></stop>
          <stop offset=".4" stop-color="#d1d0d0"></stop>
          <stop offset="1" stop-color="#fff"></stop>
        </linearGradient>
        <linearGradient
          id="bd"
          x1="19.81"
          y1="505.35"
          x2="44.69"
          y2="466.09"
          xlink:href="#bc"
        ></linearGradient>
        <radialGradient
          id="be"
          cx="66.91"
          cy="217.89"
          fx="66.91"
          fy="217.89"
          r="39.33"
          gradientTransform="translate(261.63 273.14) rotate(125.14) scale(1 .88)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#565656"></stop>
          <stop offset=".1" stop-color="#484848"></stop>
          <stop offset=".3" stop-color="#323232"></stop>
          <stop offset=".42" stop-color="#2b2b2b"></stop>
          <stop offset=".51" stop-color="#2b2b2b"></stop>
          <stop offset="1" stop-color="#2b2b2b"></stop>
        </radialGradient>
        <linearGradient
          id="bf"
          x1="129.28"
          y1="374.95"
          x2="126.25"
          y2="380.41"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff"></stop>
          <stop offset=".27" stop-color="#fff"></stop>
          <stop offset=".32" stop-color="#fff"></stop>
          <stop offset=".33" stop-color="#fdfdfe"></stop>
          <stop offset=".33" stop-color="#f6f8fd"></stop>
          <stop offset=".33" stop-color="#eaeffc"></stop>
          <stop offset=".33" stop-color="#d9e3f9"></stop>
          <stop offset=".34" stop-color="#c2d2f6"></stop>
          <stop offset=".34" stop-color="#a7bef3"></stop>
          <stop offset=".34" stop-color="#86a6ee"></stop>
          <stop offset=".34" stop-color="#628ae9"></stop>
          <stop offset=".34" stop-color="#386ce4"></stop>
          <stop offset=".34" stop-color="#376be4"></stop>
          <stop offset=".68" stop-color="#3d6ade"></stop>
          <stop offset=".69" stop-color="#dd4f38"></stop>
          <stop offset="1" stop-color="#ff4915"></stop>
        </linearGradient>
        <linearGradient
          id="bg"
          x1="65.52"
          y1="437.49"
          x2="97.61"
          y2="440.89"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#e8e8e8"></stop>
          <stop offset=".05" stop-color="#f2f2f2"></stop>
          <stop offset=".13" stop-color="#fafafa"></stop>
          <stop offset=".27" stop-color="#fdfdfd"></stop>
          <stop offset=".36" stop-color="#f2f2f2"></stop>
          <stop offset=".78" stop-color="#c3c3c3"></stop>
          <stop offset="1" stop-color="#b2b2b2"></stop>
        </linearGradient>
        <linearGradient
          id="bh"
          x1="77.37"
          y1="176.68"
          x2="136.86"
          y2="198.33"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#0e0a09"></stop>
          <stop offset="0" stop-color="#0e0a09"></stop>
          <stop offset=".08" stop-color="#2a2828"></stop>
          <stop offset=".14" stop-color="#3b3b3b"></stop>
          <stop offset=".19" stop-color="#424242"></stop>
          <stop offset=".26" stop-color="#303030"></stop>
          <stop offset=".37" stop-color="#090909"></stop>
          <stop offset=".53" stop-color="#0c0b09"></stop>
          <stop offset=".66" stop-color="#16110c"></stop>
          <stop offset=".78" stop-color="#261c11"></stop>
          <stop offset=".89" stop-color="#3e2b18"></stop>
          <stop offset=".99" stop-color="#5c3f21"></stop>
          <stop offset="1" stop-color="#604122"></stop>
        </linearGradient>
        <linearGradient
          id="bi"
          x1="79.7"
          y1="411.38"
          x2="81.11"
          y2="443.62"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stop-color="#fff" stop-opacity=".5"></stop>
          <stop offset=".07" stop-color="#fefefe" stop-opacity=".38"></stop>
          <stop offset=".17" stop-color="#fefefe" stop-opacity=".27"></stop>
          <stop offset=".27" stop-color="#fdfdfd" stop-opacity=".17"></stop>
          <stop offset=".38" stop-color="#fdfdfd" stop-opacity=".09"></stop>
          <stop offset=".52" stop-color="#fdfdfd" stop-opacity=".04"></stop>
          <stop offset=".68" stop-color="#fdfdfd" stop-opacity="0"></stop>
          <stop offset="1" stop-color="#fdfdfd" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient
          id="bj"
          x1="94.5"
          y1="162.16"
          x2="91.3"
          y2="170.77"
          gradientTransform="translate(-8.09 4.61) rotate(-2.79)"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset=".13" stop-color="#3f3f3f"></stop>
          <stop offset="1" stop-color="#090909"></stop>
        </linearGradient>
        <linearGradient
          id="bk"
          x1="89.54"
          y1="164.53"
          x2="86.96"
          y2="171.47"
          gradientTransform="translate(31.76 -5.44) rotate(5.03) scale(.81 1)"
          xlink:href="#bj"
        ></linearGradient>
        <linearGradient
          id="bl"
          x1="96.87"
          y1="166.02"
          x2="94.31"
          y2="172.9"
          gradientTransform="translate(-16.29 4.64) rotate(-2.49) scale(1.1 1)"
          xlink:href="#bj"
        ></linearGradient>
      </defs>
      <g id="c">
        <g>
          <path
            d="M103.28,444.18l8.98,31.12s-3.3,10.51-20.97,10.46c-17.68-.05-21.18-10.93-21.18-10.93l9.38-29.9,23.8-.74Z"
            style="fill:url(#d);"
          ></path>
          <path
            d="M91.32,474.9c16.6,0,20.97-4.48,20.97-4.48v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,4.48,20.64,4.48Z"
            style="fill:url(#e);"
          ></path>
          <path
            d="M70.84,127.87s-.02-17.57,0-20.15,14.01-38.61,16.18-44.26,6.7-5.39,8.75,0,16.68,41.99,16.68,43.93-.04,330.65,0,333.41,8.09,17.79,8.09,19.32,1.69,20.06-29.06,20.06-29.06-18.5-29.06-20.06,8.13-16.64,8.26-19.32,.17-312.94,.17-312.94Z"
            style="fill:url(#f);"
          ></path>
          <g>
            <path
              d="M91.48,119.36c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#g);"
            ></path>
            <path
              d="M91.48,146.44c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#h);"
            ></path>
            <path
              d="M91.48,183.1c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#i);"
            ></path>
            <path
              d="M91.48,258.41c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#j);"
            ></path>
            <path
              d="M91.48,333.63c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#k);"
            ></path>
            <path
              d="M91.48,391.26c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#l);"
            ></path>
            <path
              d="M91.48,411.57c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#m);"
            ></path>
            <path
              d="M91.48,419.17c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#n);"
            ></path>
            <path
              d="M91.48,428.25c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#o);"
            ></path>
            <path
              d="M91.48,440.06c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#p);"
            ></path>
            <path
              d="M91.48,450.71c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#q);"
            ></path>
          </g>
          <path
            d="M70.84,127.87s-.02-17.57,0-20.15c.01-1.29,2.64,11.56,20.81,11.56s20.81-12.86,20.81-11.89c0,1.94-.04,330.65,0,333.41,.02,1.36-3.06,13.05-20.97,13.05s-20.87-11.69-20.81-13.05c.12-2.68,.17-312.94,.17-312.94Z"
            style="fill:url(#r);"
          ></path>
          <path
            d="M91.48,480.19c32.61,0,29.06-20.06,29.06-20.06l-8.1-18.08s-2.39,11.81-20.97,11.81-20.81-13.05-20.81-13.05l-8.26,19.32s-3.55,20.06,29.06,20.06Z"
            style="fill:url(#s);"
          ></path>
          <path
            d="M70.84,107.72s4.18,11.56,20.81,11.56,20.81-11.89,20.81-11.89c0,0-14.86-40.33-17.12-44.93s-6.38-3.6-7.87,0-16.63,45.27-16.63,45.27Z"
            style="fill:url(#t);"
          ></path>
        </g>
        <g id="u">
          <path
            d="M131.16,17c2.99-4.19,17-17,18-17s12.08,8.58,17.78,17c14.22,21,27.22,38,27.22,62V411c0,33-92,31-91,0s-1-299,0-329,23-58,28-65Z"
            style="fill:url(#v);"
          ></path>
          <path
            d="M131.05,17c2.99-4.19,17-17,18-17s12.08,8.58,17.78,17c14.22,21,27.22,38,27.22,62V411c0,33-92,31-91,0s-1-299,0-329,23-58,28-65Z"
            style="fill:url(#w); opacity:.22;"
          ></path>
          <path
            d="M102.66,117.5s6,24,45.5,24,46-24,46-24l-.5,74s-12.5,15-45,15-46-15-46-15V117.5Z"
            style="fill:url(#x);"
          ></path>
          <path
            d="M149.05,0s9.4,5.19,17.78,17,27.22,35.73,27.22,62,.11,38.5,.11,38.5c0,0-1.15,6.16-9.28,12.79-6.39,5.2-16.71,11.21-36.72,11.21-45.5,0,.89-141.5,.89-141.5Z"
            style="fill:url(#y);"
          ></path>
          <path
            d="M147.97,1.5s-9.4,5.19-17.78,17c-8.38,11.81-27.22,35.73-27.22,62,0,26.27-.11,38.5-.11,38.5,0,0,1.84,8.63,15.38,15.74,6.82,3.58,15.4,6.75,30.63,6.75,45.5,0-.9-140-.9-140Z"
            style="fill:url(#z);"
          ></path>
          <path
            d="M105.66,209.83l-2.46,202.5s.23,32.96,46.76,33.93c43.35,.91,46.66-21.97,46.66-21.97l.11-231.42-91.07,16.96Z"
            style="fill:url(#aa);"
          ></path>
          <path
            d="M193.63,138.78s-2.38,275.86-2.31,278.63c.03,1.35-9.7,16.7-33.71,16.62s-33.8-23.73-33.71-25.09c.14-2.12-14.71-164.59,11.97-234.48,7.01-18.36,41.9,7.85,57.76-35.68Z"
            style="fill:url(#ab);"
          ></path>
        </g>
        <g>
          <path
            d="M212.86,500.89l8.98,31.12s-3.3,10.51-20.97,10.46c-17.68-.05-21.18-10.93-21.18-10.93l9.38-29.9,23.8-.74Z"
            style="fill:url(#ac);"
          ></path>
          <path
            d="M200.9,531.62c16.6,0,20.97-4.48,20.97-4.48v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,4.48,20.64,4.48Z"
            style="fill:url(#ad);"
          ></path>
          <path
            d="M180.42,184.58s-.02-17.57,0-20.15,14.01-38.61,16.18-44.26,6.7-5.39,8.75,0c2.05,5.39,16.68,41.99,16.68,43.93s-.04,330.65,0,333.41,8.09,17.79,8.09,19.32,1.69,20.06-29.06,20.06-29.06-18.5-29.06-20.06,8.13-16.64,8.26-19.32,.17-312.94,.17-312.94Z"
            style="fill:url(#ae);"
          ></path>
          <g>
            <path
              d="M201.06,468.29c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#af);"
            ></path>
            <path
              d="M201.06,475.89c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#ag);"
            ></path>
            <path
              d="M201.06,484.97c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#ah);"
            ></path>
            <path
              d="M201.06,496.78c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#ai);"
            ></path>
            <path
              d="M201.07,390.34c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#aj);"
            ></path>
            <path
              d="M201.07,447.98c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#ak);"
            ></path>
            <path
              d="M201.07,315.12c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#al);"
            ></path>
            <path
              d="M201.07,239.82c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#am);"
            ></path>
            <path
              d="M201.07,203.16c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#an);"
            ></path>
            <path
              d="M201.07,176.08c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#ao);"
            ></path>
            <path
              d="M201.06,507.47c16.6,0,20.97-11.97,20.97-11.97v3.39s-3.88,11.81-20.97,11.81-20.64-11.23-20.64-11.23v-3.96s4.05,11.97,20.64,11.97Z"
              style="fill:url(#ap);"
            ></path>
          </g>
          <path
            d="M180.42,184.58s-.02-17.57,0-20.15c.01-1.29,2.64,11.56,20.81,11.56s20.81-12.86,20.81-11.89c0,1.94-.04,330.65,0,333.41,.02,1.36-3.06,13.05-20.97,13.05s-20.87-11.69-20.81-13.05c.12-2.68,.17-312.94,.17-312.94Z"
            style="fill:url(#aq);"
          ></path>
          <path
            d="M201.06,536.9c32.61,0,29.06-20.06,29.06-20.06l-8.1-18.08s-2.39,11.81-20.97,11.81-20.81-13.05-20.81-13.05l-8.26,19.32s-3.55,20.06,29.06,20.06Z"
            style="fill:url(#ar);"
          ></path>
          <path
            d="M180.42,164.44s4.18,11.56,20.81,11.56,20.81-11.89,20.81-11.89c0,0-14.86-40.33-17.12-44.93s-6.38-3.6-7.87,0-16.63,45.27-16.63,45.27Z"
            style="fill:url(#as);"
          ></path>
        </g>
        <g>
          <path
            d="M32.69,439.07c-.14,2.86-2.97,10.79,15.3,12.66,17.94,1.43,19.6-8.7,19.6-8.7,0,0,3.28-21.39,3.85-27.96,.39-4.44-.33-10.13-1.07-16.32-.71-2.13-18.48-13.36-19.51-13.29-7.93,.55-10.9,6.5-12.66,10.9-1.45,3.62-5.38,39.85-5.51,42.72Z"
            style="fill:url(#at);"
          ></path>
          <path
            d="M106.84,454.41l3.26,19.01s-2.53,3.14-13.76,1.82-12.99-5.17-12.99-5.17l8.31-16.95,15.18,1.3Z"
            style="fill:url(#au);"
          ></path>
          <path
            d="M76.16,454.7l-1.28,20.7s-3.42,2.66-14.85-1.5-12.31-8.62-12.31-8.62l12.88-15.68,15.56,5.11Z"
            style="fill:url(#av);"
          ></path>
          <path
            d="M81.49,464.75l.92,10.27s-1.48,1.56-7.41,.37c-5.93-1.19-6.7-3.32-6.7-3.32l5.16-8.67,8.03,1.35Z"
            style="fill:url(#aw);"
          ></path>
          <path
            d="M185.62,458.89l-94.24-40.73L18.5,351.66l-1.1-9.25,5.94-20.7,39.85-24,17.39-81.03s3.55-39.08,22.06-40.18,23.1,49.89,23.1,49.89l14.51,118.44,40.51,77.5,4.84,24.44v12.11Z"
            style="fill:url(#ax); filter:url(#ay); stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:2px;"
          ></path>
          <line
            x1="183.2"
            y1="448.76"
            x2="126.39"
            y2="426.74"
            style="fill:none; stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:.75px;"
          ></line>
          <line
            x1="51.09"
            y1="368.13"
            x2="17.4"
            y2="342.41"
            style="fill:none; stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:.75px;"
          ></line>
          <text
            transform="translate(27.32 341.67) rotate(34.86) scale(1.05 .83) skewX(27.74)"
            style="fill:#333; font-size:12.27px;"
          >
            <tspan
              x="0"
              y="0"
              style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700; letter-spacing:0em;"
            >
              U
            </tspan>
            <tspan
              x="7.92"
              y="0"
              style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700;"
            >
              I
            </tspan>
            <tspan
              x="11.3"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;"
            >
              V
            </tspan>
            <tspan
              x="18.56"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;"
            >
              E
            </tspan>
            <tspan
              x="25.89"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:-.02em;"
            >
              R
            </tspan>
            <tspan
              x="33.65"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;"
            >
              S
            </tspan>
            <tspan
              x="41.08"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;"
            >
              E
            </tspan>
          </text>
          <path
            d="M123.31,450.69s-12.22,5.01-20.31,5.45-27.69-1.87-36.99-3.63-18.17-7.27-18.17-7.27l-1.49-30.72,2.31-34.68s6.39-114.92,6.88-121.36,.41-18.29,1.21-25.12,8.31-31.4,9.06-32.72,3.66-3.44,3.66-3.44l9.08-22.79s1.32-1.93,7.27-9.41c3.07-3.87,8.37-10.11,13.21-10.4,4.52-.27,8.82,5.09,10.4,7.6,2.52,4,3.28,5.35,4.36,7.99s11.06,32.96,11.99,43.03,4.46,120.55,4.46,120.55l-6.94,116.92Z"
            style="fill:url(#ba);"
          ></path>
          <path
            d="M123.31,450.69s-12.22,5.01-20.31,5.45c-8.09,.44-27.69-1.87-36.99-3.63s-18.17-7.27-18.17-7.27l-1.49-30.72,2.31-34.68s6.39-114.92,6.88-121.36,.41-18.29,1.21-25.12,8.31-31.4,9.06-32.72,3.66-3.44,3.66-3.44l9.08-22.79s1.32-1.93,7.27-9.41c3.07-3.87,8.37-10.11,13.21-10.4,4.52-.27,8.82,5.09,10.4,7.6,2.52,4,3.28,5.35,4.36,7.99s11.06,32.96,11.99,43.03,4.46,120.55,4.46,120.55l-6.94,116.92Z"
            style="fill:url(#bb);"
          ></path>
          <polygon
            points="56.81 407.75 49.88 415.51 1.82 501.05 .5 504.69 .5 524.34 51.53 472.32 58.96 448.54 61.77 408.41 56.81 407.75"
            style="fill:url(#bc); stroke:#4c4c4c; stroke-miterlimit:10;"
          ></polygon>
          <polygon
            points="48.05 475.95 51.28 458.33 52.01 454.37 51.64 456.37 14.76 500.65 9.73 506.09 8.49 516.23 9.9 515.12 48.05 475.95"
            style="fill:url(#bd); stroke:#5b5b5b; stroke-miterlimit:10;"
          ></polygon>
          <path
            d="M78.06,232.21c1.17,1.37-.73,7.04,.83,8.64,3.18,3.27,9.84,2.28,9.98,1.98,3.28-6.94,1.14-17.53-1.04-22.1s-7.68-9.41-7.95-9.55-3.12-3.98-3.3-4.07c-.5-.25-3.22,.25-3.22,.25,0,0-7.14,3.92-8.02,4.71-4.79,4.29-6.89,12.07-6.32,11.13,.51-.84,6.87-3.31,10.71-2.96,.76,.07,6.91,10.31,8.34,11.97Z"
            style="fill:url(#be);"
          ></path>
          <path
            d="M78.27,248.23c.82-.21,3.44,1.21,6.65,1.57,4.12,.46,9.01-.06,9.99,.21,3.56,.95,3.3,8.34-.91,10.07-.87,.36-5.26,1-9.29,.7-3.3-.25-6.42-1.71-7.27-2.39-2.57-2.09-1.76-9.49,.83-10.16Z"
            style="fill:none; stroke:#777574; stroke-miterlimit:10; stroke-width:.75px;"
          ></path>
          <text
            transform="translate(121.16 383.28) rotate(28.29) scale(1.26 .89) skewX(19.94)"
            style="fill:#666; font-family:Bahnschrift, Bahnschrift; font-size:5.69px; font-variation-settings:'wght' 400, 'wdth' 100;"
          >
            <tspan x="0" y="0">@ken</tspan>
            <tspan x="14.3" y="0" style="letter-spacing:-.01em;">n</tspan>
            <tspan x="17.4" y="0" style="letter-spacing:0em;">y</tspan>
            <tspan x="20.09" y="0" style="letter-spacing:0em;">otsu</tspan>
          </text>
          <text
            transform="translate(120.21 399.04) rotate(28.29) scale(.98 .89) skewX(24.96)"
            style="fill:#333; font-size:12.31px;"
          >
            <tspan
              x="0"
              y="0"
              style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700; letter-spacing:0em;"
            >
              U
            </tspan>
            <tspan
              x="7.95"
              y="0"
              style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700;"
            >
              I
            </tspan>
            <tspan
              x="11.33"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;"
            >
              V
            </tspan>
            <tspan
              x="18.62"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;"
            >
              E
            </tspan>
            <tspan
              x="25.98"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:-.02em;"
            >
              R
            </tspan>
            <tspan
              x="33.76"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;"
            >
              S
            </tspan>
            <tspan
              x="41.22"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;"
            >
              E
            </tspan>
          </text>
          <polygon
            points="122.02 377.86 133.5 384.43 133.77 377.45 122.02 370.93 122.02 377.86"
            style="fill:url(#bf); opacity:.82;"
          ></polygon>
          <path
            d="M61.77,455.26c-.14,2.86-2.97,10.79,15.3,12.66,17.94,1.43,19.6-8.7,19.6-8.7,0,0,3.28-21.39,3.85-27.96,.39-4.44-.33-10.13-1.07-16.32-.71-2.13-3.14-3.64-4.16-3.45-3.11,.57-17.2,2.93-20.86,4.28s-9.03,9.77-9.03,9.77c0,0-3.5,26.86-3.63,29.72Z"
            style="fill:url(#bg);"
          ></path>
          <path
            d="M99.03,154.6c15.8,0,23.06,42.39,25.97,53.78,.59,3.25,2.05,16.9,2.05,16.9,0,0-16.95-10.91-19.38-28.19s-12.66-23.72-18.17-24.39-13.29,7.56-13.29,7.56c0,0,.61-2.93,2.33-5.85,4.4-7.46,13.63-19.82,20.48-19.82Z"
            style="fill:url(#bh);"
          ></path>
          <text
            transform="translate(112.43 320.11) rotate(-88.85) scale(.98) skewX(13.92)"
            style="fill:#333; font-size:12.31px;"
          >
            <tspan
              x="0"
              y="0"
              style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700; letter-spacing:0em;"
            >
              U
            </tspan>
            <tspan
              x="7.95"
              y="0"
              style="font-family:Bahnschrift-Bold, Bahnschrift; font-variation-settings:'wght' 700, 'wdth' 100; font-weight:700;"
            >
              I
            </tspan>
            <tspan
              x="11.33"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;"
            >
              V
            </tspan>
            <tspan
              x="18.62"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;"
            >
              E
            </tspan>
            <tspan
              x="25.98"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:-.02em;"
            >
              R
            </tspan>
            <tspan
              x="33.76"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100; letter-spacing:0em;"
            >
              S
            </tspan>
            <tspan
              x="41.22"
              y="0"
              style="font-family:Bahnschrift, Bahnschrift; font-variation-settings:'wght' 400, 'wdth' 100;"
            >
              E
            </tspan>
          </text>
          <path
            d="M61.77,455.26c-.14,2.86-2.97,10.79,15.3,12.66,17.94,1.43,19.6-8.7,19.6-8.7,0,0,3.28-21.39,3.85-27.96,.39-4.44-.33-10.13-1.07-16.32-.71-2.13-3.14-3.64-4.16-3.45-3.11,.57-17.2,2.93-20.86,4.28s-9.03,9.77-9.03,9.77c0,0-3.5,26.86-3.63,29.72Z"
            style="fill:url(#bi);"
          ></path>
          <line
            x1="124.42"
            y1="432.01"
            x2="126.39"
            y2="426.74"
            style="fill:#fff; stroke:#2b2b2b; stroke-miterlimit:10; stroke-width:.5px;"
          ></line>
          <path
            d="M91.12,170.73c2.47,.54,5.71-8.54,3.35-8.72s-5.82,8.18-3.35,8.72Z"
            style="fill:url(#bj);"
          ></path>
          <path
            d="M86.98,171.58c1.41,.66,4.25-6.41,2.87-6.77s-4.28,6.1-2.87,6.77Z"
            style="fill:url(#bk);"
          ></path>
          <path
            d="M94.44,172.88c2.08,.44,4.88-6.87,2.88-7.01s-4.96,6.57-2.88,7.01Z"
            style="fill:url(#bl);"
          ></path>
        </g>
      </g>
    </svg>
  </div>
</div>
@ZiYi0414 ZiYi0414 added Button Button 按钮 component labels Dec 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Button Button 按钮 component
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ZiYi0414