Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="100%" height="100%" viewBox="0 0 515 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 58 (84663) - https://sketch.com -->
    <title>BitForex</title>
    <desc>Created with Sketch.</desc>
    <g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-54.000000, -93.000000)">
            <g id="BitForex" transform="translate(54.000000, 94.000000)">
                <path d="M262.309372,25.3528628 L260.4377,35.5792277 L251.965921,35.5792277 L246.94196,62.849534 C246.744941,63.701731 246.744941,64.3408788 246.744941,64.873502 C246.744941,67.1105193 248.025559,68.2822903 250.685304,68.2822903 L255.118211,68.2822903 L253.049521,79.3608522 L246.744941,79.3608522 C239.65229,79.3608522 234.332801,74.8868176 234.332801,67.3235686 C234.332801,65.4061252 234.529819,63.9147803 234.726837,62.7430093 L239.750799,35.5792277 L234.529819,35.5792277 L236.401491,25.3528628 L241.622471,25.3528628 L244.676251,8.94806924 L256.891374,8.94806924 L253.837593,25.3528628 L262.309372,25.3528628 Z" id="Shape" stroke="#000000" fill="#000000" class="svg-elem-1"></path>
                <polygon id="Shape" stroke="#000000" fill="#000000" points="322.498403 3.51531292 320.232694 15.8721704 289.49787 15.8721704 285.853035 35.6857523 312.154952 35.6857523 309.889244 48.0426099 283.488818 48.0426099 277.676784 79.3608522 264.673589 79.3608522 278.760383 3.51531292" class="svg-elem-2"></polygon>
                <path d="M346.731629,23.2223702 C354.513845,23.2223702 364.069223,28.0159787 364.069223,41.5446072 C364.069223,44.9533955 363.478168,49.0013316 363.084132,51.5579228 C361.113951,62.9560586 358.454207,68.9214381 353.92279,73.608522 C350.080937,77.6564581 344.56443,80 338.161342,80 C330.379127,80 320.72524,75.0998668 320.72524,61.5712383 C320.72524,58.1624501 321.414803,54.114514 321.808839,51.5579228 C323.77902,40.159787 326.438765,34.3009321 330.970181,29.6138482 C334.812034,25.5659121 340.328541,23.2223702 346.731629,23.2223702 Z M345.549521,35.0466045 C343.086794,35.0466045 340.722577,36.1118509 339.146432,37.816245 C336.683706,40.3728362 335.20607,44.6338216 333.925453,51.5579228 C333.038871,56.5645806 332.841853,59.0146471 332.841853,60.2929427 C332.841853,65.6191744 335.600106,68.1757656 339.34345,68.1757656 C341.806177,68.1757656 344.071885,67.1105193 345.64803,65.4061252 C348.110756,62.849534 349.588392,58.482024 350.86901,51.5579228 C351.755591,46.551265 351.952609,44.207723 351.952609,42.9294274 C351.952609,37.6031957 349.292865,35.0466045 345.549521,35.0466045 Z" id="Shape" stroke="#000000" fill="#000000" class="svg-elem-3"></path>
                <path d="M414.407348,28.4420772 L403.86688,38.5619174 C402.980298,37.3901465 401.404153,35.1531292 398.251864,35.1531292 C393.42492,35.1531292 389.090522,39.4141145 387.908413,45.8055925 L381.702343,79.3608522 L369.48722,79.3608522 L379.732162,23.861518 L391.553248,23.861518 L390.469649,29.2942743 C393.326411,25.5659121 398.153355,23.2223702 403.472843,23.2223702 C408.398296,23.2223702 411.649095,24.9267643 414.407348,28.4420772 Z" id="Shape" stroke="#000000" fill="#000000" class="svg-elem-4"></path>
                <path d="M439.822684,23.2223702 C450.757188,23.2223702 458.046858,30.9986684 458.046858,43.0359521 C458.046858,46.7643142 457.357295,51.2383489 456.470714,55.6058589 L425.735889,55.6058589 C425.538871,57.0972037 425.341853,58.1624501 425.341853,59.5472703 C425.341853,64.9800266 428.100106,68.8149134 434.109159,68.8149134 C439.034611,68.8149134 442.777955,66.7909454 446.324281,63.1691079 L452.72737,71.9041278 C447.407881,77.3368842 440.413738,80 432.730032,80 C423.765708,80 413.717785,75.0998668 413.717785,60.505992 C413.717785,41.8641811 422.189563,23.2223702 439.822684,23.2223702 Z M439.13312,34.0878828 C433.912141,34.0878828 429.577742,37.816245 427.312034,46.7643142 L446.127263,46.7643142 C446.324281,45.5925433 446.42279,44.207723 446.42279,43.0359521 C446.42279,37.2836218 443.566028,34.0878828 439.13312,34.0878828 Z" id="Shape" stroke="#000000" fill="#000000" class="svg-elem-5"></path>
                <polygon id="Shape" stroke="#000000" fill="#000000" points="514 23.861518 493.313099 51.4513981 505.429712 79.3608522 491.342918 79.3608522 484.93983 61.9973369 473.020234 79.3608522 457.948349 79.3608522 479.71885 50.7057257 468.094782 23.861518 482.181576 23.861518 488.190628 40.3728362 499.125133 23.861518" class="svg-elem-6"></polygon>
                <path d="M227.14164,23.861518 L216.896699,79.3608522 L204.681576,79.3608522 L214.926518,23.861518 L227.14164,23.861518 Z M223.595314,8.8817842e-15 C227.831203,8.8817842e-15 231.27902,3.72836218 231.27902,8.30892144 C231.27902,12.8894807 227.831203,16.6178429 223.595314,16.6178429 C219.359425,16.6178429 215.911608,12.8894807 215.911608,8.30892144 C215.911608,3.72836218 219.359425,8.8817842e-15 223.595314,8.8817842e-15 Z" id="Shape" stroke="#000000" fill="#000000" class="svg-elem-7"></path>
                <path d="M183.50213,3.51531292 C196.406816,3.51531292 201.726305,11.930759 201.726305,21.0918775 C201.726305,28.0159787 199.165069,36.1118509 190.299255,40.9054594 C194.338126,43.6750999 196.99787,47.1904128 196.99787,54.2210386 C196.99787,69.4540613 186.752929,79.3608522 173.355698,79.3608522 L144,79.3608522 L158.086794,3.51531292 L183.50213,3.51531292 Z M176.507987,47.0838881 L163.012247,47.0838881 L159.367412,66.89747 L172.961661,66.89747 C179.758786,66.89747 183.896166,61.677763 183.896166,54.8601864 C183.896166,50.3861518 181.531949,47.0838881 176.507987,47.0838881 Z M181.236422,15.9786951 L168.824281,15.9786951 L165.277955,34.620506 L177.788605,34.620506 C185.472311,34.620506 188.526092,28.3355526 188.526092,23.4354194 C188.526092,19.9201065 187.146965,15.9786951 181.236422,15.9786951 Z" id="Shape" stroke="#000000" fill="#000000" class="svg-elem-8"></path>
                <path d="M15.229843,0.5 L0.503876085,0.5 C0.75628862,16.7571101 13.3080498,28.8947537 29.7816143,28.8947537 L32.4727464,28.8947537 L32.4727464,47.2242838 C32.4727464,65.020977 46.8912636,79.5 64.6114974,79.5 C82.3309198,79.5 96.747983,65.021223 96.747983,47.2242838 L96.747983,28.8947537 L100.533832,28.8947537 C116.968466,28.8947537 129.250764,16.8547577 129.496253,0.5 L114.684741,0.5 C114.423362,8.25509101 108.104192,14.4230824 100.337881,14.4230824 L96.747983,14.4230824 L96.747983,0.5 L82.0736578,0.5 L82.0736578,14.4230824 L47.1470716,14.4230824 L47.1470716,0.5 L32.4727464,0.5 L32.4727464,14.4230824 L29.5862303,14.4230824 C21.8314078,14.4230824 15.4931469,8.2220841 15.229843,0.5 Z M82.0736578,28.8947537 L82.0736578,47.2242838 C82.0736578,56.8934966 74.2408501,64.7598991 64.6114974,64.7598991 C54.9802404,64.7598991 47.1470716,56.8938592 47.1470716,47.2242838 L47.1470716,28.8947537 L82.0736578,28.8947537 Z" id="Shape" stroke="#00CCAE" fill="#00CCAE" class="svg-elem-9"></path>
            </g>
        </g>
    </g>
</svg>
            
          
!
            
              @keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 205.2047576904297px;
    stroke-dasharray: 205.2047576904297px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-1 {
  animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 296.4457702636719px;
    stroke-dasharray: 296.4457702636719px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-2 {
  animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
               animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 247.22071838378906px;
    stroke-dasharray: 247.22071838378906px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-3 {
  animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
               animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 187.17398071289062px;
    stroke-dasharray: 187.17398071289062px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-4 {
  animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
               animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 277.0000305175781px;
    stroke-dasharray: 277.0000305175781px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-5 {
  animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
               animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 267.2125244140625px;
    stroke-dasharray: 267.2125244140625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-6 {
  animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
               animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 189.55909729003906px;
    stroke-dasharray: 189.55909729003906px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-7 {
  animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
               animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 391.8668212890625px;
    stroke-dasharray: 391.8668212890625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-8 {
  animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
               animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 563.710205078125px;
    stroke-dasharray: 563.710205078125px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 204, 174);
  }
}

.svg-elem-9 {
  animation: animate-svg-stroke-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
               animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console