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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                
<H4>Click the type or wait to see effect. Created for <a href="http://profession.is" target="_blank">profession.is</a> by <a href="https://twitter.com/DesignJokes" target="_blank">@DesignJokes</a></H4>
    <div id="type" class="type beautiful">
<svg width="396px" height="90px" viewBox="0 0 396 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="beautiful" transform="translate(130.000000, 0.000000)" fill="white">
            <path d="M265.08,2 L265.08,68 L261.48,68 L261.48,2 L265.08,2 Z" id="l"></path>
            <path d="M246.12,31.04 L249.72,31.04 L249.72,53.2 C249.72,54.9600088 249.706667,56.2533292 249.68,57.08 C249.653333,57.9066708 249.453335,58.9999932 249.08,60.36 C248.706665,61.7200068 248.173337,62.8799952 247.48,63.84 C244.973321,67.1466832 241.293358,68.8 236.44,68.8 C231.586642,68.8 227.906679,67.1466832 225.4,63.84 C224.706663,62.8799952 224.173335,61.7200068 223.8,60.36 C223.426665,58.9999932 223.226667,57.9066708 223.2,57.08 C223.173333,56.2533292 223.16,54.9600088 223.16,53.2 L223.16,31.04 L226.76,31.04 L226.76,51.92 C226.76,54.0000104 226.853332,55.7333264 227.04,57.12 C227.226668,58.5066736 227.626664,59.8933264 228.24,61.28 C228.853336,62.6666736 229.839993,63.7066632 231.2,64.4 C232.560007,65.0933368 234.306656,65.44 236.44,65.44 C238.573344,65.44 240.319993,65.0933368 241.68,64.4 C243.040007,63.7066632 244.026664,62.6666736 244.64,61.28 C245.253336,59.8933264 245.653332,58.5066736 245.84,57.12 C246.026668,55.7333264 246.12,54.0000104 246.12,51.92 L246.12,31.04 Z" id="u2"></path>
            <path d="M208.12,34.4 L208.12,68 L204.52,68 L204.52,34.4 L200.44,34.4 L200.44,31.04 L204.52,31.04 L204.52,14.48 C204.52,10.1599784 204.999995,7.1466752 205.96,5.44 C207.666675,2.4533184 210.413314,0.96 214.2,0.96 C215.373339,0.96 216.439995,1.1466648 217.4,1.52 L217.4,4.8 C215.47999,4.4799984 214.493334,4.32 214.44,4.32 C212.946659,4.32 211.746671,4.6399968 210.84,5.28 C209.933329,5.9200032 209.293335,6.8666604 208.92,8.12 C208.546665,9.3733396 208.32,10.466662 208.24,11.4 C208.16,12.333338 208.12,13.599992 208.12,15.2 L208.12,31.04 L217.4,31.04 L217.4,34.4 L208.12,34.4 Z" id="f"></path>
            <path d="M190.76,31.04 L190.76,68 L187.16,68 L187.16,31.04 L190.76,31.04 Z M189,15.44 C189.906671,15.44 190.679997,15.7599968 191.32,16.4 C191.960003,17.0400032 192.28,17.8133288 192.28,18.72 C192.28,19.6266712 191.960003,20.3999968 191.32,21.04 C190.679997,21.6800032 189.906671,22 189,22 C188.093329,22 187.320003,21.6800032 186.68,21.04 C186.039997,20.3999968 185.72,19.6266712 185.72,18.72 C185.72,17.8133288 186.039997,17.0400032 186.68,16.4 C187.320003,15.7599968 188.093329,15.44 189,15.44 Z" id="i"></path>
            <path d="M173.08,34.4 L173.08,68 L169.48,68 L169.48,34.4 L165.4,34.4 L165.4,31.04 L169.48,31.04 L169.48,17.84 L173.08,17.84 L173.08,31.04 L179.56,31.04 L179.56,34.4 L173.08,34.4 Z" id="t"></path>
            <path d="M153.72,31.04 L157.32,31.04 L157.32,53.2 C157.32,54.9600088 157.306667,56.2533292 157.28,57.08 C157.253333,57.9066708 157.053335,58.9999932 156.68,60.36 C156.306665,61.7200068 155.773337,62.8799952 155.08,63.84 C152.573321,67.1466832 148.893358,68.8 144.04,68.8 C139.186642,68.8 135.506679,67.1466832 133,63.84 C132.306663,62.8799952 131.773335,61.7200068 131.4,60.36 C131.026665,58.9999932 130.826667,57.9066708 130.8,57.08 C130.773333,56.2533292 130.76,54.9600088 130.76,53.2 L130.76,31.04 L134.36,31.04 L134.36,51.92 C134.36,54.0000104 134.453332,55.7333264 134.64,57.12 C134.826668,58.5066736 135.226664,59.8933264 135.84,61.28 C136.453336,62.6666736 137.439993,63.7066632 138.8,64.4 C140.160007,65.0933368 141.906656,65.44 144.04,65.44 C146.173344,65.44 147.919993,65.0933368 149.28,64.4 C150.640007,63.7066632 151.626664,62.6666736 152.24,61.28 C152.853336,59.8933264 153.253332,58.5066736 153.44,57.12 C153.626668,55.7333264 153.72,54.0000104 153.72,51.92 L153.72,31.04 Z" id="u"></path>
            <path d="M119,31.04 L119,68 L115.4,68 L115.4,61.36 L115.24,61.36 C113.90666,63.6533448 111.933346,65.46666 109.32,66.8 C106.706654,68.13334 103.986681,68.8 101.16,68.8 C95.6666392,68.8 91.25335,66.933352 87.92,63.2 C84.58665,59.466648 82.92,54.8266944 82.92,49.28 C82.92,43.7866392 84.5733168,39.240018 87.88,35.64 C91.1866832,32.039982 95.5599728,30.24 101,30.24 C103.880014,30.24 106.586654,30.8666604 109.12,32.12 C111.653346,33.3733396 113.693326,35.1466552 115.24,37.44 L115.4,37.44 L115.4,31.04 L119,31.04 Z M100.84,33.6 C96.7333128,33.6 93.3200136,35.1733176 90.6,38.32 C87.8799864,41.4666824 86.52,45.1199792 86.52,49.28 C86.52,53.7066888 87.8666532,57.5066508 90.56,60.68 C93.2533468,63.8533492 96.7599784,65.44 101.08,65.44 C105.613356,65.44 109.17332,63.8533492 111.76,60.68 C114.34668,57.5066508 115.64,53.5733568 115.64,48.88 C115.64,44.5066448 114.280014,40.8666812 111.56,37.96 C108.839986,35.0533188 105.266689,33.6 100.84,33.6 Z" id="a"></path>
            <path d="M77.8,49.84 L45.72,49.84 C45.6133328,54.4800232 46.959986,58.2399856 49.76,61.12 C52.560014,64.0000144 56.1466448,65.44 60.52,65.44 C63.2933472,65.44 65.813322,64.6800076 68.08,63.16 C70.346678,61.6399924 72.1733264,59.6000128 73.56,57.04 L76.6,58.8 C73.0799824,65.4667 67.5600376,68.8 60.04,68.8 C54.70664,68.8 50.3866832,66.9200188 47.08,63.16 C43.7733168,59.3999812 42.12,54.8266936 42.12,49.44 C42.12,44.10664 43.78665,39.573352 47.12,35.84 C50.45335,32.106648 54.7599736,30.24 60.04,30.24 C65.4800272,30.24 69.8133172,32.1333144 73.04,35.92 C76.2666828,39.7066856 77.8533336,44.3466392 77.8,49.84 Z M45.72,46.48 L74.2,46.48 C73.7199976,42.9599824 72.1733464,39.933346 69.56,37.4 C66.9466536,34.866654 63.8000184,33.6 60.12,33.6 C56.386648,33.6 53.1333472,34.866654 50.36,37.4 C47.5866528,39.933346 46.0400016,42.9599824 45.72,46.48 Z" id="e"></path>
            <path d="M0.92,68 L0.92,2 L4.52,2 L4.52,37.44 L4.68,37.44 C6.2266744,35.1466552 8.266654,33.3733396 10.8,32.12 C13.333346,30.8666604 16.0399856,30.24 18.92,30.24 C24.3600272,30.24 28.7333168,32.039982 32.04,35.64 C35.3466832,39.240018 37,43.7866392 37,49.28 C37,54.8266944 35.33335,59.466648 32,63.2 C28.66665,66.933352 24.2533608,68.8 18.76,68.8 C15.9333192,68.8 13.2133464,68.13334 10.6,66.8 C7.9866536,65.46666 6.01334,63.6533448 4.68,61.36 L4.52,61.36 L4.52,68 L0.92,68 Z M18.84,65.44 C23.2133552,65.44 26.73332,63.8533492 29.4,60.68 C32.06668,57.5066508 33.4,53.7066888 33.4,49.28 C33.4,45.0666456 32.0400136,41.4000156 29.32,38.28 C26.5999864,35.1599844 23.1600208,33.6 19,33.6 C14.466644,33.6 10.8800132,35.0933184 8.24,38.08 C5.5999868,41.0666816 4.28,44.826644 4.28,49.36 C4.28,53.8400224 5.5999868,57.6399844 8.24,60.76 C10.8800132,63.8800156 14.4133112,65.44 18.84,65.44 Z" id="b"></path>
        </g>
        <g id="professional" transform="translate(13.230003, 0.000000)" fill="white">
            <path d="M4.56,31.04 L4.56,37.68 L4.72,37.68 C6.05334,35.3866552 8.0266536,33.57334 10.64,32.24 C13.2533464,30.90666 15.9733192,30.24 18.8,30.24 C24.2933608,30.24 28.70665,32.1199812 32.04,35.88 C35.37335,39.6400188 37.04,44.2933056 37.04,49.84 C37.04,55.3333608 35.3866832,59.8666488 32.08,63.44 C28.7733168,67.0133512 24.4000272,68.8 18.96,68.8 C16.026652,68.8 13.293346,68.1733396 10.76,66.92 C8.226654,65.6666604 6.2133408,63.8933448 4.72,61.6 L4.56,61.6 L4.56,89.6 L0.96,89.6 L0.96,31.04 L4.56,31.04 Z M18.88,33.6 C14.346644,33.6 10.7866796,35.2133172 8.2,38.44 C5.6133204,41.6666828 4.32,45.6266432 4.32,50.32 C4.32,54.6933552 5.6799864,58.3066524 8.4,61.16 C11.1200136,64.0133476 14.6666448,65.44 19.04,65.44 C23.2533544,65.44 26.7066532,63.9200152 29.4,60.88 C32.0933468,57.8399848 33.44,54.186688 33.44,49.92 C33.44,45.4933112 32.10668,41.6666828 29.44,38.44 C26.77332,35.2133172 23.2533552,33.6 18.88,33.6 Z" id="p"></path>
            <path d="M49.36,31.04 L49.36,35.84 L49.52,35.84 C51.120008,32.106648 53.786648,30.24 57.52,30.24 C58.8000064,30.24 60.10666,30.5333304 61.44,31.12 L59.52,34.32 C58.6133288,33.8399976 57.760004,33.6 56.96,33.6 C55.893328,33.6 54.9466708,33.7866648 54.12,34.16 C53.2933292,34.5333352 52.613336,34.9733308 52.08,35.48 C51.546664,35.9866692 51.0933352,36.706662 50.72,37.64 C50.3466648,38.573338 50.0800008,39.3866632 49.92,40.08 C49.7599992,40.7733368 49.6266672,41.7333272 49.52,42.96 C49.4133328,44.1866728 49.36,45.0799972 49.36,45.64 L49.36,48.24 L49.36,49.12 L49.36,68 L45.76,68 L45.76,31.04 L49.36,31.04 Z" id="r"></path>
            <path d="M83.6,30.24 C89.0400272,30.24 93.6399812,32.0933148 97.4,35.8 C101.160019,39.5066852 103.04,44.0799728 103.04,49.52 C103.04,54.9600272 101.160019,59.5333148 97.4,63.24 C93.6399812,66.9466852 89.0400272,68.8 83.6,68.8 C78.3199736,68.8 73.8000188,66.9200188 70.04,63.16 C66.2799812,59.3999812 64.4,54.8800264 64.4,49.6 C64.4,44.26664 66.266648,39.7066856 70,35.92 C73.733352,32.1333144 78.26664,30.24 83.6,30.24 Z M83.36,33.6 C79.0399784,33.6 75.4000148,35.1733176 72.44,38.32 C69.4799852,41.4666824 68,45.2266448 68,49.6 C68,53.866688 69.4799852,57.5733176 72.44,60.72 C75.4000148,63.8666824 79.0399784,65.44 83.36,65.44 C87.893356,65.44 91.7066512,63.9200152 94.8,60.88 C97.8933488,57.8399848 99.44,54.0800224 99.44,49.6 C99.44,45.066644 97.906682,41.266682 94.84,38.2 C91.773318,35.133318 87.9466896,33.6 83.36,33.6 Z" id="o"></path>
            <path d="M115.36,34.4 L115.36,68 L111.76,68 L111.76,34.4 L107.68,34.4 L107.68,31.04 L111.76,31.04 L111.76,14.48 C111.76,10.1599784 112.239995,7.1466752 113.2,5.44 C114.906675,2.4533184 117.653314,0.96 121.44,0.96 C122.613339,0.96 123.679995,1.1466648 124.64,1.52 L124.64,4.8 C122.71999,4.4799984 121.733334,4.32 121.68,4.32 C120.186659,4.32 118.986671,4.6399968 118.08,5.28 C117.173329,5.9200032 116.533335,6.8666604 116.16,8.12 C115.786665,9.3733396 115.56,10.466662 115.48,11.4 C115.4,12.333338 115.36,13.599992 115.36,15.2 L115.36,31.04 L124.64,31.04 L124.64,34.4 L115.36,34.4 Z" id="f"></path>
            <path d="M163.04,49.84 L130.96,49.84 C130.853333,54.4800232 132.199986,58.2399856 135,61.12 C137.800014,64.0000144 141.386645,65.44 145.76,65.44 C148.533347,65.44 151.053322,64.6800076 153.32,63.16 C155.586678,61.6399924 157.413326,59.6000128 158.8,57.04 L161.84,58.8 C158.319982,65.4667 152.800038,68.8 145.28,68.8 C139.94664,68.8 135.626683,66.9200188 132.32,63.16 C129.013317,59.3999812 127.36,54.8266936 127.36,49.44 C127.36,44.10664 129.02665,39.573352 132.36,35.84 C135.69335,32.106648 139.999974,30.24 145.28,30.24 C150.720027,30.24 155.053317,32.1333144 158.28,35.92 C161.506683,39.7066856 163.093334,44.3466392 163.04,49.84 Z M130.96,46.48 L159.44,46.48 C158.959998,42.9599824 157.413346,39.933346 154.8,37.4 C152.186654,34.866654 149.040018,33.6 145.36,33.6 C141.626648,33.6 138.373347,34.866654 135.6,37.4 C132.826653,39.933346 131.280002,42.9599824 130.96,46.48 Z" id="e"></path>
            <path d="M190.4,36.16 L187.28,37.76 C185.999994,34.9866528 183.840015,33.6 180.8,33.6 C179.199992,33.6 177.746673,34.1733276 176.44,35.32 C175.133327,36.4666724 174.48,37.8133256 174.48,39.36 C174.48,40.960008 175.093327,42.2666616 176.32,43.28 C177.546673,44.2933384 179.039991,45.1066636 180.8,45.72 C182.560009,46.3333364 184.333324,46.9999964 186.12,47.72 C187.906676,48.4400036 189.413327,49.599992 190.64,51.2 C191.866673,52.800008 192.48,54.8266544 192.48,57.28 C192.48,60.6400168 191.333345,63.3999892 189.04,65.56 C186.746655,67.7200108 183.920017,68.8 180.56,68.8 C177.466651,68.8 174.760012,67.9200088 172.44,66.16 C170.119988,64.3999912 168.58667,62.0266816 167.84,59.04 L171.36,57.92 C172.906674,62.9333584 175.97331,65.44 180.56,65.44 C182.853345,65.44 184.813325,64.640008 186.44,63.04 C188.066675,61.439992 188.88,59.4666784 188.88,57.12 C188.88,55.0933232 188.266673,53.5733384 187.04,52.56 C185.813327,51.5466616 184.026678,50.640004 181.68,49.84 C179.973325,49.1999968 178.666671,48.680002 177.76,48.28 C176.853329,47.879998 175.77334,47.2666708 174.52,46.44 C173.26666,45.6133292 172.34667,44.6400056 171.76,43.52 C171.17333,42.3999944 170.88,41.0933408 170.88,39.6 C170.88,36.8799864 171.866657,34.6400088 173.84,32.88 C175.813343,31.1199912 178.186653,30.24 180.96,30.24 C182.88001,30.24 184.733324,30.7999944 186.52,31.92 C188.306676,33.0400056 189.599996,34.4533248 190.4,36.16 L190.4,36.16 Z" id="s"></path>
            <path d="M220.4,36.16 L217.28,37.76 C215.999994,34.9866528 213.840015,33.6 210.8,33.6 C209.199992,33.6 207.746673,34.1733276 206.44,35.32 C205.133327,36.4666724 204.48,37.8133256 204.48,39.36 C204.48,40.960008 205.093327,42.2666616 206.32,43.28 C207.546673,44.2933384 209.039991,45.1066636 210.8,45.72 C212.560009,46.3333364 214.333324,46.9999964 216.12,47.72 C217.906676,48.4400036 219.413327,49.599992 220.64,51.2 C221.866673,52.800008 222.48,54.8266544 222.48,57.28 C222.48,60.6400168 221.333345,63.3999892 219.04,65.56 C216.746655,67.7200108 213.920017,68.8 210.56,68.8 C207.466651,68.8 204.760012,67.9200088 202.44,66.16 C200.119988,64.3999912 198.58667,62.0266816 197.84,59.04 L201.36,57.92 C202.906674,62.9333584 205.97331,65.44 210.56,65.44 C212.853345,65.44 214.813325,64.640008 216.44,63.04 C218.066675,61.439992 218.88,59.4666784 218.88,57.12 C218.88,55.0933232 218.266673,53.5733384 217.04,52.56 C215.813327,51.5466616 214.026678,50.640004 211.68,49.84 C209.973325,49.1999968 208.666671,48.680002 207.76,48.28 C206.853329,47.879998 205.77334,47.2666708 204.52,46.44 C203.26666,45.6133292 202.34667,44.6400056 201.76,43.52 C201.17333,42.3999944 200.88,41.0933408 200.88,39.6 C200.88,36.8799864 201.866657,34.6400088 203.84,32.88 C205.813343,31.1199912 208.186653,30.24 210.96,30.24 C212.88001,30.24 214.733324,30.7999944 216.52,31.92 C218.306676,33.0400056 219.599996,34.4533248 220.4,36.16 L220.4,36.16 Z" id="s2"></path>
            <path d="M236.72,31.04 L236.72,68 L233.12,68 L233.12,31.04 L236.72,31.04 Z M234.96,15.44 C235.866671,15.44 236.639997,15.7599968 237.28,16.4 C237.920003,17.0400032 238.24,17.8133288 238.24,18.72 C238.24,19.6266712 237.920003,20.3999968 237.28,21.04 C236.639997,21.6800032 235.866671,22 234.96,22 C234.053329,22 233.280003,21.6800032 232.64,21.04 C231.999997,20.3999968 231.68,19.6266712 231.68,18.72 C231.68,17.8133288 231.999997,17.0400032 232.64,16.4 C233.280003,15.7599968 234.053329,15.44 234.96,15.44 Z" id="i"></path>
            <path d="M266.08,30.24 C271.520027,30.24 276.119981,32.0933148 279.88,35.8 C283.640019,39.5066852 285.52,44.0799728 285.52,49.52 C285.52,54.9600272 283.640019,59.5333148 279.88,63.24 C276.119981,66.9466852 271.520027,68.8 266.08,68.8 C260.799974,68.8 256.280019,66.9200188 252.52,63.16 C248.759981,59.3999812 246.88,54.8800264 246.88,49.6 C246.88,44.26664 248.746648,39.7066856 252.48,35.92 C256.213352,32.1333144 260.74664,30.24 266.08,30.24 Z M265.84,33.6 C261.519978,33.6 257.880015,35.1733176 254.92,38.32 C251.959985,41.4666824 250.48,45.2266448 250.48,49.6 C250.48,53.866688 251.959985,57.5733176 254.92,60.72 C257.880015,63.8666824 261.519978,65.44 265.84,65.44 C270.373356,65.44 274.186651,63.9200152 277.28,60.88 C280.373349,57.8399848 281.92,54.0800224 281.92,49.6 C281.92,45.066644 280.386682,41.266682 277.32,38.2 C274.253318,35.133318 270.42669,33.6 265.84,33.6 Z" id="o2"></path>
            <path d="M297.84,31.04 L297.84,36.8 L298,36.8 C299.066672,34.7199896 300.55999,33.1066724 302.48,31.96 C304.40001,30.8133276 306.559988,30.24 308.96,30.24 C313.493356,30.24 316.653324,31.5333204 318.44,34.12 C320.226676,36.7066796 321.12,40.5599744 321.12,45.68 L321.12,68 L317.52,68 L317.52,45.68 C317.52,43.7599904 317.426668,42.1733396 317.24,40.92 C317.053332,39.6666604 316.680003,38.4266728 316.12,37.2 C315.559997,35.9733272 314.65334,35.0666696 313.4,34.48 C312.14666,33.8933304 310.56001,33.6 308.64,33.6 C301.439964,33.6 297.84,38.9866128 297.84,49.76 L297.84,68 L294.24,68 L294.24,31.04 L297.84,31.04 Z" id="n"></path>
            <path d="M365.92,31.04 L365.92,68 L362.32,68 L362.32,61.36 L362.16,61.36 C360.82666,63.6533448 358.853346,65.46666 356.24,66.8 C353.626654,68.13334 350.906681,68.8 348.08,68.8 C342.586639,68.8 338.17335,66.933352 334.84,63.2 C331.50665,59.466648 329.84,54.8266944 329.84,49.28 C329.84,43.7866392 331.493317,39.240018 334.8,35.64 C338.106683,32.039982 342.479973,30.24 347.92,30.24 C350.800014,30.24 353.506654,30.8666604 356.04,32.12 C358.573346,33.3733396 360.613326,35.1466552 362.16,37.44 L362.32,37.44 L362.32,31.04 L365.92,31.04 Z M347.76,33.6 C343.653313,33.6 340.240014,35.1733176 337.52,38.32 C334.799986,41.4666824 333.44,45.1199792 333.44,49.28 C333.44,53.7066888 334.786653,57.5066508 337.48,60.68 C340.173347,63.8533492 343.679978,65.44 348,65.44 C352.533356,65.44 356.09332,63.8533492 358.68,60.68 C361.26668,57.5066508 362.56,53.5733568 362.56,48.88 C362.56,44.5066448 361.200014,40.8666812 358.48,37.96 C355.759986,35.0533188 352.186689,33.6 347.76,33.6 Z" id="a"></path>
            <!-- <path d="M381.84,2 L381.84,68 L378.24,68 L378.24,2 L381.84,2 Z" id="l"></path> -->
        </g>
        <g id="impressive" transform="translate(0.270000, 15.000000)" fill="white">
            <path d="M5.12,16.04 L5.12,53 L1.52,53 L1.52,16.04 L5.12,16.04 Z M3.36,0.44 C4.2666712,0.44 5.0399968,0.7599968 5.68,1.4 C6.3200032,2.0400032 6.64,2.8133288 6.64,3.72 C6.64,4.6266712 6.3200032,5.3999968 5.68,6.04 C5.0399968,6.6800032 4.2666712,7 3.36,7 C2.4533288,7 1.6800032,6.6800032 1.04,6.04 C0.3999968,5.3999968 0.08,4.6266712 0.08,3.72 C0.08,2.8133288 0.3999968,2.0400032 1.04,1.4 C1.6800032,0.7599968 2.4533288,0.44 3.36,0.44 Z" id="i"></path>
            <path d="M22.48,16.04 L22.48,20.68 L22.64,20.68 C23.4933376,18.9733248 24.7599916,17.6400048 26.44,16.68 C28.1200084,15.7199952 29.9466568,15.24 31.92,15.24 C36.8800248,15.24 40.3466568,17.4799776 42.32,21.96 C43.2800048,19.7733224 44.7199904,18.1066724 46.64,16.96 C48.5600096,15.8133276 50.719988,15.24 53.12,15.24 C57.4933552,15.24 60.4933252,16.506654 62.12,19.04 C63.7466748,21.573346 64.56,25.1599768 64.56,29.8 L64.56,53 L60.96,53 L60.96,29.32 C60.96,25.9066496 60.4400052,23.266676 59.4,21.4 C58.3599948,19.533324 56.240016,18.6 53.04,18.6 C46.6933016,18.6 43.52,22.9732896 43.52,31.72 L43.52,53 L39.92,53 L39.92,30.2 C39.92,26.6799824 39.3600056,23.8666772 38.24,21.76 C37.1199944,19.6533228 34.9333496,18.6 31.68,18.6 C25.546636,18.6 22.48,23.2932864 22.48,32.68 L22.48,53 L18.88,53 L18.88,16.04 L22.48,16.04 Z" id="m"></path>
            <path d="M80.48,16.04 L80.48,22.68 L80.64,22.68 C81.97334,20.3866552 83.9466536,18.57334 86.56,17.24 C89.1733464,15.90666 91.8933192,15.24 94.72,15.24 C100.213361,15.24 104.62665,17.1199812 107.96,20.88 C111.29335,24.6400188 112.96,29.2933056 112.96,34.84 C112.96,40.3333608 111.306683,44.8666488 108,48.44 C104.693317,52.0133512 100.320027,53.8 94.88,53.8 C91.946652,53.8 89.213346,53.1733396 86.68,51.92 C84.146654,50.6666604 82.1333408,48.8933448 80.64,46.6 L80.48,46.6 L80.48,74.6 L76.88,74.6 L76.88,16.04 L80.48,16.04 Z M94.8,18.6 C90.266644,18.6 86.7066796,20.2133172 84.12,23.44 C81.5333204,26.6666828 80.24,30.6266432 80.24,35.32 C80.24,39.6933552 81.5999864,43.3066524 84.32,46.16 C87.0400136,49.0133476 90.5866448,50.44 94.96,50.44 C99.1733544,50.44 102.626653,48.9200152 105.32,45.88 C108.013347,42.8399848 109.36,39.186688 109.36,34.92 C109.36,30.4933112 108.02668,26.6666828 105.36,23.44 C102.69332,20.2133172 99.1733552,18.6 94.8,18.6 Z" id="p"></path>
            <path d="M125.28,16.04 L125.28,20.84 L125.44,20.84 C127.040008,17.106648 129.706648,15.24 133.44,15.24 C134.720006,15.24 136.02666,15.5333304 137.36,16.12 L135.44,19.32 C134.533329,18.8399976 133.680004,18.6 132.88,18.6 C131.813328,18.6 130.866671,18.7866648 130.04,19.16 C129.213329,19.5333352 128.533336,19.9733308 128,20.48 C127.466664,20.9866692 127.013335,21.706662 126.64,22.64 C126.266665,23.573338 126.000001,24.3866632 125.84,25.08 C125.679999,25.7733368 125.546667,26.7333272 125.44,27.96 C125.333333,29.1866728 125.28,30.0799972 125.28,30.64 L125.28,33.24 L125.28,34.12 L125.28,53 L121.68,53 L121.68,16.04 L125.28,16.04 Z" id="r"></path>
            <!-- <path d="M176,34.84 L143.92,34.84 C143.813333,39.4800232 145.159986,43.2399856 147.96,46.12 C150.760014,49.0000144 154.346645,50.44 158.72,50.44 C161.493347,50.44 164.013322,49.6800076 166.28,48.16 C168.546678,46.6399924 170.373326,44.6000128 171.76,42.04 L174.8,43.8 C171.279982,50.4667 165.760038,53.8 158.24,53.8 C152.90664,53.8 148.586683,51.9200188 145.28,48.16 C141.973317,44.3999812 140.32,39.8266936 140.32,34.44 C140.32,29.10664 141.98665,24.573352 145.32,20.84 C148.65335,17.106648 152.959974,15.24 158.24,15.24 C163.680027,15.24 168.013317,17.1333144 171.24,20.92 C174.466683,24.7066856 176.053334,29.3466392 176,34.84 Z M143.92,31.48 L172.4,31.48 C171.919998,27.9599824 170.373346,24.933346 167.76,22.4 C165.146654,19.866654 162.000018,18.6 158.32,18.6 C154.586648,18.6 151.333347,19.866654 148.56,22.4 C145.786653,24.933346 144.240002,27.9599824 143.92,31.48 Z" id="e"></path>
            <path d="M203.36,21.16 L200.24,22.76 C198.959994,19.9866528 196.800015,18.6 193.76,18.6 C192.159992,18.6 190.706673,19.1733276 189.4,20.32 C188.093327,21.4666724 187.44,22.8133256 187.44,24.36 C187.44,25.960008 188.053327,27.2666616 189.28,28.28 C190.506673,29.2933384 191.999991,30.1066636 193.76,30.72 C195.520009,31.3333364 197.293324,31.9999964 199.08,32.72 C200.866676,33.4400036 202.373327,34.599992 203.6,36.2 C204.826673,37.800008 205.44,39.8266544 205.44,42.28 C205.44,45.6400168 204.293345,48.3999892 202,50.56 C199.706655,52.7200108 196.880017,53.8 193.52,53.8 C190.426651,53.8 187.720012,52.9200088 185.4,51.16 C183.079988,49.3999912 181.54667,47.0266816 180.8,44.04 L184.32,42.92 C185.866674,47.9333584 188.93331,50.44 193.52,50.44 C195.813345,50.44 197.773325,49.640008 199.4,48.04 C201.026675,46.439992 201.84,44.4666784 201.84,42.12 C201.84,40.0933232 201.226673,38.5733384 200,37.56 C198.773327,36.5466616 196.986678,35.640004 194.64,34.84 C192.933325,34.1999968 191.626671,33.680002 190.72,33.28 C189.813329,32.879998 188.73334,32.2666708 187.48,31.44 C186.22666,30.6133292 185.30667,29.6400056 184.72,28.52 C184.13333,27.3999944 183.84,26.0933408 183.84,24.6 C183.84,21.8799864 184.826657,19.6400088 186.8,17.88 C188.773343,16.1199912 191.146653,15.24 193.92,15.24 C195.84001,15.24 197.693324,15.7999944 199.48,16.92 C201.266676,18.0400056 202.559996,19.4533248 203.36,21.16 L203.36,21.16 Z" id="s"></path>
            <path d="M233.36,21.16 L230.24,22.76 C228.959994,19.9866528 226.800015,18.6 223.76,18.6 C222.159992,18.6 220.706673,19.1733276 219.4,20.32 C218.093327,21.4666724 217.44,22.8133256 217.44,24.36 C217.44,25.960008 218.053327,27.2666616 219.28,28.28 C220.506673,29.2933384 221.999991,30.1066636 223.76,30.72 C225.520009,31.3333364 227.293324,31.9999964 229.08,32.72 C230.866676,33.4400036 232.373327,34.599992 233.6,36.2 C234.826673,37.800008 235.44,39.8266544 235.44,42.28 C235.44,45.6400168 234.293345,48.3999892 232,50.56 C229.706655,52.7200108 226.880017,53.8 223.52,53.8 C220.426651,53.8 217.720012,52.9200088 215.4,51.16 C213.079988,49.3999912 211.54667,47.0266816 210.8,44.04 L214.32,42.92 C215.866674,47.9333584 218.93331,50.44 223.52,50.44 C225.813345,50.44 227.773325,49.640008 229.4,48.04 C231.026675,46.439992 231.84,44.4666784 231.84,42.12 C231.84,40.0933232 231.226673,38.5733384 230,37.56 C228.773327,36.5466616 226.986678,35.640004 224.64,34.84 C222.933325,34.1999968 221.626671,33.680002 220.72,33.28 C219.813329,32.879998 218.73334,32.2666708 217.48,31.44 C216.22666,30.6133292 215.30667,29.6400056 214.72,28.52 C214.13333,27.3999944 213.84,26.0933408 213.84,24.6 C213.84,21.8799864 214.826657,19.6400088 216.8,17.88 C218.773343,16.1199912 221.146653,15.24 223.92,15.24 C225.84001,15.24 227.693324,15.7999944 229.48,16.92 C231.266676,18.0400056 232.559996,19.4533248 233.36,21.16 L233.36,21.16 Z" id="s2"></path>
            <path d="M249.68,16.04 L249.68,53 L246.08,53 L246.08,16.04 L249.68,16.04 Z M247.92,0.44 C248.826671,0.44 249.599997,0.7599968 250.24,1.4 C250.880003,2.0400032 251.2,2.8133288 251.2,3.72 C251.2,4.6266712 250.880003,5.3999968 250.24,6.04 C249.599997,6.6800032 248.826671,7 247.92,7 C247.013329,7 246.240003,6.6800032 245.6,6.04 C244.959997,5.3999968 244.64,4.6266712 244.64,3.72 C244.64,2.8133288 244.959997,2.0400032 245.6,1.4 C246.240003,0.7599968 247.013329,0.44 247.92,0.44 Z" id="i2"></path> -->
            <path d="M261.36,16.04 L274.72,46.52 L287.84,16.04 L291.52,16.04 L274.64,55 L257.68,16.04 L261.36,16.04 Z" id="v"></path>
            <path d="M330.16,34.84 L298.08,34.84 C297.973333,39.4800232 299.319986,43.2399856 302.12,46.12 C304.920014,49.0000144 308.506645,50.44 312.88,50.44 C315.653347,50.44 318.173322,49.6800076 320.44,48.16 C322.706678,46.6399924 324.533326,44.6000128 325.92,42.04 L328.96,43.8 C325.439982,50.4667 319.920038,53.8 312.4,53.8 C307.06664,53.8 302.746683,51.9200188 299.44,48.16 C296.133317,44.3999812 294.48,39.8266936 294.48,34.44 C294.48,29.10664 296.14665,24.573352 299.48,20.84 C302.81335,17.106648 307.119974,15.24 312.4,15.24 C317.840027,15.24 322.173317,17.1333144 325.4,20.92 C328.626683,24.7066856 330.213334,29.3466392 330.16,34.84 Z M298.08,31.48 L326.56,31.48 C326.079998,27.9599824 324.533346,24.933346 321.92,22.4 C319.306654,19.866654 316.160018,18.6 312.48,18.6 C308.746648,18.6 305.493347,19.866654 302.72,22.4 C299.946653,24.933346 298.400002,27.9599824 298.08,31.48 Z" id="e"></path>
        </g>
        <g id="clean" transform="translate(86.400002, 2.000000)" fill="white">
            <path d="M32.1,32.8 L32.1,37.6 C28.4199816,33.59998 24.0733584,31.6 19.06,31.6 C14.793312,31.6 11.1800148,33.1733176 8.22,36.32 C5.2599852,39.4666824 3.78,43.173312 3.78,47.44 C3.78,51.706688 5.246652,55.439984 8.18,58.64 C11.113348,61.840016 14.713312,63.44 18.98,63.44 C24.4200272,63.44 28.9533152,61.2266888 32.58,56.8 L32.58,61.68 C28.6866472,65.0933504 24.206692,66.8 19.14,66.8 C13.6999728,66.8 9.180018,64.933352 5.58,61.2 C1.979982,57.466648 0.18,52.8800272 0.18,47.44 C0.18,42.0533064 2.0066484,37.5066852 5.66,33.8 C9.3133516,30.0933148 13.8333064,28.24 19.22,28.24 C24.2333584,28.24 28.5266488,29.7599848 32.1,32.8 L32.1,32.8 Z" id="c"></path>
            <path d="M45.54,0 L45.54,66 L41.94,66 L41.94,0 L45.54,0 Z" id="l"></path>
            <!-- <path d="M89.94,47.84 L57.86,47.84 C57.7533328,52.4800232 59.099986,56.2399856 61.9,59.12 C64.700014,62.0000144 68.2866448,63.44 72.66,63.44 C75.4333472,63.44 77.953322,62.6800076 80.22,61.16 C82.486678,59.6399924 84.3133264,57.6000128 85.7,55.04 L88.74,56.8 C85.2199824,63.4667 79.7000376,66.8 72.18,66.8 C66.84664,66.8 62.5266832,64.9200188 59.22,61.16 C55.9133168,57.3999812 54.26,52.8266936 54.26,47.44 C54.26,42.10664 55.92665,37.573352 59.26,33.84 C62.59335,30.106648 66.8999736,28.24 72.18,28.24 C77.6200272,28.24 81.9533172,30.1333144 85.18,33.92 C88.4066828,37.7066856 89.9933336,42.3466392 89.94,47.84 Z M57.86,44.48 L86.34,44.48 C85.8599976,40.9599824 84.3133464,37.933346 81.7,35.4 C79.0866536,32.866654 75.9400184,31.6 72.26,31.6 C68.526648,31.6 65.2733472,32.866654 62.5,35.4 C59.7266528,37.933346 58.1800016,40.9599824 57.86,44.48 Z" id="e"></path> -->
            <path d="M131.14,29.04 L131.14,66 L127.54,66 L127.54,59.36 L127.38,59.36 C126.04666,61.6533448 124.073346,63.46666 121.46,64.8 C118.846654,66.13334 116.126681,66.8 113.3,66.8 C107.806639,66.8 103.39335,64.933352 100.06,61.2 C96.72665,57.466648 95.06,52.8266944 95.06,47.28 C95.06,41.7866392 96.7133168,37.240018 100.02,33.64 C103.326683,30.039982 107.699973,28.24 113.14,28.24 C116.020014,28.24 118.726654,28.8666604 121.26,30.12 C123.793346,31.3733396 125.833326,33.1466552 127.38,35.44 L127.54,35.44 L127.54,29.04 L131.14,29.04 Z M112.98,31.6 C108.873313,31.6 105.460014,33.1733176 102.74,36.32 C100.019986,39.4666824 98.66,43.1199792 98.66,47.28 C98.66,51.7066888 100.006653,55.5066508 102.7,58.68 C105.393347,61.8533492 108.899978,63.44 113.22,63.44 C117.753356,63.44 121.31332,61.8533492 123.9,58.68 C126.48668,55.5066508 127.78,51.5733568 127.78,46.88 C127.78,42.5066448 126.420014,38.8666812 123.7,35.96 C120.979986,33.0533188 117.406689,31.6 112.98,31.6 Z" id="a"></path>
            <path d="M147.06,29.04 L147.06,34.8 L147.22,34.8 C148.286672,32.7199896 149.77999,31.1066724 151.7,29.96 C153.62001,28.8133276 155.779988,28.24 158.18,28.24 C162.713356,28.24 165.873324,29.5333204 167.66,32.12 C169.446676,34.7066796 170.34,38.5599744 170.34,43.68 L170.34,66 L166.74,66 L166.74,43.68 C166.74,41.7599904 166.646668,40.1733396 166.46,38.92 C166.273332,37.6666604 165.900003,36.4266728 165.34,35.2 C164.779997,33.9733272 163.87334,33.0666696 162.62,32.48 C161.36666,31.8933304 159.78001,31.6 157.86,31.6 C150.659964,31.6 147.06,36.9866128 147.06,47.76 L147.06,66 L143.46,66 L143.46,29.04 L147.06,29.04 Z" id="n"></path>
        </g>
</svg>
      <h2>résumé</h2>
    </div>
              
            
!

CSS

              
                body {
  background: #F85931;
  text-align: center;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "kern=1", "liga=1", "dlig=1", "hlig=1";
  -moz-font-feature-settings: "kern" on, "liga" on, "dlig" on, "hlig" on;
  -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig";
  -ms-font-feature-settings: "kern", "liga", "dlig", "hlig";
  font-feature-settings: "kern", "liga", "dlig", "hlig";
}
h2 {
  display: inline-block;
  font-family: "Latin Modern Roman";
  font-weight: 400;
  font-style: italic;
  font-size: 80px;
  color: #FFFFFF;
  line-height: 90px;
  margin-left: 20px;
  top: -23px;
  position: relative;
  opacity: 0.4;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
h4 {
  color: white;  /* font-family: "Latin Modern Roman"; */
  font-family: Georgia;
  font-style: italic;
  font-weight: normal;
  text-align: center;
}
a {
  color: white;
}
svg {
  display: inline-block;
  width: 396px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
svg path,
svg polygon,
svg g {
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.type:not(.beautiful) #beautiful #b,
.type:not(.beautiful) #beautiful #a,
.type:not(.beautiful) #beautiful #t,
.type:not(.beautiful) #beautiful #f,
.type:not(.professional) #professional #p,
.type:not(.professional) #professional #o,
.type.beautiful #professional #e,
.type.beautiful #professional #s2,
.type.clean #professional #s2,
.type:not(.professional) #professional #o2,
.type:not(.professional) #professional #a,
.type:not(.impressive) #impressive #m,
.type:not(.impressive) #impressive #r,
.type:not(.impressive) #impressive #e,
.type:not(.clean) #clean #c,
.type:not(.clean) #clean #e,
.type:not(.clean) #clean #n {
  transform: translateY(90px);
  opacity: 0;
}
.type:not(.beautiful) #beautiful #e,
.type:not(.beautiful) #beautiful #u,
.type:not(.beautiful) #beautiful #i,
.type:not(.beautiful) #beautiful #u,
.type:not(.beautiful) #beautiful #u2,
.type.clean #beautiful #l,
.type.impressive #beautiful #l,
.type:not(.professional) #professional #r,
.type:not(.professional) #professional #f,
.type.beautiful #professional #s,
.type.clean #professional #s,
.type.beautiful #professional #i,
.type.clean #professional #i,
.type:not(.professional) #professional #n,
.type:not(.impressive) #impressive #i,
.type:not(.impressive) #impressive #p,
.type:not(.impressive) #impressive #v,
.type:not(.clean) #clean #l,
.type:not(.clean) #clean #a {
  transform: translateY(-90px);
  opacity: 0;
}
              
            
!

JS

              
                 $(function(){
    $('#type').click(function(){
        if( $(this).hasClass('beautiful') ){
            $(this).removeClass('beautiful').addClass('professional');
        } else if( $(this).hasClass('professional') ){
            $(this).removeClass('professional').addClass('impressive');
        } else if( $(this).hasClass('impressive') ){
            $(this).removeClass('impressive').addClass('clean');
        } else if( $(this).hasClass('clean') ){
            $(this).removeClass('clean').addClass('beautiful');
        } 
    });
 })
 
 var element = document.getElementById("type"), 
    states = [
      	"beautiful",
        "professional",
        "impressive",
        "clean"
    ],
    statesLength = states.length - 1,
    i = 0,
    currentState = 0;

window.setInterval(function () {
    element.className = "type";
    currentState = (currentState + 1 > statesLength) ? 0 : currentState + 1;
    element.classList.add(states[currentState]);
}, 2000);
              
            
!
999px

Console