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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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>

            
          
!
            
              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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console