Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg width="877" height="137" viewBox="0 0 877 137" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="miet" d="M256.195 27.1461V109.672H237.946V67.5961C237.946 58.9949 238.062 50.7411 238.295 42.4886C236.202 50.3936 234.227 57.7161 231.205 67.5961L218.536 109.672H202.262L189.361 67.5961C186.455 57.7161 183.897 50.2761 181.805 42.6061C182.037 50.8586 182.155 58.9949 182.155 67.4799V109.672H164.137V27.1461H193.545L203.425 59.4599C206.098 68.2924 208.538 76.8936 210.515 84.9136C212.491 76.7786 214.932 68.0599 217.49 59.4599L227.252 27.1461H256.195Z" fill="#0F45C7"/>
<path class="miet" d="M343.256 27.1461V109.672H325.007V85.1474C325.007 72.1286 325.24 60.0399 325.705 49.5799C321.405 58.0649 315.592 68.2924 310.246 77.5924L291.881 109.672H272.005V27.1461H290.254V53.6474C290.254 66.3174 290.021 76.7786 289.556 85.9599C293.509 77.8236 298.157 69.5711 302.69 61.7836L322.799 27.1461H343.256Z" fill="#0F45C7"/>
<path class="miet" d="M426.713 68.0604C426.713 93.0517 410.906 111.764 384.869 111.764C372.083 111.764 362.204 107.464 352.208 98.0492L363.017 85.2629C371.851 92.3529 376.849 95.1442 385.334 95.1442C397.307 95.1442 405.559 87.5879 407.651 74.9192H374.408V59.1104H407.069C404.396 48.1854 396.609 41.6754 385.218 41.6754C377.896 41.6754 372.781 43.5354 364.412 50.7417L353.369 37.7229C362.901 29.2379 371.271 25.0542 384.869 25.0542C411.487 25.0542 426.713 44.0004 426.713 68.0604Z" fill="#0F45C7"/>
<path class="miet" d="M499.129 43.3026H475.65V109.673H456.819V43.3026H433.573V27.1464H499.129V43.3026Z" fill="#0F45C7"/>
<path class="miet" d="M541.807 45.9956H538.669V37.5344H529.549V45.9956H526.439V27.2806H529.549V34.8981H538.669V27.2806H541.807V45.9956Z" fill="#0F45C7"/>
<path class="miet" d="M558.789 39.1951L557.998 36.9014C557.102 34.2926 556.233 31.8939 555.574 29.6526C554.914 31.8939 554.044 34.3189 553.123 36.9289L552.332 39.1951H558.789ZM559.686 41.7776H551.436L549.986 45.9951H546.823L553.571 27.2801H557.657L564.404 45.9951H561.162L559.686 41.7776V41.7776Z" fill="#0F45C7"/>
<path class="miet" d="M572.53 27.2805V43.3592H581.176V27.2805H584.286V43.3592H586.553V49.8967H583.521V45.9955H569.42V27.2805H572.53Z" fill="#0F45C7"/>
<path class="miet" d="M607.515 27.2804V45.9954H604.484V38.6416C604.484 35.8741 604.536 33.2379 604.669 30.8654C603.481 33.0004 601.979 35.4516 600.451 37.9304L595.442 45.9954H592.095V27.2804H595.126V34.8716C595.126 37.6666 595.099 40.0916 594.967 42.3316C596.154 40.1966 597.472 37.9566 598.922 35.6629L604.114 27.2804H607.515Z" fill="#0F45C7"/>
<path class="miet" d="M616.378 36.6377C616.378 40.8552 618.725 43.6765 622.283 43.6765C625.842 43.6765 628.162 40.8552 628.162 36.6377C628.162 32.4465 625.842 29.6002 622.283 29.6002C618.725 29.6002 616.378 32.4465 616.378 36.6377ZM631.352 36.6377C631.352 42.2265 627.923 46.4177 622.283 46.4177C616.642 46.4177 613.19 42.2265 613.19 36.6377C613.19 31.0502 616.642 26.859 622.283 26.859C627.923 26.859 631.352 31.0502 631.352 36.6377Z" fill="#0F45C7"/>
<path class="miet" d="M652.394 45.9956H649.257V37.5344H640.137V45.9956H637.027V27.2806H640.137V34.8981H649.257V27.2806H652.394V45.9956Z" fill="#0F45C7"/>
<path class="miet" d="M669.377 39.1951L668.585 36.9014C667.689 34.2926 666.82 31.8939 666.162 29.6526C665.502 31.8939 664.632 34.3189 663.71 36.9289L662.919 39.1951H669.377ZM670.273 41.7776H662.023L660.573 45.9951H657.41L664.158 27.2801H668.244L674.992 45.9951H671.749L670.273 41.7776V41.7776Z" fill="#0F45C7"/>
<path class="miet" d="M678.583 45.943L678.924 43.3068C679.268 43.3855 679.796 43.4393 680.217 43.4393C682.273 43.4393 682.353 41.4355 682.378 37.4018L682.431 27.2805H695.532V45.9955H692.421V29.9168H685.357L685.304 37.9293C685.277 43.123 684.619 46.2068 680.587 46.2068C679.848 46.2068 679.136 46.1005 678.583 45.943Z" fill="#0F45C7"/>
<path class="miet" d="M709.826 43.4126C712.04 43.4126 713.49 42.3314 713.49 40.1964C713.49 38.0614 712.04 36.9801 709.826 36.9801H705.345V43.4126H709.826ZM702.235 27.2801H705.345V34.3976H710.326C714.043 34.3976 716.6 36.5851 716.6 40.1964C716.6 43.8339 714.043 45.9951 710.326 45.9951H702.235V27.2801V27.2801Z" fill="#0F45C7"/>
<path class="miet" d="M737.404 45.9956H734.266V37.5344H725.146V45.9956H722.036V27.2806H725.146V34.8981H734.266V27.2806H737.404V45.9956Z" fill="#0F45C7"/>
<path class="miet" d="M763.849 45.9961H760.739V27.2811H763.849V45.9961ZM751.699 43.4124C753.912 43.4124 755.361 42.3311 755.361 40.1961C755.361 38.0611 753.912 36.9811 751.699 36.9811H747.217V43.4124H751.699ZM744.106 27.2798H747.217V34.3973H752.199C755.916 34.3973 758.473 36.5848 758.473 40.1961C758.473 43.8348 755.916 45.9961 752.199 45.9961H744.106V27.2798Z" fill="#0F45C7"/>
<path class="miet" d="M773.797 22.1139H776.168C776.168 23.3264 776.88 24.0126 778.278 24.0126C779.649 24.0126 780.385 23.3264 780.385 22.1139H782.732C782.732 24.6964 780.86 25.8039 778.278 25.8039C775.668 25.8039 773.797 24.6964 773.797 22.1139ZM785.974 27.2801V45.9951H782.943V38.6414C782.943 35.8739 782.995 33.2376 783.128 30.8651C781.942 33.0001 780.438 35.4514 778.91 37.9301L773.902 45.9951H770.554V27.2801H773.585V34.8726C773.585 37.6664 773.559 40.0914 773.427 42.3314C774.613 40.1964 775.932 37.9564 777.382 35.6626L782.573 27.2801H785.974V27.2801Z" fill="#0F45C7"/>
<path class="miet" d="M541.859 58.9222V77.6372H538.828V70.2822C538.828 67.516 538.881 64.8797 539.013 62.5072C537.826 64.6422 536.323 67.0935 534.796 69.5722L529.787 77.6372H526.439V58.9222H529.471V66.5135C529.471 69.3085 529.443 71.7335 529.312 73.9735C530.498 71.8385 531.817 69.5985 533.266 67.3047L538.458 58.9222H541.859Z" fill="#0F45C7"/>
<path class="miet" d="M563.587 61.2153L561.768 63.3766C559.738 61.6366 558.342 61.2153 556.734 61.2153C553.017 61.2153 550.723 64.0616 550.723 68.2528C550.723 72.4966 553.069 75.3441 556.628 75.3441C558.737 75.3441 560.08 74.5003 562.032 72.7878L563.903 74.8953C561.53 77.1366 559.5 78.0603 556.682 78.0603C550.987 78.0603 547.534 73.8678 547.534 68.2528C547.534 62.6916 550.882 58.5003 556.759 58.5003C559.422 58.5003 561.347 59.2916 563.587 61.2153" fill="#0F45C7"/>
<path class="miet" d="M583.996 61.2153L582.177 63.3766C580.147 61.6366 578.751 61.2153 577.143 61.2153C573.426 61.2153 571.132 64.0616 571.132 68.2528C571.132 72.4966 573.478 75.3441 577.037 75.3441C579.146 75.3441 580.489 74.5003 582.441 72.7878L584.312 74.8953C581.939 77.1366 579.909 78.0603 577.091 78.0603C571.396 78.0603 567.943 73.8678 567.943 68.2528C567.943 62.6916 571.291 58.5003 577.168 58.5003C579.831 58.5003 581.756 59.2916 583.996 61.2153" fill="#0F45C7"/>
<path class="miet" d="M587.957 77.5849L588.298 74.9486C588.642 75.0274 589.169 75.0799 589.591 75.0799C591.647 75.0799 591.727 73.0774 591.752 69.0436L591.804 58.9224H604.906V77.6374H601.794V61.5586H594.731L594.678 69.5711C594.651 74.7636 593.993 77.8486 589.961 77.8486C589.222 77.8486 588.509 77.7424 587.957 77.5849Z" fill="#0F45C7"/>
<path class="miet" d="M624.445 61.5582H614.719V66.672H623.786V69.282H614.719V75.002H624.709V77.637H611.607V58.922H624.445V61.5582Z" fill="#0F45C7"/>
<path class="miet" d="M633.992 75.0018H642.769V61.5581H635.811L635.758 66.1181C635.679 71.6806 634.757 73.8406 633.992 75.0018ZM645.881 58.9218V75.0018H648.174V81.5381H645.116V77.6368H632.173V81.5381H629.116V75.0018H630.749C631.673 73.6831 632.807 71.5218 632.859 66.0131L632.912 58.9218H645.881V58.9218Z" fill="#0F45C7"/>
<path class="miet" d="M655.851 68.2796C655.851 72.4971 658.197 75.3183 661.756 75.3183C665.315 75.3183 667.635 72.4971 667.635 68.2796C667.635 64.0883 665.315 61.2421 661.756 61.2421C658.197 61.2421 655.851 64.0883 655.851 68.2796ZM670.825 68.2796C670.825 73.8683 667.396 78.0596 661.756 78.0596C656.115 78.0596 652.662 73.8683 652.662 68.2796C652.662 62.6921 656.115 58.5008 661.756 58.5008C667.396 58.5008 670.825 62.6921 670.825 68.2796Z" fill="#0F45C7"/>
<path class="miet" d="M688.229 72.1539C688.229 70.3089 686.91 69.0964 684.512 69.0964H679.609V75.1864H684.487C686.963 75.1864 688.229 74.0264 688.229 72.1539ZM679.609 66.6452H684.407C686.463 66.6452 687.649 65.6177 687.649 63.9302C687.649 62.2427 686.489 61.3727 684.407 61.3727H679.609V66.6452ZM691.339 72.3652C691.339 75.6339 689.045 77.6377 685.567 77.6377H676.499V58.9227H685.119C688.282 58.9227 690.68 60.5564 690.68 63.7189C690.68 65.8277 689.494 67.1989 687.754 67.8052C689.943 68.4377 691.339 69.9402 691.339 72.3652" fill="#0F45C7"/>
<path class="miet" d="M707.24 70.837L706.449 68.5432C705.553 65.9345 704.684 63.5357 704.025 61.2945C703.365 63.5357 702.495 65.9607 701.574 68.5707L700.783 70.837H707.24ZM708.137 73.4195H699.887L698.437 77.637H695.274L702.022 58.922H706.108L712.855 77.637H709.613L708.137 73.4195V73.4195Z" fill="#0F45C7"/>
<path class="miet" d="M731.076 61.5845H725.382V77.637H722.272V61.5845H716.605V58.922H731.076V61.5845Z" fill="#0F45C7"/>
<path class="miet" d="M749.323 61.5582H739.597V66.672H748.664V69.282H739.597V75.002H749.587V77.637H736.485V58.922H749.323V61.5582Z" fill="#0F45C7"/>
<path class="miet" d="M754.047 77.5849L754.388 74.9486C754.732 75.0274 755.259 75.0799 755.681 75.0799C757.737 75.0799 757.817 73.0774 757.842 69.0436L757.894 58.9224H770.996V77.6374H767.884V61.5586H760.821L760.768 69.5711C760.741 74.7636 760.083 77.8486 756.051 77.8486C755.312 77.8486 754.599 77.7424 754.047 77.5849Z" fill="#0F45C7"/>
<path class="miet" d="M785.291 75.0545C787.505 75.0545 788.955 73.9732 788.955 71.8382C788.955 69.7032 787.505 68.622 785.291 68.622H780.81V75.0545H785.291ZM777.7 58.922H780.81V66.0395H785.791C789.508 66.0395 792.065 68.227 792.065 71.8382C792.065 75.4757 789.508 77.637 785.791 77.637H777.7V58.922V58.922Z" fill="#0F45C7"/>
<path class="miet" d="M812.526 61.2153L810.707 63.3766C808.677 61.6366 807.281 61.2153 805.674 61.2153C801.956 61.2153 799.662 64.0616 799.662 68.2528C799.662 72.4966 802.009 75.3441 805.567 75.3441C807.676 75.3441 809.02 74.5003 810.971 72.7878L812.842 74.8953C810.47 77.1366 808.44 78.0603 805.621 78.0603C799.926 78.0603 796.474 73.8678 796.474 68.2528C796.474 62.6916 799.821 58.5003 805.699 58.5003C808.361 58.5003 810.286 59.2916 812.526 61.2153" fill="#0F45C7"/>
<path class="miet" d="M824.13 69.1762H821.02V77.6375H817.909V58.9225H821.02V66.54H824.156L829.85 58.9225H833.381L826.686 67.7525L833.697 77.6375H830.114L824.13 69.1762Z" fill="#0F45C7"/>
<path class="miet" d="M854.054 58.9222V77.6372H851.023V70.2822C851.023 67.516 851.076 64.8797 851.208 62.5072C850.021 64.6422 848.518 67.0935 846.991 69.5722L841.982 77.6372H838.634V58.9222H841.666V66.5135C841.666 69.3085 841.638 71.7335 841.507 73.9735C842.693 71.8385 844.012 69.5985 845.461 67.3047L850.653 58.9222H854.054Z" fill="#0F45C7"/>
<path class="miet" d="M863.999 53.7555H866.371C866.371 54.968 867.083 55.6542 868.481 55.6542C869.852 55.6542 870.588 54.968 870.588 53.7555H872.934C872.934 56.338 871.063 57.4455 868.481 57.4455C865.871 57.4455 863.999 56.338 863.999 53.7555ZM876.177 58.9217V77.6367H873.146V70.283C873.146 67.5155 873.198 64.8792 873.331 62.5067C872.144 64.6417 870.641 67.093 869.113 69.5717L864.104 77.6367H860.757V58.9217H863.788V66.5142C863.788 69.308 863.762 71.733 863.629 73.973C864.816 71.838 866.134 69.598 867.584 67.3042L872.776 58.9217H876.177V58.9217Z" fill="#0F45C7"/>
<path class="miet" d="M540.884 90.5634L533.925 105.957C532.792 108.488 531.71 109.648 529.234 109.648C528.574 109.648 527.652 109.516 526.782 109.306L527.363 106.67C527.942 106.801 528.574 106.907 529.075 106.907C529.919 106.907 530.762 106.643 531.369 105.221L531.474 105.01L524.673 90.5634H527.942L532.949 101.635L537.8 90.5634H540.884Z" fill="#0F45C7"/>
<path class="miet" d="M561.187 109.279H558.049V100.817H548.929V109.279H545.819V90.563H548.929V98.1818H558.049V90.563H561.187V109.279Z" fill="#0F45C7"/>
<path class="miet" d="M583.31 90.5633V109.28H580.278V101.925C580.278 99.157 580.331 96.522 580.463 94.1483C579.276 96.2833 577.773 98.7358 576.246 101.213L571.237 109.28H567.89V90.5633H570.921V98.1545C570.921 100.95 570.893 103.375 570.762 105.615C571.948 103.48 573.267 101.24 574.716 98.9458L579.908 90.5633H583.31Z" fill="#0F45C7"/>
<path class="miet" d="M601.742 103.797C601.742 101.951 600.423 100.74 598.025 100.74H593.122V106.828H598C600.476 106.828 601.742 105.668 601.742 103.797ZM593.122 98.287H597.92C599.976 98.287 601.162 97.2595 601.162 95.572C601.162 93.8845 600.002 93.0158 597.92 93.0158H593.122V98.287ZM604.852 104.007C604.852 107.276 602.558 109.28 599.08 109.28H590.012V90.5633H598.632C601.795 90.5633 604.193 92.1983 604.193 95.362C604.193 97.4695 603.007 98.8408 601.267 99.4483C603.456 100.08 604.852 101.583 604.852 104.007" fill="#0F45C7"/>
<path class="miet" d="M623.311 93.2001H613.585V98.3138H622.652V100.924H613.585V106.644H623.575V109.279H610.473V90.5638H623.311V93.2001Z" fill="#0F45C7"/>
<path class="miet" d="M632.57 93.1476V99.5001H637.525C639.686 99.5001 641.057 98.3926 641.057 96.3363C641.057 94.2551 639.686 93.1476 637.525 93.1476H632.57ZM644.167 96.3363C644.167 99.8951 641.742 102.083 638.026 102.083H632.57V109.279H629.46V90.5638H638.026C641.742 90.5638 644.167 92.7776 644.167 96.3363" fill="#0F45C7"/>
<path class="miet" d="M664.734 92.8572L662.916 95.0184C660.886 93.2797 659.489 92.8572 657.882 92.8572C654.164 92.8572 651.871 95.7034 651.871 99.8959C651.871 104.138 654.217 106.986 657.776 106.986C659.884 106.986 661.228 106.142 663.179 104.43L665.051 106.537C662.678 108.778 660.648 109.701 657.829 109.701C652.134 109.701 648.682 105.51 648.682 99.8959C648.682 94.3334 652.029 90.1422 657.907 90.1422C660.569 90.1422 662.494 90.9334 664.734 92.8572" fill="#0F45C7"/>
<path class="miet" d="M685.539 90.5633V109.28H682.508V101.925C682.508 99.157 682.56 96.522 682.693 94.1483C681.505 96.2833 680.003 98.7358 678.475 101.213L673.466 109.28H670.119V90.5633H673.15V98.1545C673.15 100.95 673.123 103.375 672.991 105.615C674.178 103.48 675.496 101.24 676.945 98.9458L682.138 90.5633H685.539Z" fill="#0F45C7"/>
<path class="miet" d="M705.447 93.2258H699.753V109.28H696.643V93.2258H690.976V90.5633H705.447V93.2258Z" fill="#0F45C7"/>
<path class="miet" d="M723.694 93.2001H713.968V98.3138H723.035V100.924H713.968V106.644H723.958V109.279H710.857V90.5638H723.694V93.2001Z" fill="#0F45C7"/>
<path class="miet" d="M743.047 93.2258H737.353V109.28H734.243V93.2258H728.576V90.5633H743.047V93.2258Z" fill="#0F45C7"/>
<path class="miet" d="M130.548 96.91C134.539 88.2288 136.768 78.5663 136.768 68.3813C136.768 30.615 106.154 1.90735e-05 68.3841 1.90735e-05C30.6166 1.90735e-05 0.000366211 30.615 0.000366211 68.3813C0.000366211 106.151 30.6166 136.77 68.3841 136.77C93.9954 136.77 116.312 122.689 128.028 101.846H122.385V87.4938L111.588 102.296V87.4938L100.772 102.303V80.1913H97.7404C98.1629 78.58 98.4954 76.9325 98.7479 75.26H98.7504H105.29V89.4038L116.07 74.6325V89.4038L126.894 74.5725V96.91H130.548ZM98.7816 75.0363H92.3466C92.7091 72.8725 92.9029 70.6513 92.9029 68.3813C92.9029 46.1188 74.7879 28.0063 52.5241 28.0063C44.9304 28.0063 37.5316 30.13 31.1254 34.1425L34.3954 39.3575C39.8179 35.9613 46.0941 34.1663 52.5241 34.1663C71.3941 34.1663 86.7404 49.5175 86.7404 68.3813C86.7404 70.6588 86.5141 72.8813 86.0866 75.0363H74.3679V55.0975L63.5229 69.965L63.5179 55.155L52.7354 69.9288V44.3525L37.9366 67.83V44.3738L13.1654 83.3725C13.8741 85.2175 14.6979 86.9988 15.6504 88.7163L32.9991 61.565V83.76L47.8079 60.2688V83.735L58.6204 68.9238V83.7263L69.4204 68.9288V80.41H84.5541C79.6779 93.3613 67.1616 102.604 52.5241 102.604C46.1016 102.604 39.8466 100.81 34.4241 97.4275L31.1641 102.65C37.5604 106.648 44.9491 108.758 52.5241 108.758C70.6016 108.758 85.9391 96.8213 91.0704 80.41H97.6854C92.3654 100.365 74.1416 115.11 52.5341 115.11C26.7691 115.11 5.80787 94.1438 5.80787 68.3813C5.80787 42.62 26.7691 21.655 52.5341 21.655C78.3004 21.655 99.2566 42.62 99.2566 68.3813C99.2566 70.645 99.0941 72.8638 98.7816 75.0363" fill="#0F45C7"/>
</svg>

              
            
!

CSS

              
                @import "compass/css3";

body {
  background-color: #fff;
  text-align: center;
}

path {
  stroke: transparent;
  fill: transparent;
   
  &.fillIt {
    fill: #0F45C7;
    stroke: #0F45C7;
    
    @include transition(
      stroke-dashoffset 1s ease-in-out,
      fill 1s ease-in 1s
    );
  }
  
  &.miet {
    &.fillIt {
      fill: #0F45C7;
      stroke: #0F45C7;
      @include transition(
        stroke-dashoffset 2s ease-in-out,
        fill 1s ease-in 1s
      );    
    }
  }

}
              
            
!

JS

              
                ( function( document ) {
   var delay = 50;
  function animate( elements ) {
    elements.forEach( function( element, index ) {
      var length = element.getTotalLength();
      element.style.strokeDasharray = length + ' ' + length;
      element.style.strokeDashoffset = length;
      element.getBoundingClientRect();
      setTimeout( function() {
        element.style.strokeDashoffset = '0';
        element.classList.add( 'fillIt' );
      }, delay * index );
    } );
  }

  var logo = Array.prototype.slice.call( document.getElementsByClassName( 'miet' ), 0);

  setTimeout( function() {
    animate( logo );
  }, 50 );
 } )( document );
              
            
!
999px

Console