API tools faq
paste
Advertisement
Misono

static.svg

Misono
Dec 19th, 2024
16
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
XML 10.91 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--static-->
  2. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900"
  3.    height="100" viewBox="0 -20 900 80" version="1.1">
  4.     <style>
  5.         * {
  6.             margin: 0;
  7.             padding: 0;
  8.             box-sizing: border-box;
  9.             font-family: monospace;
  10.         }
  11.         svg {
  12.             background: #07252D;
  13.         }
  14.         #GlowingTubelight {
  15.             user-select: none;
  16.             position: relative;
  17.             font-size: 2rem;
  18.             color: #0E3742;
  19.             text-transform: uppercase;
  20.             width: 100%;
  21.             text-align: center;
  22.             -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
  23.             line-height: 0.7rem;
  24.             outline: none;
  25.         }
  26.         #GlowingTubelight .is-light {
  27.             animation: animate 1s linear forwards;
  28.         }
  29.         #GlowingTubelight .is-flashing {
  30.             animation: animate 1s linear forwards, animate 8s linear infinite;
  31.         }
  32.  
  33.         @keyframes animate {
  34.             0%,17%,20%,52%,60%,66%,80%,91%,93% {
  35.                 color: #0E3742;
  36.                 text-shadow: none;
  37.             }
  38.             18%,21%,30%,50%,61%,65%,81%,90%,92%,100% {
  39.                 color: #FFFFFF;
  40.                 text-shadow:
  41.                 0 0 10px #03BCF4,
  42.                 0 0 20px #03BCF4,
  43.                 0 0 40px #03BCF4,
  44.                 0 0 80px #03BCF4,
  45.                 0 0 160px #03BCF4;
  46.             }
  47.         }
  48.     </style>
  49.     <g id="GlowingTubelight">
  50.         <text fill="currentColor" x="50" y="30" class="is-light">84% [================>....] ~9,000 / </text>
  51.         <text fill="currentColor" x="630" y="30" class="is-flashing">11,</text>
  52.         <text fill="currentColor" x="680" y="30" class="is-light">323 [EOL]</text>
  53.     </g>
  54. </svg>
  55. <!--progress-->
  56. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="100" viewBox="0 -20 900 80" version="1.1">
  57.     <style>
  58.         * {
  59.             margin: 0;
  60.             padding: 0;
  61.             box-sizing: border-box;
  62.             font-family: monospace;
  63.         }
  64.         svg {
  65.             background: #07252D;
  66.         }
  67.         #GlowingTubelight {
  68.             user-select: none;
  69.             position: relative;
  70.             font-size: 2rem;
  71.             color: #0E3742;
  72.             text-transform: uppercase;
  73.             width: 100%;
  74.             text-align: center;
  75.             -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
  76.             line-height: 0.7rem;
  77.             outline: none;
  78.         }
  79.         #GlowingTubelight .is-light {
  80.             animation: animate 1.3s linear forwards;
  81.         }
  82.         #GlowingTubelight .is-flashing {
  83.             animation: animate 1s linear forwards, animate 4.7s linear infinite;
  84.         }
  85.         @keyframes animate {
  86.             0%,17%,20%,52%,60%,66%,80%,91%,93% {
  87.                 color: #0E3742;
  88.                 text-shadow: none;
  89.             }
  90.             18%,21%,30%,50%,61%,65%,81%,90%,92%,100% {
  91.                 color: #FFFFFF;
  92.                 text-shadow:
  93.                 0 0 10px #03BCF4,
  94.                 0 0 20px #03BCF4,
  95.                 0 0 40px #03BCF4,
  96.                 0 0 80px #03BCF4,
  97.                 0 0 160px #03BCF4;
  98.             }
  99.         }
  100.      </style>
  101.      <g id="GlowingTubelight">
  102.          <text fill="currentColor" x="50" y="30" class="is-light">84% [▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▫▫▫▫] 9,568 / </text>
  103.          <text fill="currentColor" x="590" y="30" class="is-flashing">11,</text>
  104.          <text fill="currentColor" x="640" y="30" class="is-light">322 [EOL]</text>
  105.      </g>
  106.      <style>
  107.         @keyframes particleAnimation {
  108.             0% { transform: translateY(0); opacity: 1; }
  109.             100% { transform: translateY(-100px); opacity: 0; }
  110.         }
  111.         .particleUse {
  112.             color: #FFFFFF;
  113.             text-shadow:
  114.             0 0 10px #03BCF4,
  115.             0 0 20px #03BCF4,
  116.             0 0 40px #03BCF4,
  117.             0 0 80px #03BCF4,
  118.             0 0 160px #03BCF4;
  119.             animation: particleAnimation 1.1s infinite;
  120.         }
  121.     </style>
  122.     <defs>
  123.         <g id="singleDirection">
  124.             <circle cx="0" cy="0" r="10"></circle>
  125.             <circle cx="0" cy="0" r="10" style="animation-delay: 0.1s;"></circle>
  126.             <circle cx="0" cy="0" r="10" style="animation-delay: 0.2s;"></circle>
  127.             <circle cx="0" cy="0" r="10" style="animation-delay: 0.3s;"></circle>
  128.         </g>
  129.         <symbol id="powders" viewBox="0 0 400 400">
  130.             <g transform="rotate(0 200 200)">
  131.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.9667s;"></use>
  132.             </g>
  133.             <g transform="rotate(20 200 200)">
  134.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.8246s;"></use>
  135.             </g>
  136.             <g transform="rotate(40 200 200)">
  137.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.6722s;"></use>
  138.             </g>
  139.             <g transform="rotate(60 200 200)">
  140.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.8796s;"></use>
  141.             </g>
  142.             <g transform="rotate(80 200 200)">
  143.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.5745s;"></use>
  144.             </g>
  145.             <g transform="rotate(100 200 200)">
  146.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.6256s;"></use>
  147.             </g>
  148.             <g transform="rotate(120 200 200)">
  149.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.0754s;"></use>
  150.             </g>
  151.             <g transform="rotate(140 200 200)">
  152.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.5271s;"></use>
  153.             </g>
  154.             <g transform="rotate(160 200 200)">
  155.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.0005s;"></use>
  156.             </g>
  157.             <g transform="rotate(180 200 200)">
  158.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.1288s;"></use>
  159.             </g>
  160.             <g transform="rotate(200 200 200)">
  161.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.0237s;"></use>
  162.             </g>
  163.             <g transform="rotate(220 200 200)">
  164.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.4631s;"></use>
  165.             </g>
  166.             <g transform="rotate(240 200 200)">
  167.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.0476s;"></use>
  168.             </g>
  169.             <g transform="rotate(260 200 200)">
  170.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 1.0058s;"></use>
  171.             </g>
  172.             <g transform="rotate(280 200 200)">
  173.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.2613s;"></use>
  174.             </g>
  175.             <g transform="rotate(300 200 200)">
  176.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.3519s;"></use>
  177.             </g>
  178.             <g transform="rotate(320 200 200)">
  179.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 1.0014s;"></use>
  180.             </g>
  181.             <g transform="rotate(340 200 200)">
  182.                 <use fill="currentColor" class="particleUse" xlink:href="#singleDirection" x="200" y="200" style="animation-delay: 0.2534s;"></use>
  183.             </g>
  184.         </symbol>
  185.     </defs>
  186.     <use xlink:href="#powders" x="-355" y="-34" transform="scale(4)"></use>
  187. </svg>
  188. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="690" height="250" viewBox="0 -20 900 80" version="1.1">
  189.     <style>
  190.         @font-face {
  191.             font-family: "Ubuntu Mono";
  192.             src: url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@1,700&amp;display=swap");
  193.         }
  194.         * {
  195.             margin: 0;
  196.             padding: 0;
  197.             box-sizing: border-box;
  198.             font-family: monospace;
  199.         }
  200.         svg {
  201.             background: #07252D;
  202.         }
  203.         text {
  204.             font-family: "Ubuntu Mono"
  205.         }
  206.         #GlowingTubelight {
  207.             user-select: none;
  208.             position: relative;
  209.             font-size: 2rem;
  210.             color: #0E3742;
  211.             width: 100%;
  212.             text-align: center;
  213.             -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
  214.             line-height: 0.7rem;
  215.             outline: none;
  216.         }
  217.         #GlowingTubelight .is-light {
  218.             animation: animate 1.3s linear forwards;
  219.         }
  220.         #GlowingTubelight .is-flashing {
  221.             animation: animate 1s linear forwards, animate 4.7s linear infinite;
  222.         }
  223.         @keyframes animate {
  224.             0%,17%,20%,52%,60%,66%,80%,91%,93% {
  225.                 color: #0E3742;
  226.                 text-shadow: none;
  227.             }
  228.             18%,21%,30%,50%,61%,65%,81%,90%,92%,100% {
  229.                 color: #FFFFFF;
  230.                 text-shadow:
  231.                 0 0 10px #03BCF4,
  232.                 0 0 20px #03BCF4,
  233.                 0 0 40px #03BCF4,
  234.                 0 0 80px #03BCF4,
  235.                 0 0 160px #03BCF4;
  236.             }
  237.         }
  238.     </style>
  239.     <g id="GlowingTubelight">
  240.         <text fill="currentColor" x="90" y="-30" class="is-light">88% [|||||||||||||||||||||||----] 9,686 / </text>
  241.         <text fill="currentColor" x="635" y="-30" class="is-flashing">10,</text>
  242.         <text fill="currentColor" x="675" y="-30" class="is-light">956 [EOL]</text>
  243.     </g>
  244.     <defs>
  245.         <g id="singleDirection">
  246.             <circle cx="0" cy="0" r="10"></circle>
  247.             <circle cx="0" cy="0" r="10" style="animation-delay: 0.1s;"></circle>
  248.             <circle cx="0" cy="0" r="10" style="animation-delay: 0.2s;"></circle>
  249.             <circle cx="0" cy="0" r="10" style="animation-delay: 0.3s;"></circle>
  250.         </g>
  251.     </defs>
  252.     <use xlink:href="#powders" x="-340" y="-48" transform="scale(4)"></use>
  253. </svg>
  254.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!