cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Keyshape -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 1280 720" style="background: #2f243f; white-space: pre;">

    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" transform="translate(592.764,381.201) scale(2,2)" style="animation: Logo_t 0.4s linear 1.6s both;">
        <g id="State-1" stroke-width="7" transform="translate(-202,-97)">
            <g id="Group" transform="translate(204,99)">
                <path id="Purple" d="M11.5,1.5L11.5,1.5" stroke="#9777A8" transform="translate(0,-11)" style="animation: Purple_t 0.4s linear 0.6s both, Purple_d 0.4s linear 1s both;"/>
                <path id="Red" d="M21.5,1.5L21.5,1.5" stroke="#E26566" transform="translate(0,-11)" style="animation: Red_d 0.4s linear 1s both;"/>
                <path id="Orange" d="M31.5,1.5L31.5,1.5" stroke="#F4A160" transform="translate(0,-11)" style="animation: Orange_t 0.4s linear 0.6s both, Orange_d 0.4s linear 1s both;"/>
                <path id="Blue" d="M41.5,1.5L41.5,1.5" stroke="#5FAFE2" transform="translate(0,-11)" style="animation: Blue_t 0.4s linear 0.6s both, Blue_d 0.4s linear 1s both;"/>
                <path id="Green" d="M1.5,1.5L1.5,1.5" stroke="#33B18F" transform="translate(0,-11)" style="animation: Green_t 0.4s linear 0.6s both, Green_d 0.4s linear 1s both;"/>
            </g>
        </g>
    </g>
    <g id="Sigle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0" transform="translate(715.087,332.451) scale(2,2)" style="animation: Sigle_t 0.4s linear 1.6s both, Sigle_o 0.6s linear 1.6s both;">
        <g id="State-5" fill="#FFFFFF" transform="translate(-123,-84)">
            <g id="Group-2" transform="translate(123,84)">
                <path id="logo-T" d="M8.13955,9.947L1.09608,9.947C0.49026,9.947,0,9.45574,0,8.85021L0,2.16132C0,1.55511,0.49026,1.06452,1.09608,1.06452L27.8662,1.06452C28.4713,1.06452,28.9623,1.55511,28.9623,2.16132L28.9623,8.85021C28.9623,9.45574,28.4713,9.947,27.8662,9.947L20.822,9.947C20.2169,9.947,19.7266,10.4383,19.7266,11.0438L19.7266,31.3718C19.7266,31.9774,19.2357,32.4679,18.6306,32.4679L10.3317,32.4679C9.72589,32.4679,9.23563,31.9774,9.23563,31.3718L9.23563,11.0438C9.23563,10.4383,8.74468,9.947,8.13955,9.947"/>
                <path id="logo-R" d="M31.644,2.1613C31.644,1.55578,32.1414,1.06452,32.7546,1.06452L47.1815,1.06452C52.8152,1.06452,56.4043,2.45482,58.6304,4.65315C60.5386,6.53812,61.5377,8.87056,61.5377,12.1007L61.5377,12.1903C61.5377,16.3352,59.5617,19.3388,56.3197,21.2354C55.7668,21.5584,55.6012,22.2713,55.9643,22.7947L61.483,30.7513C61.9874,31.4793,61.4594,32.4679,60.5663,32.4679L51.1412,32.4679C50.7685,32.4679,50.42,32.2825,50.2149,31.9753L44.5465,23.4953L44.4565,23.4953L43.3853,23.4953C42.7721,23.4953,42.2746,23.9859,42.2746,24.5921L42.2746,31.3712C42.2746,31.9767,41.7778,32.4679,41.164,32.4679L32.7546,32.4679C32.1414,32.4679,31.644,31.9767,31.644,31.3712L31.644,2.1613ZM46.8635,16.0034C49.4077,16.0034,50.9528,14.8819,50.9528,12.9525L50.9528,12.8636C50.9528,10.8445,49.3633,9.85786,46.9092,9.85786L43.3853,9.85786C42.7721,9.85786,42.2746,10.3484,42.2746,10.954L42.2746,14.9066C42.2746,15.5121,42.7721,16.0034,43.3853,16.0034L46.8635,16.0034Z"/>
                <path id="logo-O" d="M62.7686,16.6367L62.7686,16.546C62.7686,7.39596,70.3681,0.0926068,80.1992,0.0926068C90.0281,0.0926068,97.5374,7.30521,97.5374,16.4566L97.5374,16.546C97.5374,25.6973,89.9379,33,80.1075,33C70.2772,33,62.7686,25.7874,62.7686,16.6367ZM86.7971,16.6367L86.7971,16.546C86.7971,12.8052,84.2033,9.4241,80.1075,9.4241C76.0576,9.4241,73.5082,12.7599,73.5082,16.4566L73.5082,16.546C73.5082,20.288,76.102,23.6692,80.1992,23.6692C84.2484,23.6692,86.7971,20.3334,86.7971,16.6367Z"/>
                <path id="logo-O2" d="M99.4123,16.6367L99.4123,16.546C99.4123,7.39596,107.012,0.0926068,116.843,0.0926068C126.672,0.0926068,134.181,7.30521,134.181,16.4566L134.181,16.546C134.181,25.6973,126.582,33,116.751,33C106.921,33,99.4123,25.7874,99.4123,16.6367ZM123.441,16.6367L123.441,16.546C123.441,12.8052,120.847,9.4241,116.751,9.4241C112.701,9.4241,110.152,12.7599,110.152,16.4566L110.152,16.546C110.152,20.288,112.746,23.6692,116.843,23.6692C120.892,23.6692,123.441,20.3334,123.441,16.6367Z"/>
                <path id="logo-P" d="M137.303,2.16064C137.303,1.55511,137.798,1.06452,138.409,1.06452L151.561,1.06452C159.98,1.06452,165.729,4.78802,165.729,12.235L165.729,12.3247C165.729,19.9064,159.89,23.944,151.335,23.944L149.001,23.944C148.389,23.944,147.894,24.4346,147.894,25.0408L147.894,31.3711C147.894,31.9774,147.399,32.4679,146.788,32.4679L138.409,32.4679C137.798,32.4679,137.303,31.9774,137.303,31.3711L137.303,2.16064ZM150.747,16.4518C153.462,16.4518,155.273,15.2408,155.273,12.9979L155.273,12.9083C155.273,10.6203,153.599,9.453,150.791,9.453L149.001,9.453C148.389,9.453,147.894,9.94427,147.894,10.5498L147.894,15.355C147.894,15.9606,148.389,16.4518,149.001,16.4518L150.747,16.4518Z"/>
                <path id="logo-E" d="M169.487,1.06452L193.386,1.06452C194.276,1.06452,194.999,1.77746,194.999,2.65734L194.999,8.0851C194.999,8.96498,194.276,9.67792,193.386,9.67792L179.937,9.67792C179.047,9.67792,178.325,10.3909,178.325,11.2707L178.325,11.2707C178.325,12.1499,179.047,12.8629,179.937,12.8629L192.25,12.8629C193.141,12.8629,193.863,13.5765,193.863,14.4557L193.863,18.8517C193.863,19.7316,193.141,20.4445,192.25,20.4445L179.937,20.4445C179.047,20.4445,178.325,21.1574,178.325,22.0373L178.325,22.2617C178.325,23.1409,179.047,23.8545,179.937,23.8545L193.614,23.8545C194.504,23.8545,195.227,24.5675,195.227,25.4467L195.227,30.8751C195.227,31.7543,194.504,32.4679,193.614,32.4679L169.487,32.4679C168.596,32.4679,167.874,31.7543,167.874,30.8751L167.874,2.65734C167.874,1.77746,168.596,1.06452,169.487,1.06452"/>
                <path id="logo-R2" d="M197.909,2.1613C197.909,1.55578,198.406,1.06452,199.02,1.06452L213.446,1.06452C219.08,1.06452,222.669,2.45482,224.895,4.65315C226.804,6.53812,227.803,8.87056,227.803,12.1007L227.803,12.1903C227.803,16.3352,225.827,19.3388,222.585,21.2354C222.032,21.5584,221.866,22.2713,222.229,22.7947L227.748,30.7513C228.252,31.4793,227.724,32.4679,226.831,32.4679L217.406,32.4679C217.033,32.4679,216.685,32.2825,216.48,31.9753L210.811,23.4953L210.721,23.4953L209.65,23.4953C209.037,23.4953,208.54,23.9859,208.54,24.5921L208.54,31.3712C208.54,31.9767,208.043,32.4679,207.429,32.4679L199.02,32.4679C198.406,32.4679,197.909,31.9767,197.909,31.3712L197.909,2.1613ZM213.128,16.0034C215.673,16.0034,217.218,14.8819,217.218,12.9525L217.218,12.8636C217.218,10.8445,215.628,9.85786,213.174,9.85786L209.65,9.85786C209.037,9.85786,208.54,10.3484,208.54,10.954L208.54,14.9066C208.54,15.5121,209.037,16.0034,209.65,16.0034L213.128,16.0034Z"/>
                <path id="logo-S" d="M230.5,23.4133L230.5,23.4133C231.824,21.8492,234.047,21.4407,235.894,22.3438C238.531,23.6343,241.322,24.1942,243.996,24.1942C245.892,24.1942,246.703,23.7025,246.703,22.8533L246.703,22.7632C246.703,21.869,245.711,21.3772,242.328,20.7061C235.243,19.2751,229.017,17.2629,229.017,10.6439L229.017,10.5539C229.017,4.60612,233.71,0,242.417,0C246.099,0,249.205,0.523159,251.893,1.56948C254.565,2.60966,255.521,5.87821,253.841,8.18571L253.829,8.20208C252.599,9.89297,250.355,10.4359,248.422,9.61331C246.26,8.69318,244.017,8.2737,242.057,8.2737C240.477,8.2737,239.755,8.80981,239.755,9.57034L239.755,9.65969C239.755,10.5089,240.613,11.0464,243.952,11.6718C252.028,13.1479,257.442,15.4738,257.442,21.7797L257.442,21.869C257.442,28.4436,251.983,32.4679,243.5,32.4679C239.302,32.4679,235.376,31.7006,232.037,30.1898C229.393,28.9927,228.632,25.6212,230.5,23.4133"/>
            </g>
        </g>
    </g>
    <g id="Baseline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0" transform="translate(921.971,423.951) scale(2,2)" style="animation: Baseline_t 0.4s linear 1.6s both, Baseline_o 0.7s linear 2.3s both;">
        <g id="State-6" fill="#FFFFFF" transform="translate(-226,-132)">
            <g id="Web-Republic" transform="translate(226,132)">
                <path id="baseline-W" d="M5.3591,6.93776L7.52369,0.26556L10.3691,0.26556L12.5162,6.93776L14.9426,0.26556L17.8928,0.26556L13.6334,11.8672L11.6085,11.8672L8.93766,3.80083L6.28429,11.8672L4.25935,11.8672L0,0.26556L2.95012,0.26556Z"/>
                <path id="baseline-E" d="M29.8853,0.26556L29.8853,2.57261L23.8105,2.57261L23.8105,4.96266L29.2743,4.96266L29.2743,7.17012L23.8105,7.17012L23.8105,9.57676L30.0773,9.57676L30.0773,11.8672L21.0873,11.8672L21.0873,0.26556Z"/>
                <path id="baseline-B" d="M39.591,11.8672L34.2494,11.8672L34.2494,0.26556L38.9975,0.26556C39.8238,0.26556,40.5366,0.359612,41.1359,0.547718C41.7352,0.735824,42.1862,0.990317,42.4888,1.3112C43.0357,1.90872,43.3092,2.58368,43.3092,3.3361C43.3092,4.24343,43.0008,4.91839,42.384,5.361C42.1746,5.51591,42.0291,5.61272,41.9476,5.65145C41.8662,5.69018,41.7207,5.7538,41.5112,5.84232C42.2677,5.99723,42.8699,6.32088,43.318,6.81328C43.766,7.30567,43.99,7.91701,43.99,8.6473C43.99,9.45505,43.6991,10.1687,43.1172,10.7884C42.4422,11.5076,41.2668,11.8672,39.591,11.8672ZM36.9726,4.96266L38.2643,4.96266C39.0208,4.96266,39.5823,4.8852,39.9489,4.73029C40.3155,4.57538,40.4988,4.24067,40.4988,3.72614C40.4988,3.21162,40.33,2.87137,39.9925,2.70539C39.655,2.53942,39.0848,2.45643,38.2818,2.45643L36.9726,2.45643L36.9726,4.96266ZM36.9726,9.67635L38.8404,9.67635C39.6201,9.67635,40.2049,9.58506,40.5948,9.40249C40.9846,9.21992,41.1796,8.86031,41.1796,8.32365C41.1796,7.787,40.973,7.43292,40.5599,7.26141C40.1467,7.0899,39.4863,7.00415,38.5786,7.00415L36.9726,7.00415L36.9726,9.67635Z"/>
                <path id="baseline-R" d="M64.2743,4.11618C64.2743,5.97511,63.5004,7.17565,61.9526,7.71784L65.0424,11.8672L61.6908,11.8672L58.985,8.16598L57.0998,8.16598L57.0998,11.8672L54.3766,11.8672L54.3766,0.26556L59.0025,0.26556C60.8994,0.26556,62.2523,0.569845,63.0611,1.17842C63.8699,1.787,64.2743,2.76624,64.2743,4.11618ZM60.9925,5.49378C61.33,5.20608,61.4988,4.74966,61.4988,4.12448C61.4988,3.49931,61.3242,3.07054,60.9751,2.83817C60.6259,2.60581,60.015,2.48963,59.1421,2.48963L57.0998,2.48963L57.0998,5.92531L59.0898,5.92531C60.0208,5.92531,60.655,5.78147,60.9925,5.49378Z"/>
                <path id="baseline-E2" d="M77.611,0.26556L77.611,2.57261L71.5362,2.57261L71.5362,4.96266L77,4.96266L77,7.17012L71.5362,7.17012L71.5362,9.57676L77.803,9.57676L77.803,11.8672L68.813,11.8672L68.813,0.26556Z"/>
                <path id="baseline-P" d="M90.3803,1.3029C91.2357,1.99447,91.6633,3.0567,91.6633,4.48963C91.6633,5.92255,91.224,6.97095,90.3454,7.63485C89.4667,8.29876,88.1255,8.63071,86.3217,8.63071L84.6983,8.63071L84.6983,11.8672L81.9751,11.8672L81.9751,0.26556L86.2868,0.26556C88.1604,0.26556,89.5249,0.611338,90.3803,1.3029ZM88.3815,5.86722C88.7074,5.51867,88.8703,5.00969,88.8703,4.34025C88.8703,3.67081,88.6579,3.19502,88.2332,2.91286C87.8084,2.6307,87.148,2.48963,86.2519,2.48963L84.6983,2.48963L84.6983,6.39004L86.5312,6.39004C87.4389,6.39004,88.0557,6.21577,88.3815,5.86722Z"/>
                <path id="baseline-U" d="M100.601,9.67635C101.369,9.67635,101.977,9.40802,102.425,8.87137C102.873,8.33471,103.097,7.60166,103.097,6.6722L103.097,0.26556L105.82,0.26556L105.82,6.75519C105.82,8.43708,105.332,9.7289,104.354,10.6307C103.377,11.5325,102.126,11.9834,100.601,11.9834C99.0765,11.9834,97.8225,11.5297,96.8392,10.6224C95.8558,9.71507,95.3641,8.42601,95.3641,6.75519L95.3641,0.26556L98.0873,0.26556L98.0873,6.6722C98.0873,7.60166,98.3142,8.33471,98.7681,8.87137C99.2219,9.40802,99.8329,9.67635,100.601,9.67635L100.601,9.67635Z"/>
                <path id="baseline-B2" d="M115.736,11.8672L110.394,11.8672L110.394,0.26556L115.142,0.26556C115.968,0.26556,116.681,0.359612,117.281,0.547718C117.88,0.735824,118.331,0.990317,118.633,1.3112C119.18,1.90872,119.454,2.58368,119.454,3.3361C119.454,4.24343,119.145,4.91839,118.529,5.361C118.319,5.51591,118.174,5.61272,118.092,5.65145C118.011,5.69018,117.865,5.7538,117.656,5.84232C118.412,5.99723,119.015,6.32088,119.463,6.81328C119.911,7.30567,120.135,7.91701,120.135,8.6473C120.135,9.45505,119.844,10.1687,119.262,10.7884C118.587,11.5076,117.411,11.8672,115.736,11.8672ZM113.117,4.96266L114.409,4.96266C115.165,4.96266,115.727,4.8852,116.094,4.73029C116.46,4.57538,116.643,4.24067,116.643,3.72614C116.643,3.21162,116.475,2.87137,116.137,2.70539C115.8,2.53942,115.229,2.45643,114.426,2.45643L113.117,2.45643L113.117,4.96266ZM113.117,9.67635L114.985,9.67635C115.765,9.67635,116.35,9.58506,116.739,9.40249C117.129,9.21992,117.324,8.86031,117.324,8.32365C117.324,7.787,117.118,7.43292,116.704,7.26141C116.291,7.0899,115.631,7.00415,114.723,7.00415L113.117,7.00415L113.117,9.67635Z"/>
                <path id="baseline-L" d="M124.167,11.8672L124.167,0.26556L126.89,0.26556L126.89,9.56017L132.092,9.56017L132.092,11.8672Z"/>
                <path id="baseline-I" d="M135.828,0.26556L138.551,0.26556L138.551,11.8672L135.828,11.8672Z"/>
                <path id="baseline-C" d="M148.903,9.57676C150.241,9.57676,151.335,9.07331,152.185,8.06639L153.93,9.77593C152.545,11.2587,150.913,12,149.034,12C147.154,12,145.606,11.4357,144.39,10.3071C143.174,9.17842,142.566,7.75381,142.566,6.0332C142.566,4.31258,143.186,2.87691,144.425,1.72614C145.665,0.575375,147.18,0,148.973,0C150.974,0,152.65,0.724751,154,2.17427L152.307,4C151.446,2.98201,150.375,2.47303,149.095,2.47303C148.071,2.47303,147.195,2.79114,146.468,3.42739C145.74,4.06363,145.377,4.92116,145.377,6C145.377,7.07884,145.72,7.94467,146.406,8.59751C147.093,9.25035,147.925,9.57676,148.903,9.57676L148.903,9.57676Z"/>
            </g>
        </g>
    </g>
</svg>

            
          
!
            
              
@keyframes Logo_t { 0% { transform: translate(592.764px,381.201px) scale(2,2); animation-timing-function: cubic-bezier(0,0,0.58,1); } 100% { transform: translate(335.764px,381.201px) scale(2,2); } }
@keyframes Purple_t { 0% { transform: translate(0px,-11px); animation-timing-function: cubic-bezier(0,0,0,1); } 100% { transform: translate(0px,-23.5px); } }
@keyframes Purple_d { 0% { d: path('M11.5,1.5L11.5,1.5'); } 100% { d: path('M18.7355,1.5L41.7355,1.5'); } }
@keyframes Red_d { 0% { d: path('M21.5,1.5L21.5,1.5'); animation-timing-function: cubic-bezier(0,0,0,0.994029); } 100% { d: path('M41.5,1.5L1.5,1.5'); } }
@keyframes Orange_t { 0% { transform: translate(0px,-11px); animation-timing-function: cubic-bezier(0,0,0,1); } 100% { transform: translate(0.2355px,1.5px); } }
@keyframes Orange_d { 0% { d: path('M31.5,1.5L31.5,1.5'); } 100% { d: path('M24.5,1.5L1.5,1.5'); } }
@keyframes Blue_t { 0% { transform: translate(0px,-11px); animation-timing-function: cubic-bezier(0,0,0,1); } 100% { transform: translate(-0.0145px,1.5px); } }
@keyframes Blue_d { 0% { d: path('M41.5,1.5L41.5,1.5'); } 100% { d: path('M41.5,1.5L36.2355,1.5'); } }
@keyframes Green_t { 0% { transform: translate(0px,-11px); animation-timing-function: cubic-bezier(0,0,0,1); } 100% { transform: translate(0px,-23.5px); } }
@keyframes Green_d { 0% { d: path('M1.5,1.5L1.5,1.5'); } 100% { d: path('M1.5,1.5L6.7355,1.5'); } }
@keyframes Sigle_t { 0% { transform: translate(715.087px,332.451px) scale(2,2); animation-timing-function: cubic-bezier(0,0,0.58,1); } 100% { transform: translate(458.087px,332.451px) scale(2,2); } }
@keyframes Sigle_o { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes Baseline_t { 0% { transform: translate(921.971px,423.951px) scale(2,2); animation-timing-function: cubic-bezier(0,0,0,1); } 100% { transform: translate(664.971px,423.951px) scale(2,2); } }
@keyframes Baseline_o { 0% { opacity: 0; } 100% { opacity: 1; } }

            
          
!
999px
Loading ..................

Console