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.

            
              <svg xmlns="http://www.w3.org/2000/svg" width="1900px" height="420">
  <defs>
    <radialGradient id="bgGradOne" cx="89.8325579%" cy="80.3078803%" r="94.8186403%" fx="89.8325579%" fy="80.3078803%" gradientTransform="scale(.5691 1) rotate(-140.38 1.238 .68)">
      <stop stop-color="#FE8C5F" offset="0%"/>
      <stop stop-color="#42193B" offset="100%"/>
    </radialGradient>
    <radialGradient id="bgGradTwo" cx="89.8325579%" cy="80.3078803%" r="94.8186403%" fx="89.8325579%" fy="80.3078803%" gradientTransform="matrix(-.43714 -.63588 .36016 -.7718 1.002 1.994)">
      <stop stop-color="#FE5F5F" stop-opacity=".748613" offset="0%"/>
      <stop stop-color="#42193B" offset="100%"/>
    </radialGradient>
    <linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%">
      <stop stop-color="#32FFF8" offset="0%"/>
      <stop stop-color="#17FFED" stop-opacity="0" offset="100%"/>
    </linearGradient>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path fill="#241335" d="M0 2h736v418H0z"/>
    <path fill="url(#bgGradOne)" d="M0 0h738v420H0z"/>
    <path fill="url(#bgGradTwo)" d="M0 0h738v418H0z"/>
    <path fill="#DED8BC" id="moon" d="M27.549141 127.279747C37.3683189 136.413434 50.5317533 142 65 142c30.3756612 0 55-24.624339 55-55 0-21.5924136-12.442724-40.2786732-30.549141-49.2797472C100.246758 47.762475 107 62.0925855 107 78c0 30.375661-24.6243388 55-55 55-8.7832477 0-17.0856267-2.058844-24.450859-5.720253z"/>
    <g fill="#FFF" id="stars" transform="translate(153 48)">
      <circle cx="53.5" cy=".5" r="1"/>
      <circle cx=".5" cy="82.5" r="1"/>
    </g>
    <g id="cow" transform="translate(347 355)">
      <path fill="#000" d="M7.67549838 9.66751307c0-.1255657-.08241524-.4650677-.10591472-.61570478-.11765826-.1631174-.14119487-.4519721-.07062218-.5899678.21163144-.4140929.13143126-1.0519319.07062218-1.3307628-.0424822-.1941766-.17377735-.2148714-.30588922-.1757666-1.064988.3154131-2.59969332.1757666-3.07021502-.1004362-.28230312.70304-.67045908.7908374-.7999104.8286083 0 .1003833-.0235366.4387099-.15283943.4268372-.1638653-.0148575-.2000735-.2135243-.2117676-.3390398-.0118549-.1255684-.1411578-.1631675-.1646944-.0375992-.0235366.1255551-.0705727.3891192-.2117181.3891192-.1412073 0-.1530003-.1506873-.1412073-.2510707.0262095-.2245122-.1176088-.213379-.164682-.1631807-.1354531.144599-.0941217.8912868-.0470361.9917362.1411453.1130749.2234245.4394799.1646943.489727.0173987.065053.1309981.5685546.1309981.6242692h-.3828472s-.2290303-.4271503-.246429-.4736322c-.1411454-.1004415-.1646944-.3515213-.1411454-.4519588 0-.2510839-.3487179-.9290578-.4428272-1.0294543 0-.1255551-.0644844-.1846811-.0610071-.4357649-.1646424.0753172-.0421481.1945992-.1598089.3954848-.0588762.1757534-.1564714.5932535-.0691719.7880509.0828038.1851036.1053826.4323153.0818373.5578823.0956647.1857178.1510537.5379615.1684649.6493922H.933385c-.0174025-.074287-.2252584-.5104653-.3992771-.8819009-.1572929-.3753074.0109728-.6097774-.1401812-1.073144.0235403.2761631-.1176558.5272866-.3529195.263564.14114823.0250793.19200066-.1931465.11765617-.4895686-.09566218-.3807727.211723-1.330776.54110058-1.7576133.25073288-.3249484-.02354032-1.0294411 0-1.4563311C.72330548 3.9924374.5821564 2.6114763.62919 2.2097052c.1176558-.22595166.42349428-.65264362.63521976-.7530798.21176756-.0502511 1.62339453.10043618 2.1645013.10043618 1.14895005 0 3.03488536.0250794 3.50540706-.07537.61172894-.0250661 2.18805026.2635641 3.12914318.1380486.0351935-.2762027.2469611-.4268372.4351549-.3891324.1882186.0376124.4940583 0 .564631-.0628237.0706222-.0626917.1295008-.2510838.1530498-.3138151.2352546-.3012821.6292143-.2134714.7293253-.1506344.0587302.0440044.3999985.3891192.4705341.4770884.0941712 0 .3764371 0 .635315-.0502511.2587542-.0501982.4938727.1757666.4704846.2008856-.117683.1255683-.3294134.3264011-.517632.376639l-.1175593.35137475c0 .15063446.4234609.7532911.4939964 1.00437496-.0470237.0753172-.1411948.2762028-.2587541.3765861-.117683.1004494-.3529253.1506873-.517632.1255684-.1882186-.1506344-.58818-.3013217-.8234347-.2259517-.3293887.1757534-.6352655.9038728-.7293377 1.1047583-.2823402.2008856-.6117289 1.2052077-.6352655 1.4060932-.0470361.4017711-.623522.8410886-.9645924.9164058-.1765369.2259649-.34108275 1.3684941-.38815596 1.4438641-.0823781.2008327-.23526703.5774717-.23526703.6904.0822668.1632771.0116941.5524068-.0234871.6026025.0090335.0361121.0954582.2527307.1046525.309943-.0824276-.0031472-.2988851-.0056749-.3870051.0005665.0122262-.061029-.0818336-.3387281-.132545-.405432-.0890851-.11736307-.032137-.3695272.0265932-.4323615.0235366-.07531857-.0351935-.4017183-.0351935-.5774849-.0589281-.0878503-.147147-.232238-.1706836-.38288568-.0705727.0501983-.0764259.26996926-.1116689.35776672.023549.1757666-.0531615.4423153-.1120402.530122-.0117064.0628357.038807.2919385.038807.4425769.0087984.05571467.1119536.4212178.1207025.4583614h-.3915838s-.0793711-.05380634-.0793711-.13743184"/>
    <path fill="#FFF" d="M1.0029926 8.30072797c-.0174025.0928688-.0086536.34363566.01740124.3993543.0439882.09393852.12181368.2878074.09575883.5478123.06085858.11143066.14787348.59429688.14787348.59429688H.9855901s-.2436261-.6592456-.31323357-.77067627C.60274907 8.9600845.52197595 8.77689184.5393772 8.44260644c.04287695-.22791946-.00821802-.43293867-.08086965-.64687235.14714215-.1820002.05302665-.9352913.18238022-1.0608068.18823095-.1882469.78820397-.9541239.81175295-1.1298905.0235366-.1757534.07057268-1.05456-.09412167-1.2554456C1.19383708 4.1487056 1.09556 3.0452284 1.1702918 2.566859c.0235453-.15064763-.0940672-.20088553-.141149-.02513213-.0470323.1757666-.0470323.979256-.0705739 1.18014154-.0235403.2008724.0822717.9289917.1058133 1.2554456.0235403.3264011.11175803.9227582-.02938982 1.0858861-.093149.1077658-.49991646.5586391-.5352523.7344057-.03523932.1757666.0470336.8034894-.12935356.979256-.09411547.0628238.0235403.4897271-.22342077.414357.1411478.025119.15366725-.3015858.08227165-.5523659-.0822717-.2888415.23526333-1.2052472.55279958-1.682296.22844736-.3430545.02354032-1.0294939.04708187-1.4563311.023492-.4268372-.12935485-1.8078643-.08227298-2.2095825.11760753-.2259516.3528721-.552247.56463717-.6526832.1763884-.0418913 1.1543825.0383256 1.78818784.0662839-.18823095.1757666-1.12942284.8877343-1.2235445.9881176-.0941093.1004494-.14114538.3515861.02354897.4519694 0 .2260045-.02354894.8537405-.02354894.8537405.0470361.0250661.1411578.1757534.1411578.1757534.164682-.0251189.4502149-.0146989.5176073.2008856.0235366.0753172.0235366.3012821.0235366.3012821.1176088-.1255155.423498-.2008856.4940707-.0753172.1176088-.0251322.423498.1255023.423498.401705.1411454-.1003833.3764-.3765861.4469851-.4268372-.1176087-.1004361-.2823031-.7532382-.3058397-.9541238-.0235489-.2008856.188231-.6026038.399949-.6528549.2117676-.050185.4470346-.3765861.4940707-.5021544.0470856-.1255683.0705727-.3766389-.1411453-.4268372-.2117799-.0502511-.1649789-.3216598-.1649789-.3216598 1.0893537.009654 2.3779147.0250793 2.7528298-.0548338.0676647-.0028394.1468501-.0020602.2358363.0013339 0 0 .0699911.24975-.0476053.3249087-.1176582.0753701-.7293872.7784101-.7293872.9039256.1646944.1507005.5411563.627736.58818.7783704.2352671-.1255155.4940707-.2259648.6823017-.2008327.188231.0250662.58818 0 .6823016 0 .0705727.1004362.1411454.3264011.3764124.2762028.2353042-.0502511.8469836-1.0294939 1.1293363-.9290577-.070585-.3013217.0218413-.7361622.1175964-.7532383.1412072-.0251189.0941217-.288683.0941217-.288683h.2823402c.0470361 0 .0941217.1757534.1293152.2384319.2000611-.0251189.4234856-.0251189.4470346.1004494.0235366.1255683-.1411578.3390398-.1999374.5524056-.0588786.21347148.2469611.31392086.3293763.2762028.0822791-.03761234.2469611-.13804852.3410828-.13804852.0941093 0 .1646943.1631147.2117675.1882468.0470361.02511894.1881815.03775765.2117305.1004362.0470732.0126387.5175825.0251321.6587774.0251321.0589034-.02513214.2471219-.2886962.3059016-.3389341-.0352678-.11303525-.117683-.2386036-.2705101-.2386036-.1530745 0-.2118047-.0753172-.2471343-.1379957-.0352431-.06288985-.1293647-.0502511-.21178-.0502511 0 0-.0470237-.5524056-.0351811-.6277228-.0353915 0-.3058892-.02506614-.3764619-.02506614-.0353421-.0627313-.2823031-.1757666-.3412313-.1631807-.011694-.0501983 0-.37659932.0118549-.5523527.0529265-.23864323.5057648-.1695199.58818-.12556834.0364929.0097993.2292653.2393696.3464905.3824234.0118425.0502511-.0524562.0820262-.1230289.0820262 0 .0501983.0234995.1757666.0234995.2134715.0705727 0 .2471096.1631807.2471096.2635641 0 .1004494.0352678.2260045.0352678.2260045.2117304.1004494.6090807.72075.682215.9290049.0353915.10044934-.0821678.1380485-.164583.10044934-.0822915-.03771806-.247122-.02507935-.2588779.0375992-.0116322.06283696.282266.23860356.2236101.3139208-.0589034.0753172-.2352423.08779745-.3529253.0627313-.1882186-.15068725-.6117042-.27620275-.8470083-.20088553-.3293764.1757534-.6587651.97924278-.7528744 1.1801283-.2823031.2008327-.635216 1.20520766-.6587526 1.4060932-.0470361.40171828-.623522.79100915-.9646047.8661679-.1765245.2260045-.3764124 1.39359978-.4234856 1.4689302-.0822791.20087236-.2066073.63649197-.2066073.74956686.0824276.1631266.0885655.42509136-.0087489.6063215.035342.0637628.0922778.23013556.1013237.2873465-.0645834.00608696-.1877978-.0057779-.2409718-.000309.0061378-.0571608-.0705727-.3460023-.1036873-.41255162-.0666994-.1334592-.0118425-.301327.0470361-.3641613.0235366-.0753199-.0353296-.4644549-.0353296-.6402083-.1293523-.1255683-.1882309-.4896742-.223474-.5775377.0009652-.1189518.0116941-.42683722.0116941-.60260382 0-.1757534-.18823092-.3012689-.3529129-.3766389-.1972768-.0901746-.4962981-.0354993-.6293752 0-.0941093.025119-.2411079-.2008327.06473187-.2761499 0 0-.0941217-.1506873-.1176583-.25113666-.0234871-.10038337-.0243162-.4017183.3058892-.4017183.0705727 0 .0470361-.2008856.18823095-.2008856.1411454 0 .3764124-.02511895.4705217-.02511895 0-.2008327-.0470732-.4770355-.2823402-.5272866-.0705727-.02506612-.09412163-.15063444-.0234995-.25108383-.164682-.02506612-.58818-.02506612-.68228923 0-.21177997.0753172-.7293377.6026038-1.03522697.5775377-.3058274-.02513214-.564631-.2762028-.70578877-.2762028-.1411949 0-.6352656 0-.6822893.07531726 0 .1506344.0705727.67792104-.02340046.72817215-.0941217.0501851-.6352161.35152-.611729.70304-.1411453-.0502511-.9881289-.32640103-1.1998594-.4017711-.2117675 0-.83625473.1616752-.83625473.1616752-.0613907.0873484-.3467751.5635519-.5415275.6130238-.16469433.0753172-.44853933.4247242-.4669553.70092694-.0522062.1021002-.1018979.3619532-.1106468.4919457"/>
    <path fill="#FFF" d="M7.96296173 9.48664476c-.02614765-.160027-.10242506-.4525835-.090632-.51525936.05877963-.08795594.15903912-.35137473.12070243-.5550997.0440414-.12494762.1520227-.53140707.17904895-.64670067.0235367-.10044938-.037854-.4454189-.0613906-.54585508-.0235489-.10044938-.3345489-.27620278-.4286211-.1507005.0348099.28631905.134624 1.06783265-.0770075 1.4818859-.0705727.13819383-.0761289.38587036.0414799.5489956.0251825.16136878.0621084.65862755.149127.7566971h.2724282s-.0877239-.29967618-.1051351-.3739633M2.370197 9.2458317c.07612892-.0873907-.0235366-.35157283-.16468197-.4646081-.0679245-.079649-.02606103-.41332688-.0387203-.69205212-.08242762.062837-.30251095.02671695-.30251095-.21187344 0-.0626785-.02658077-.4605801-.02658077-.4605801-.0245142-.095695-.1270877-.03193354-.1877978-.1503835-.0202078.0114501-.2007541.1349582-.2260726.14729317-.0051726.2748558.0410839.422664.0758814.5068957.0940722.1004494.3935266.7165636.3935266.9676474-.0235366.1004415-.0177824.3504899.123363.4509327.0783564.0557147.2408233.4899859.2654736.5030882h.2436323c-.0348099-.0742871-.1033036-.4570196-.1555123-.5963597"/>
    <path fill="#000" d="M8.8990429 9.1289365c.02604865.0279867.1914236.26218788.21747227.34641015h-.34803732L8.7336803 9.4285794l-.0348099.04676725h-.08700625s-.12181615-.2996951-.10441738-.34641015h.39159612"/>
    <path fill="#FFF" d="M8.86869267 9.26819285c.0168211.0179999.1552582.2032993.16086108.25724602h-.24259563l-.05752615-.039432-.0224614.039432-.0516737-.0047859s-.09476216-.2224958-.0835065-.25246012h.2969023"/>
    <path fill="#000" d="M2.59086195 9.1289365c.02614765.0279867.1914236.26218788.21757127.34641015h-.3480373l-.03479756-.04676726-.03480992.0467672H2.3037822s-.12181615-.2996951-.10441737-.3464102h.39149712"/>
    <path fill="#FFF" d="M2.56047454 9.26819285c.01685853.0179999.15524572.2032993.1608985.25724602h-.24244587l-.05757607-.039432-.0224614.039432-.05177353-.0047859s-.09474968-.2224958-.08354394-.25246012h.2969023"/>
    <path fill="#000" d="M1.33792762 9.1289365c.02614765.0279867.1914236.26218788.21757127.34641015h-.3480374l-.0348012-.04676725-.0348038.04676724h-.0870099s-.1217642-.2996951-.1043629-.34641014h.3914439"/>
    <path fill="#FFF" d="M1.30754022 9.26819285c.01685853.0179999.15529564.2032993.16089852.25724602h-.2424459l-.0575698-.039432-.0224714.039432-.05176604-.0047859s-.09475966-.2224958-.08354893-.25246012h.29690355"/>
    <path fill="#000" d="M8.1420107 9.1289365c.02614764.0279867.1914236.26218788.21757126.34641015h-.3480373L7.9767471 9.4285794l-.03480992.04676725h-.08700623s-.12176665-.2996951-.10436788-.34641015h.39144762"/>
    <path fill="#FFF" d="M8.1116233 9.26819285c.01685852.0179999.15529563.2032993.1608985.25724602h-.24244588l-.05757606-.039432-.0224614.039432-.05177353-.0047859s-.09476216-.2224958-.08354394-.25246012h.2969023"/>
    </g>
    <g id="ufo" transform="translate(327 126)">
      <ellipse cx="27.5" cy="17" fill="#000" transform="rotate(-1 27.5 17)" rx="26.5" ry="10"/>
      <path fill="#292929" d="M1 17.566077c0 3.5236732 6.37126005 9.9837407 26.8787533 9.3964619C48.3862466 26.37526 54.5584048 19.9151925 53.9610992 16c-4.9775469 5.6770291-12.8485279 7.4888788-26.0823459 8.0261445C14.6449354 24.5634102 8.16766756 22.2643079 1 17.566077z"/>
      <path fill="#282828" d="M14 11.4628821c10.4558824 4.9126638 19.4558824 4.7079694 27-.614083C40.6029412 8.59716157 36.2352941 0 27.6985294 0 20.6838235.27292576 16.1176471 4.09388646 14 11.4628821z"/>
      <circle cx="47.5" cy="14.5" r="1" fill="#EFEFEF"/>
      <circle cx="40.5" cy="17.5" r="1" fill="#F4F4F4"/>
      <circle cx="31.5" cy="19.5" r="1" fill="#FFF"/>
      <circle cx="22.5" cy="19.5" r="1" fill="#FFF"/>
      <circle cx="13.5" cy="17.5" r="1" fill="#F4F4F4"/>
      <circle cx="7.5" cy="15.5" r="1" fill="#EFEFEF"/>
      <path fill="url(#c)" id="beam" d="M22.4966173 26.394944h9l22 267.605056h-48"/>
    </g>
    <path fill="#000" id="mountains" d="M0 280.088235l32.4483874 7.453586c11.4227995 2.623884 23.3767684 1.662768 34.2336155-2.752432L76 281c23.3333333 12 36.333333 20 39 24 1.473841 2.210762 34-9 43-7 3.284328.729851 7.702168 10.060987 27 18 10.942182 4.501548 23.162859 9.640849 33.480028 6.881123.768846-.205658 1.608837.167301 2.519972 1.118877 7.295072 1.621839 11.295072 3.342428 12 5.161765 1.034316 2.669448 13.702817 3.268106 38.005502 1.795974h.000001c9.322771-.564726 18.346908 3.395221 24.243422 10.638433 3.028749 3.72048 9.279107 6.536462 18.751075 8.447946 21.557299 4.350354 54.890632 5.394472 100 3.132353 81.165375-15.653303 144.165375-33.055264 189-52.205883 22-9.397059 49.90375 3.585486 78 0 5.501883-.702119 9.271065-1.974004 11.307545-3.815653 2.640901-2.388245 6.653822-2.413508 9.324581-.058701L738 329.161765V420H0V280.088235z"/>
  </g>
</svg>

            
          
!
            
              body
  background-color: #000
  
#ufo,
#beam
  opacity: 0

            
          
!
            
              const ufo = document.getElementById("ufo")
const cow = document.getElementById("cow")
const beam = document.getElementById("beam")

var tl = new TimelineMax({repeat:-1});
tl.from(ufo, 4, {x:"1000px", ease: Power3.easeNone}, "enter")
tl.to(ufo, .2, {delay:1, opacity:"1"}, "enter")
tl.to(beam, 1, {delay:4, opacity:".6"}, "enter")
tl.to(cow, 4, {delay:5, y:"130px", rotation: 20}, "enter")
tl.to(beam, 0.5, {opacity:"0"}, "off")
tl.to(cow, 0.5, {opacity:"0"}, "off")
tl.to(ufo, 2, {x:"-200px"});

//@IanHazelton


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

Console