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" viewBox="0 0 800 300" text-rendering="geometricPrecision" shape-rendering="geometricPrecision" style="background: #172138; white-space: pre;">
    <g id="Spaceship" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0" transform="translate(143.786,265.563)" style="animation: Spaceship_t 0.4s linear both, Spaceship_o 0.4s linear both;">
        <g id="State-2" fill="#FFFFFF" transform="translate(-337,-242)">
            <path id="Spaceship-2" d="M391.729,280.2L389.913,278.388L419.764,250.051L420.818,251.107L421.875,252.162L393.54,282.014L391.729,280.2ZM369.667,304.368L368.615,303.313L367.559,302.256L387.441,280.858L389.254,282.672L391.069,284.484L369.667,304.368ZM395.36,320.929L397.631,306.9L396.669,305.94L397.079,304.801L398.569,303.912L409.509,286.197L408.875,285.56L409.605,283.781L412.732,280.651L412.986,280.899L416.537,277.348L416.255,277.072L416.92,276.408L416.623,276.115L417.956,274.783L417.962,274.78L417.381,274.207L416.049,275.541L415.759,275.249L415.094,275.908L414.816,275.63L411.267,279.18L411.514,279.43L408.381,282.56L406.665,283.35L406.657,283.362L406.651,283.359L398.091,291.922L398.101,291.929L399.456,293.283L391.124,301.613L393.741,296.049L390.461,292.77C391.767,291.467,395.608,289.618,395.608,289.618C400.18,286.135,417.193,264.039,424.125,255.045C431.062,246.049,429.744,244.676,429.744,244.676L428.502,243.426L427.25,242.179C427.25,242.179,425.875,240.862,416.883,247.801C407.885,254.733,385.789,271.744,382.305,276.317C382.305,276.317,380.454,280.16,379.155,281.463L375.874,278.184L370.312,280.8L378.642,272.47L379.999,273.827L380.007,273.833L388.567,265.273L388.565,265.272L388.575,265.261L389.368,263.542L392.499,260.413L392.747,260.66L396.299,257.11L396.018,256.83L396.68,256.168L396.384,255.877L397.717,254.544L397.147,253.965L397.145,253.969L395.81,255.302L395.518,255.008L394.858,255.667L394.578,255.389L391.026,258.939L391.276,259.191L388.143,262.322L386.364,263.05L385.727,262.418L368.018,273.36L367.125,274.846L365.987,275.258L365.024,274.296L350.997,276.567L351.728,275.056L350.558,274.965L343.068,282.452L337.823,291.418L337.641,292.876L337.869,293.109L338.616,291.945L339.688,291.748L346.432,294.669L344.208,301.349L344.966,302.117L348.588,298.507L349.937,297.855L350.838,298.762L350.229,300.059L345.316,306.321L351.094,312.099L356.29,308.395L351.448,314.278L354.548,317.378L357.648,320.48L363.532,315.637L359.827,320.834L365.605,326.609L371.866,321.696L373.164,321.089L374.07,321.989L373.418,323.337L369.809,326.96L370.577,327.72L377.256,325.496L380.181,332.239L379.985,333.31L378.817,334.061L379.047,334.284L380.511,334.105L389.478,328.858L396.962,321.371L396.867,320.198L395.36,320.929Z"/>
        </g>
    </g>
    <path id="Circle" d="M450.329,306.416C459.808,296.686,465.647,283.394,465.647,268.737C465.647,238.914,441.47,214.737,411.647,214.737C381.823,214.737,357.647,238.914,357.647,268.737C357.647,283.464,363.542,296.815,373.102,306.557" fill="none" stroke="#34b190" stroke-width="7" stroke-dasharray="252.88 252.88" stroke-dashoffset="252.88000000000002" transform="translate(430.566,91.7689) rotate(45) translate(-411.647,-260.647)" style="animation: Circle_do 0.5s linear 0.5s both;"/>
    <g id="Sigle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0" transform="translate(416.638,206.127) scale(0.9,0.9) translate(-114.919,-22.614)" style="animation: Sigle_t 0.4s linear 1.1s both, Sigle_o 0.6s linear 1.1s both;">
        <g id="State-4" fill="#FFFFFF" transform="translate(-285,-351)">
            <path id="Sigle-2" d="M328.909,396.228L328.909,364.954L339.274,364.954L339.274,396.228L328.909,396.228ZM371.816,393.124C370.466,393.96,368.982,394.628,367.24,395.213C365.504,395.796,363.73,396.085,361.92,396.085C358.949,396.085,356.361,395.668,354.162,394.83C351.957,393.998,350.113,392.871,348.627,391.454C347.142,390.047,346.031,388.396,345.289,386.514C344.546,384.636,344.177,382.655,344.177,380.564C344.177,378.482,344.546,376.472,345.289,374.548C346.031,372.622,347.142,370.937,348.627,369.503C350.113,368.067,351.957,366.914,354.162,366.057C356.361,365.197,358.949,364.77,361.92,364.77C363.73,364.77,365.504,365.062,367.24,365.64C368.982,366.217,371,367.228,372.341,368.067L366.73,373.679C365.398,373.298,366.73,373.679,365.642,373.36C364.552,373.051,363.378,372.911,362.13,372.911C360.037,372.911,358.23,373.502,356.701,374.682C355.171,375.868,354.404,377.784,354.404,380.426C354.404,382.839,355.179,384.691,356.738,385.992C358.287,387.29,360.224,387.942,362.545,387.942C364.955,387.942,367.181,387.365,369.226,386.199L371.816,393.124ZM390.98,372.949L390.98,384.253C390.98,385.553,391.209,386.456,391.677,386.97C392.134,387.479,392.763,387.733,393.55,387.733C393.918,387.733,394.328,387.683,394.771,387.59C395.21,387.504,395.603,387.405,396.115,387.263L398.939,394.866C397.593,395.185,395.906,395.561,394.632,395.773C393.353,395.978,392.068,396.085,390.769,396.085C389.283,396.085,387.931,395.898,386.701,395.525C385.468,395.157,384.4,394.516,383.496,393.612C382.593,392.707,381.9,391.468,381.408,389.89C380.923,388.313,380.681,386.342,380.681,383.974L380.681,372.949L374.067,372.949L374.067,371.487L380.681,364.81L380.681,361.347L390.98,351L390.98,364.81L398.984,364.81L398.984,372.949L390.98,372.949ZM435.297,380.426C435.297,382.561,434.941,384.566,434.222,386.448C433.504,388.326,432.449,389.98,431.058,391.42C429.67,392.858,427.963,393.998,425.941,394.83C423.922,395.668,421.64,396.085,419.09,396.085C416.539,396.085,414.254,395.668,412.236,394.83C410.215,393.998,408.514,392.858,407.121,391.42C405.728,389.98,404.662,388.326,403.922,386.448C403.176,384.566,402.808,382.561,402.808,380.426C402.808,378.291,403.176,376.276,403.922,374.372C404.662,372.472,405.728,370.813,407.121,369.394C408.514,367.983,410.215,366.861,412.236,366.022C414.254,365.191,416.539,364.771,419.09,364.771C421.64,364.771,423.922,365.191,425.941,366.022C427.963,366.861,429.67,367.983,431.058,369.394C432.449,370.813,433.504,372.472,434.222,374.372C434.941,376.276,435.297,378.291,435.297,380.426ZM425.076,380.426C425.076,377.879,424.547,375.907,423.508,374.511C422.461,373.119,420.992,372.423,419.09,372.423C417.14,372.423,415.646,373.119,414.599,374.511C413.556,375.907,413.037,377.879,413.037,380.426C413.037,382.979,413.556,384.946,414.599,386.342C415.646,387.734,417.14,388.429,419.09,388.429C420.992,388.429,422.461,387.734,423.508,386.342C424.547,384.946,425.076,382.979,425.076,380.426ZM441.841,396.085L441.841,364.811L452.21,364.811L452.21,396.085L441.841,396.085ZM481.365,375.07C478.863,374.555,476.689,374.372,474.859,374.51C473.025,374.65,471.691,375.303,470.863,376.457L470.863,396.085L460.486,396.085L460.486,364.81L470.58,364.81L470.58,370.198C471.275,369.273,471.972,368.465,472.672,367.793C473.361,367.13,474.125,366.554,474.967,366.093C475.8,365.628,476.736,365.293,477.783,365.085C478.826,364.873,480.021,364.77,481.365,364.77L481.365,375.07ZM514.838,379.313C514.838,379.779,514.822,380.472,514.798,381.399C514.777,382.328,514.718,383.05,514.627,383.558L494.865,383.558C495.191,385.28,495.931,386.514,497.089,387.279C498.246,388.042,500.039,388.429,502.447,388.429C503.705,388.429,505.136,388.278,506.765,387.978C508.382,387.675,508.476,387.7,510.101,387.244L512.755,394.385C510.81,394.892,508.711,395.33,506.765,395.63C504.812,395.928,503.029,396.085,501.404,396.085C498.437,396.085,495.896,395.668,493.787,394.83C491.673,393.998,489.949,392.871,488.603,391.454C487.255,390.047,486.255,388.397,485.607,386.514C484.963,384.636,484.636,382.655,484.636,380.565C484.636,378.568,484.97,376.622,485.644,374.721C486.318,372.82,487.324,371.137,488.672,369.677C490.017,368.215,491.673,367.035,493.648,366.127C495.617,365.22,497.902,364.771,500.498,364.771C502.867,364.771,504.955,365.152,506.765,365.917C508.572,366.685,510.066,367.728,511.254,369.051C512.437,370.37,513.326,371.916,513.931,373.675C514.533,375.44,514.838,377.32,514.838,379.313ZM505.859,377.922C505.673,376.111,505.093,374.766,504.121,373.887C503.148,373.004,501.939,372.563,500.498,372.563C498.968,372.563,497.714,373.019,496.744,373.921C495.769,374.82,495.166,376.162,494.933,377.922L505.859,377.922ZM306.966,396.066L285,364.755L297.239,364.755L311.011,384.675L311.095,384.675L311.095,364.794L321.452,364.794L321.452,396.066L306.966,396.066Z"/>
        </g>
    </g>
</svg>

            
          
!
            
              @keyframes Spaceship_t { 0% { transform: translate(143.785946px,265.563141px); } 100% { transform: translate(355.785946px,74.563141px); } }
@keyframes Spaceship_o { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes Circle_do { 0% { stroke-dashoffset: 252.88px; } 100% { stroke-dashoffset: 0px; } }
@keyframes Sigle_t { 0% { transform: translate(416.638px,206.126857px) scale(0.9,0.9) translate(-114.919px,-22.614px); } 100% { transform: translate(416.638px,206.126857px) scale(1,1) translate(-114.919px,-22.614px); } }
@keyframes Sigle_o { 0% { opacity: 0; } 100% { opacity: 1; } }
            
          
!
999px
Loading ..................

Console