Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="527.9" width="296.41" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">

 <defs id="defs4">

  <radialGradient id="radialGradient4052-4" xlink:href="#linearGradient4044-0" gradientUnits="userSpaceOnUse" cy="767.95" cx="315.31" gradientTransform="matrix(0.13508856,-0.89794159,0.50372745,0.07578032,-199.12638,518.63827)" r="158.11"/>

  <linearGradient id="linearGradient4044-0">

   <stop id="stop4046-9" stop-color="#FFF" offset="0"/>

   <stop id="stop4048-4" stop-color="#FFF" stop-opacity="0" offset="1"/>

  </linearGradient>

  <linearGradient id="linearGradient4201" y2="894.78" xlink:href="#linearGradient4044-0" gradientUnits="userSpaceOnUse" x2="202.03" gradientTransform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" y1="579.61" x1="204.05"/>

  <filter id="filter4670" height="1.1925657" width="1.2230701" color-interpolation-filters="sRGB" y="-0.096282855" x="-0.11153511">

   <feGaussianBlur id="feGaussianBlur4672" stdDeviation="14.695532"/>

  </filter>

  <filter id="filter4716" height="1.1091231" width="1.4086392" color-interpolation-filters="sRGB" y="-0.05456154" x="-0.2043196">

   <feGaussianBlur id="feGaussianBlur4718" stdDeviation="9.5643049"/>

  </filter>

  <filter id="filter4761" height="1.6666775" width="1.4533712" color-interpolation-filters="sRGB" y="-0.33333874" x="-0.22668561">

   <feGaussianBlur id="feGaussianBlur4763" stdDeviation="1.9762902"/>

  </filter>

  <filter id="filter5046" height="1.3026322" width="1.2439319" color-interpolation-filters="sRGB" y="-0.15131609" x="-0.12196595">

   <feGaussianBlur id="feGaussianBlur5048" stdDeviation="2.5154191"/>

  </filter>

  <radialGradient id="radialGradient5391" xlink:href="#linearGradient4044-0" gradientUnits="userSpaceOnUse" cy="767.95" cx="315.31" gradientTransform="matrix(0.30720337,-2.0419987,1.1455209,0.17233118,-445.90759,1170.1901)" r="158.11"/>

  <linearGradient id="linearGradient5393" y2="894.78" xlink:href="#linearGradient4044-0" gradientUnits="userSpaceOnUse" x2="202.03" gradientTransform="translate(26.263967,-20.203051)" y1="579.61" x1="204.05"/>

  <linearGradient id="linearGradient5493" y2="510.58" gradientUnits="userSpaceOnUse" x2="358.93" gradientTransform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" y1="477.36" x1="361.07">

   <stop id="stop4075" stop-color="#6a6ac6" offset="0"/>

   <stop id="stop4077" stop-color="#6a6ac6" stop-opacity="0" offset="1"/>

  </linearGradient>

  <linearGradient id="linearGradient5496" y2="451.29" gradientUnits="userSpaceOnUse" x2="284.29" gradientTransform="matrix(0.4397366,0,0,0.4397366,23.136419,1.9316019)" y1="420.93" x1="285">

   <stop id="stop4539" stop-color="#6897dd" offset="0"/>

   <stop id="stop4843" stop-color="#6897dd" stop-opacity="0.49803922" offset="0.5"/>

   <stop id="stop4541" stop-color="#6897dd" stop-opacity="0" offset="1"/>

  </linearGradient>

  <linearGradient id="linearGradient5500" y2="798.5" gradientUnits="userSpaceOnUse" x2="384.28" gradientTransform="matrix(0.4397366,0,0,0.4397366,-3.0444959,4.0628394)" y1="1031.4" x1="383.68">

   <stop id="stop4865" stop-color="#6897dd" offset="0"/>

   <stop id="stop4867" stop-color="#6897dd" stop-opacity="0.49803922" offset="0.5"/>

   <stop id="stop4869" stop-color="#FC0" offset="1"/>

  </linearGradient>

  <linearGradient id="linearGradient5504" y2="725.07" gradientUnits="userSpaceOnUse" x2="286.88" gradientTransform="matrix(0.4397366,0,0,-0.21986829,24.495971,610.95816)" y1="904.88" x1="288.9">

   <stop id="stop4472" stop-color="#80e5ff" offset="0"/>

   <stop id="stop4474" stop-color="#80e5ff" stop-opacity="0" offset="1"/>

  </linearGradient>

  <linearGradient id="linearGradient5508" y2="418.79" gradientUnits="userSpaceOnUse" x2="314.84" y1="393.79" x1="315.52">

   <stop id="stop4482" stop-color="#00A" offset="0"/>

   <stop id="stop4484" stop-color="#00A" stop-opacity="0" offset="1"/>

  </linearGradient>

 </defs>

 <metadata id="metadata7">

  <rdf:RDF>

   <cc:Work rdf:about="">

    <dc:format>image/svg+xml</dc:format>

    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>

    <dc:title/>

   </cc:Work>

  </rdf:RDF>

 </metadata>

 <g id="layer2" transform="translate(-14.197589,-11.027445)">

  <path id="path3832" d="m710,500.93c0,173.58-140.71,314.29-314.29,314.29s-314.29-140.71-314.29-314.29,140.71-314.29,314.29-314.29c173.58,0.01,314.29,140.72,314.29,314.29z" transform="matrix(0.4397366,0,0,0.4397366,-11.609542,-61.048476)" fill="#04A"/>

  <path id="path4006" opacity="0.8048782" fill="#80e5ff" d="m156.64,169.88c-12.292,0.39734-23.894,0.57081-35.852,3.6141-4.187,1.2267-6.2339,3.7888-6.0348,11.067,0.00004,6.9013,1.9559,9.9988,5.1158,12.411,2.7218,1.8422,3.8665,2.7819,7.8586,2.7v15.982c-15.96,2.5173-30.834,9.0593-40.634,22.536-5.5784,7.6592-8.0098,17.16-8.0089,26.59-2.0535,38.396-1.1066,76.867-0.74458,115.29,0.24044,8.6418,0.12537,17.344,0.81077,25.944,2.0602,6.0258,9.1632,7.8857,14.896,8.1214,10.415,1.1233,20.677,3.5035,31.166,4.0401,28.102,3.0389,56.39,1.4938,84.539,0.12368,5.8838-0.45541,12.697,0.7259,17.438-3.6553,7.2263-6.2735,8.9852-16.592,9.3577-25.738,0.98551-45.979,1.1728-91.977,1.086-137.97-2.8304-14.561-15.564-24.991-28.775-30.383-6.5418-2.7738-11.627-4.5937-18.579-5.9364v-14.017c12.585-4.5271,11.521-9.9062,12.152-19.238-0.27166-2.7066,1.8346-5.1597-4.8136-7.3518-8.5981-3.3084-18.073-2.9662-27.167-3.8552-4.5994-0.23936-9.2057-0.32672-13.811-0.28111z"/>

  <path id="path4460" opacity="0.8048782" d="m157.53,528.92c-12.292-0.19863-24.773-0.2854-36.732-1.807-5.6004-1.6342-6.2339-4.0931-6.0348-7.7323,0.00003-3.4507,1.9559-4.9994,5.1158-6.2054,2.7218-0.92109,4.746-1.3909,8.7381-1.35v-7.9908c-15.96-1.2587-30.834-4.5296-40.634-11.268-5.5784-3.8296-8.0098-8.5801-8.0089-13.295-2.0535-19.198-1.1066-38.434-0.74457-57.647,0.24043-4.3209,0.12537-8.6721,0.81077-12.972,2.0602-3.0129,9.1632-3.9429,14.896-4.0607,10.415-0.56164,20.677-1.7518,31.166-2.02,28.102-1.5194,56.39-0.74686,84.539-0.0619,5.8838,0.2277,12.697-0.36294,17.438,1.8276,7.2263,3.1368,8.9852,8.2959,9.3577,12.869,0.9855,22.989,1.1728,45.988,1.086,68.984-2.8304,7.2807-15.564,12.496-28.775,15.192-6.5418,1.3869-11.627,2.2969-18.579,2.9682v7.0083c12.585,2.2636,11.521,4.9531,12.152,9.6192,0.82769,3.3949,1.8346,4.7786-4.8135,5.8746-8.5981,1.6542-18.073,1.4831-27.167,1.9276-4.5994,0.11969-9.2057,0.16336-13.811,0.14054z" fill="url(#linearGradient5504)"/>

  <path id="path3841" fill="#ffe680" d="m123.92,319.15-2.9682,7.8466-3.5729,0.9894,1.3879-5.0158-4.9745,1.8551-4.4249-2.9132,0.19239,4.2874-0.21987-0.0137-2.7346-4.2874-1.8689,4.7272-4.9195,1.278,0.90695,0.74205-4.7134-1.2642,1.9926,5.2219-1.7177,0-1.5803-2.1712-0.83824,2.556-2.556,0.83826,0.45348,0.32979-0.1649,0.0412-1.8139-1.6215-0.24735,2.4186-2.1025,1.2368,2.2262,0.97567,0.1649,0.72832c-1.4699,0.32512-2.9271,0.66992-4.3699,1.0306l-0.0137,0.67335c1.5151,0.41092,3.1217,0.81915,4.9883,1.223,2.1548,0.46624,4.5534,0.9288,7.2282,1.3742,2.6748,0.44538,5.627,0.87946,8.8772,1.2917s6.7964,0.80119,10.677,1.168c3.8809,0.36685,8.0892,0.7077,12.656,1.0169,4.567,0.3092,9.4914,0.58527,14.8,0.82452,1.3734,0.0619,2.8482,0.10748,4.2737,0.16489v0.31606l0.38477-0.28857c3.9691,0.15809,8.0667,0.29949,12.45,0.41225,6.1053,0.15705,11.766,0.19263,17.012,0.13741,5.2463-0.0552,10.088-0.213,14.539-0.45347,4.451-0.24048,8.5108-0.56317,12.23-0.96193,3.7194-0.39875,7.09-0.87161,10.141-1.4016,3.0514-0.53005,5.7843-1.1109,8.2313-1.7452,2.4471-0.63433,4.6072-1.3222,6.5136-2.0338,0.20424-0.0762,0.3375-0.15666,0.53593-0.23361-0.35689-0.0683-1.9404-0.37501-4.4936-0.81076l-0.26111-0.81077,0.72831-1.0032h-1.2505l-0.72832-1.0032-0.38477,1.1818-1.1818,0.38477,1.0032,0.72832v0.19238c-1.018-0.16832-1.9849-0.32881-3.2156-0.52219l-0.41225-1.0581,1.0719-1.649-1.9651,0.0962-1.2368-1.5253-0.50845,1.8964-1.8414,0.71457,1.5528,1.0169c-1.0024-0.15016-2.0481-0.30979-3.1469-0.46722l2.2399-2.1162-3.8202-0.72831-0.19238-0.42599,0.97566-1.2642-1.6078-0.055-0.85199-1.7864-0.86574,1.5803-1.6902-2.501-1.0994,3.0232-3.0782,0.89321,1.1543,0.90695-0.16489,0.0137,1.3329,1.4292c-1.2327-0.15813-2.5007-0.32291-3.8065-0.48097l-1.0306-3.8202-2.7209,3.3667-0.21987-0.0137-0.1649-0.0137-0.0549-0.54967,2.0888-1.8276-2.6934-0.61838-1.0856-2.5422-1.4292,2.3636-2.7484,0.24736,1.8139,2.0887-0.0825,0.37104c-0.79961-0.0842-1.628-0.16496-2.446-0.24736l0.0137-0.19238,1.4841-0.97567-1.6628-0.61838-0.46722-1.704-1.1131,1.3742-1.759-0.0687,0.97567,1.4704-0.13741,0.38478-2.13-1.594,0.055-3.1056-2.5422,1.7864-0.38477-0.13741,0.5909-1.4704-2.8446,0.70083-0.30232-0.0962,0.055,0.16491-1.8826,0.46721-3.9302-3.2843-0.0825,1.2642-0.81077-0.46722-0.48096-4.5348-3.3805,3.0369-4.4523-0.94817,1.8414,4.1638-1.4291,2.4873c-0.45438-0.0233-0.91745-0.0467-1.3742-0.0687l0.76954-5.6479-5.0295,2.6934-1.7727-0.20613-1.3879-2.446-0.74206,1.6353-2.9682-1.4291,0.43974,2.446-3.6416-4.8234-1.4566,4.7272-3.9576,0.71457-0.20612-0.19239,0.0962-0.72832-0.54967,0.30232-2.6934-2.5697-0.43973,3.3118-1.3604-0.64586,0.57715-1.3742-3.7515,0.89322-1.9238-1.649,1.6078-1.9513-8.9321-0.20612-5.0707-6.8434zm11.213,10.444-0.12366,1.5253-1.6078,0.9894,0.50844-1.0169,1.223-1.4978zm5.9364,1.5116,0.28858,1.5528c-0.24235,0.003-0.48577,0.0103-0.72832,0.0137l-0.12367-0.20613,0.56341-1.3604zm-25.848,1.5803,0.42599,1.3055c-0.37479,0.0357-0.75253,0.0727-1.1268,0.10992l-0.0137-0.3298,0.71458-1.0856zm60.945,0.0825-0.0412,0.54966-0.57715,0.35729c-0.0966-0.007-0.19182-0.007-0.28858-0.0137l0.10994-0.53592,0.79702-0.35728zm-82.877,2.501,0.19238,0.13741,0,1.333-0.48096-0.82451,0.28858-0.64586zm2.3773,1.2505,0.24736,0.0825-0.08248,0.12368c-0.20154,0.0375-0.40349,0.0719-0.60464,0.10993l0.43974-0.31605z"/>

  <path id="path3847" fill="url(#linearGradient5500)" d="m85.439,339.64-0.61838,40.483,0,20.723c3.861,6.6119,6.9397,6.9176,22.537,12.972,17.86,6.9333,98.742,5.198,105.47-1.9788,0,0,15.858,0.63605,18.057-20.723,2.1987-21.359,0.63213-50.57,0.63213-50.57s-0.48344-0.0862-0.53593-0.0962c-0.19844,0.077-0.3317,0.15737-0.53593,0.23361-1.9064,0.71163-4.0665,1.3995-6.5136,2.0338-0.33484,0.0868-0.68501,0.16254-1.0306,0.24735l-0.0275-0.54968,1.1131-0.90694-1.3879-0.37104-0.52218-1.333-0.78328,1.2093-1.4429,0.0825,0.92069,1.1131-0.35728,1.333c-1.0089,0.21804-2.0688,0.42654-3.1606,0.63212l-0.0825-1.3467-1.4429,1.1955-1.8139-0.46722,0.45348,1.1268c-2.6968,0.44064-5.6166,0.83959-8.8085,1.1818-0.57667,0.0619-1.1794,0.1205-1.7727,0.17864l0.6596-1.4291-1.8276,0.37103-1.3742-1.2642-0.21987,1.8551-1.5116,0.83825c-1.9749,0.15401-4.0318,0.29599-6.1838,0.41225-4.451,0.24048-9.2924,0.39826-14.539,0.45348-0.46715,0.005-0.95541,0.0103-1.4291,0.0137l-0.0137-0.0137,0.20612-1.8551-1.6215,0.9207-1.704-0.76954,0.35729,1.7315c-4.0359,0.004-8.2987-0.0489-12.807-0.1649-4.7847-0.12309-9.2435-0.29095-13.536-0.46723l2.4735-0.15115-1.6628-2.0063,0.6596-2.5147-2.4186,0.96192-2.1987-1.4017,0.16491,2.5972-2.0063,1.649,2.5147,0.65961,0.0412,0.10992c-0.37019-0.0163-0.77408-0.0248-1.1406-0.0412-5.3084-0.23926-10.233-0.51532-14.8-0.82451-3.3272-0.22525-6.3996-0.47164-9.3581-0.72831l-0.35729-0.53592,0.72832-2.0063-2.0475,0.57716-1.6902-1.3055-0.0687,2.13-1.0306,0.70083c-3.385-0.55297-6.3575-1.9797-9.2757-2.3498-3.2502-0.41225-6.436,0.48658-9.1108,0.0412-2.6748-0.44539-5.0733-0.90794-7.2282-1.3742-1.8665-0.40386-3.4731-0.81209-4.9883-1.223zm136.3,3.4354,0.19238,0.12367c-0.3919,0.0914-0.80388,0.18585-1.2093,0.27484l1.0169-0.39851z"/>

  <path id="path3972" fill="#FFF" d="m180.85,249.61s6.2188,5.7746,6.663,12.438c0.4442,6.663,15.103-2.221,15.103-2.221s0-9.3282-6.2188-11.993c-6.2188-2.6652-15.547,1.7768-15.547,1.7768z"/>

  <path id="path4006-2" opacity="0.8048782" fill="url(#linearGradient5496)" d="m202.62,178.74c-5.4484,6.8537-13.254,11.079-41.671,10.779-25.542-0.26934-42.305-5.3016-46.316-7.7621-0.0533,0.81207-0.0678,1.6935-0.0412,2.6659,0.00004,6.9013,1.952,10.01,5.1119,12.423,1.6699,1.1302,2.7555,1.9128,4.2599,2.3361,0.73634,0.11067,1.5745,0.22481,2.4873,0.34354,0.34749,0.0122,0.71279,0.0219,1.1131,0.0137v0.13742c2.4389,0.29842,5.436,0.35753,9.0833,0.89322,13.345,1.9601,43.411,2.7912,47.6,1.5214,3.5578-1.0786,7.5981-2.3306,7.8348-2.3871,10.506-4.3746,9.587-9.6531,10.183-18.469-0.0531-0.52899-0.005-1.0432,0.0412-1.5528z"/>

  <path id="path4008" opacity="0.57073215" fill="url(#linearGradient5493)" d="m128.79,200.63c0.0127,0.52809,0.0137-3.3425,0.0137-2.7621,0,0.39995-0.008,4.2679-0.0137,4.6447v13.81c5.674,1.6344,14.093,3.636,25.34,5.1806,18.518,2.5432,30.99-3.1514,36.155-5.7441-0.38718-0.0692-0.76603-0.13929-1.1543-0.20613v-14.979c-15.796,5.2509-44.032,3.0975-60.34,0.0549z"/>

  <path id="path4014" opacity="0.12195123" fill="#216778" d="m132.73,218.44s17.747,5.8108,31.881,4.0833,21.516-5.6538,21.516-5.6538-20.416,5.6538-33.451,3.6121c-13.035-2.0416-19.945-2.0416-19.945-2.0416z"/>

  <path id="path4018" fill="#FFF" d="m167.28,215.3c-1.2564,0-3.298-0.62819-3.6121,1.0994-0.31409,1.7275-2.1987,4.8685,0.6282,5.0256,2.8269,0.15705,5.3397-0.62819,5.3397-0.62819s3.298-1.4134,2.0416-2.5128-2.5128-3.4551-4.3974-2.9839z"/>

  <path id="path4020" fill="#FFF" d="m103.74,411.3s-19.284-6.4409-15.393-4.8862c3.8913,1.5547,8.5402,5.236,22.016,8.1819,21.521,4.7048,64.06,5.9839,74.36,4.3412,10.172-1.6222,34.33-6.3043,38.908-10.746,4.578-4.442,6.4636-8.2177,6.4636-9.9945s-1.4414,0.8884-2.8148,3.1094-9.0426,7.3293-12.934,8.4398c-3.8913,1.1105-19.85,5.964-29.918,6.7327-19.916,1.5208-37.268,2.3222-63.141-1.4469-1.359-0.19798-17.547-3.7311-17.547-3.7311z"/>

  <path id="path4054" opacity="0.48292679" d="m370,532.36c0,2.3669-3.198,4.2857-7.1428,4.2857-3.9449,0-7.1429-1.9188-7.1429-4.2857s3.198-4.2857,7.1429-4.2857,7.1428,1.9188,7.1428,4.2857z" transform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" fill="#FFF"/>

  <path id="path4060" opacity="0.707561" d="m79.069,405.58,1.9101,5.0295c0.95103,2.5128,3.4828,4.0852,6.0189,4.7134,2.5361,0.62819,38.258,9.5494,77.392,10.361,29.926,0.62086,52.564-6.7071,52.564-6.7071s10.271-1.8484,13.645-8.9997c0.88398-1.8736,2.0455-3.0814,2.2399-4.3149-0.49287,0.59843-1.0084,1.202-1.5666,1.8552-37.033,25.427-114.11,11.545-135.4,6.541,0,0-14.587-3.139-16.806-8.4787z" fill-opacity="0.89803922" fill="#74a3e1"/>

  <path id="path4181" transform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" fill="#ffe680" d="m413.15,749.82,12.469,12.708,17.613-2.595-8.2333,15.785,7.9109,15.95-17.557-2.9523-12.724,12.452-2.6176-17.61-15.775-8.2535,15.939-7.9313z"/>

  <path id="path4183" transform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" fill="#ffe680" d="m407.6,766.99-8.5014-1.2707-6.0329,6.1232-1.4186-8.478-7.6878-3.8454,7.6247-3.969,1.2816-8.4998,6.1309,6.025,8.4798-1.4077-3.8356,7.6927z"/>

  <path id="path4185" transform="matrix(0.4397366,0,0,0.4397366,2.2859156,10.281652)" fill="#ffe680" d="m332.85,701.84-5.3054-11.129-12.119-2.2647,8.9445-8.4847-1.5911-12.225,10.833,5.8848,11.135-5.2911-2.2491,12.122,8.4732,8.9554-12.223,1.6068z"/>

  <path id="path4187" transform="matrix(0.4397366,0,0,0.4397366,54.70164,-160.29154)" fill="#ffe680" d="m285.71,593.08-16.493-7.4482-15.732,8.9453,1.987-17.988-13.369-12.198,17.721-3.6688,7.4694-16.484,8.9655,15.72,17.985,2.01-12.18,13.385z"/>

  <path id="path4189" transform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" fill="#ffe680" d="m315,545.93-7.1934-3.7328-7.2527,3.6162,1.3272-7.9948-5.6804-5.7803,8.0137-1.2083,3.742-7.1886,3.6255,7.2481,7.9932,1.3375-5.773,5.6879z"/>

  <path id="path4191" transform="matrix(0.4397366,0,0,0.4397366,-0.37928625,-10.151595)" fill="#ffe680" d="m418.57,689.51-13.513-3.6808-10.932,8.7548-0.67514-13.989-11.704-7.6914,13.096-4.965,3.6981-13.508,8.7688,10.921,13.99-0.6572-7.6764,11.714z"/>

  <path id="path4193" transform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" fill="#ffe680" d="m565.69,462.43-4.4564,1.5263-1.3903,4.5006-2.8287-3.7666-4.71,0.0685,2.7081-3.8542-1.5206-4.4583,4.5024,1.3846,3.7702-2.8239,0.0745,4.7099z"/>

  <path id="path4195" transform="matrix(0.4397366,0,0,0.4397366,8.504728,-4.8211828)" fill="#ffe680" d="m546.49,364.45-3.5847-1.1622-3.0501,2.2131-0.002-3.7684-3.0473-2.217,3.5832-1.1668,1.1668-3.5832,2.217,3.0473,3.7684,0.002-2.2131,3.0501z"/>

  <path id="path4197" transform="matrix(0.23610788,0,0,0.23610788,-1.1523096,-80.419504)" fill="#ffe680" d="m609.12,549.31-9.6655-16.009-18.63-1.6139,12.238-14.139-4.2222-18.217,17.229,7.27,16.021-9.645-1.59,18.632,14.124,12.256-18.212,4.2455z"/>

  <path id="path4199" transform="matrix(0.4397366,0,0,0.4397366,-170.06409,-173.61758)" fill="#ffe680" d="m591.95,637.19-5.9582,0.0491-3.4687,4.8446-1.8878-5.6514-5.6794-1.8018,4.7914-3.5418-0.0414-5.9582,4.8491,3.4624,5.6538-1.8806-1.7945,5.6817z"/>

  <use id="use4287" xlink:href="#path4199" transform="translate(81.302615,-54.775808)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4289" xlink:href="#path4199" transform="translate(62.254277,10.57392)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4299" xlink:href="#path4199" transform="translate(45.830696,35.878233)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4313" xlink:href="#path4199" transform="matrix(0.30961853,0.95086085,-0.95086085,0.30961853,221.69451,166.87572)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4315" xlink:href="#path4199" transform="translate(111.69367,188.89403)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4317" xlink:href="#path4199" transform="translate(64.621361,54.088313)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4321" xlink:href="#path4199" transform="translate(60.955585,256.64461)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4323" xlink:href="#path4199" transform="translate(47.340369,261.48197)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4325" xlink:href="#path4199" transform="translate(42.152758,275.99741)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4327" xlink:href="#path4199" transform="translate(35.565617,289.09405)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4329" xlink:href="#path4199" transform="translate(15.970064,264.21442)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4331" xlink:href="#path4199" transform="translate(31.921077,273.18739)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4335" xlink:href="#path4199" transform="translate(120.86559,268.76856)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4337" xlink:href="#path4199" transform="translate(103.84099,281.2413)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4339" xlink:href="#path4199" transform="translate(103.93404,256.96121)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4341" xlink:href="#path4199" transform="translate(113.98788,274.94484)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4343" xlink:href="#path4199" transform="translate(131.28988,277.1971)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4345" xlink:href="#path4199" transform="translate(140.39688,267.67271)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4347" xlink:href="#path4199" transform="translate(114.14634,262.37926)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4349" xlink:href="#path4199" transform="translate(100.54482,243.82506)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4351" xlink:href="#path4199" transform="translate(13.122099,290.83352)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4353" xlink:href="#path4199" transform="translate(71.100604,280.58709)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4355" xlink:href="#path4199" transform="translate(43.264893,293.08331)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <path id="path4197-8" transform="matrix(-0.07636465,-0.12451087,0.12451087,-0.07636465,258.08449,290.21928)" fill="#ffd42a" d="m609.12,549.31-9.6655-16.009-18.63-1.6139,12.238-14.139-4.2222-18.217,17.229,7.27,16.021-9.645-1.59,18.632,14.124,12.256-18.212,4.2455z"/>

  <use id="use4383" xlink:href="#path4197-8" transform="translate(-149.38789,167.64575)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4385" xlink:href="#path4197-8" transform="translate(-114.57512,160.30341)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4393" xlink:href="#path4197-8" transform="translate(-165.47561,154.10681)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4399" xlink:href="#path4197-8" transform="translate(-184.61216,158.57948)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4403" xlink:href="#path4197-8" transform="translate(-148.33399,159.22984)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4405" xlink:href="#path4197-8" transform="matrix(-0.01473266,0.48111173,-0.48111173,-0.01473266,223.00493,159.06577)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4407" xlink:href="#path4197-8" transform="translate(-94.582502,159.69288)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4409" xlink:href="#path4197-8" transform="translate(-78.439683,161.82763)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4411" xlink:href="#path4197-8" transform="translate(-82.856005,143.99185)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4413" xlink:href="#path4197-8" transform="translate(-81.185899,169.67442)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4415" xlink:href="#path4197-8" transform="translate(-122.66704,164.03518)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4419" xlink:href="#path4197-8" transform="translate(-75.163228,179.83643)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4421" xlink:href="#path4197-8" transform="translate(-67.390065,165.83798)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4425" xlink:href="#path4197-8" transform="translate(-108.504,168.59464)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4429" xlink:href="#path4197-8" transform="translate(-115.75362,73.921366)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <path id="path4478" opacity="0.47804877" d="m392.14,402.36c0,6.3118-32.939,11.429-73.571,11.429s-73.571-5.1167-73.571-11.429c0-6.3118,32.939-11.429,73.571-11.429s73.571,5.1168,73.571,11.429z" transform="matrix(0.44963291,0,0,0.4397366,16.950548,2.5081342)" fill="url(#linearGradient5508)"/>

  <path id="path4488" fill="#FFF" d="m134.88,186.98c0,1.1804,42.199,4.0295,54.193,0.22209,11.953-3.7946-4.6641,2.11-4.6641,2.11s-6.1078,0.99946-6.663,0.99946c-0.55526,0-21.766-0.33316-21.766-0.33316-3.0214-0.2823-19.545-1.8362-21.1-2.9983z"/>

  <path id="path4511" opacity="0.26829266" fill="#FFF" d="m166.73,190.04c-0.0661,0.14321-0.11618,0.16932-0.19238,0.41718-0.6663,2.1673,0.8884,4.0933,0,7.4647s-0.21986,5.0659-0.21986,5.0659c1.875,0.25749,3.6267,0.66569,6.2113,0v-4.3358c0-1.2041,0.67336-5.2998,0.67336-7.2263,0-0.45498-0.0745-0.88253-0.17866-1.2814-2.0796-0.0336-3.1867-0.0522-6.2937-0.10429z"/>

  <path id="path4735" d="m387.34,480.37c-2.8571,0-7.5-1.4286-8.2143,2.5-0.71428,3.9286-5,11.071,1.4286,11.429,6.4286,0.35714,12.143-1.4286,12.143-1.4286s7.5-3.2143,4.6429-5.7143-5.7143-7.8571-10-6.7857z" transform="matrix(0.4397366,0,0,0.4397366,-3.0444959,4.0628394)" filter="url(#filter4761)" fill="#FFF"/>

  <path id="path4193-4" transform="matrix(0.81518658,0,0,0.33897455,-208.41403,260.8766)" fill="#ffd42a" d="m565.69,462.43-4.4564,1.5263-1.3903,4.5006-2.8287-3.7666-4.71,0.0685,2.7081-3.8542-1.5206-4.4583,4.5024,1.3846,3.7702-2.8239,0.0745,4.7099z"/>

  <use id="use4907" xlink:href="#path4193-4" transform="translate(-178.51762,7.4455083)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4909" xlink:href="#path4193-4" transform="translate(-176.38233,16.130537)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4911" xlink:href="#path4193-4" transform="translate(-200.31131,-3.1176482)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4913" xlink:href="#path4193-4" transform="translate(-201.3673,-9.2702788)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4917" xlink:href="#path4193-4" transform="translate(-182.09564,-19.311584)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4937" xlink:href="#path4193-4" transform="translate(-214.90673,6.8726282)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4939" xlink:href="#path4193-4" transform="translate(-106.11132,18.035262)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4943" xlink:href="#path4193-4" transform="translate(39.384836,-21.07402)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4963" xlink:href="#path4193-4" transform="translate(14.133969,-43.487368)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4979" xlink:href="#path4193-4" transform="translate(1.3594611,33.719651)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4981" xlink:href="#path4193-4" transform="translate(5.3380816,-2.496643)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4983" xlink:href="#path4193-4" transform="translate(25.622812,-0.23785141)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4299-9" xlink:href="#path4199" transform="matrix(0.62080615,0,0,0.62080615,96.082378,146.03503)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use4299-9-4" xlink:href="#path4199" transform="matrix(0.62080615,0,0,0.62080615,116.63684,113.9255)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <path id="path5032" d="m418.2,558.4s14.142,13.132,15.152,28.284c1.0102,15.152,34.345-5.0508,34.345-5.0508s0-21.213-14.142-27.274c-14.142-6.0609-35.355,4.0406-35.355,4.0406z" transform="matrix(0.4397366,0,0,0.4397366,-3.0444959,4.0628394)" filter="url(#filter5046)" fill="#FFF"/>

  <path id="path5062" d="m546.35,388.19c0,0.83684-1.0977,1.5152-2.4517,1.5152s-2.4517-0.67839-2.4517-1.5152c0-0.83684,1.0977-1.5152,2.4517-1.5152s2.4517,0.67839,2.4517,1.5152z" transform="matrix(0.4397366,0,0,0.4397366,-3.0444959,4.0628394)" fill="#FFF"/>

  <use id="use5064" xlink:href="#path5062" transform="translate(-135.16989,-34.307236)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5074" xlink:href="#path5062" transform="translate(-162.77698,-0.02426404)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5076" xlink:href="#path5062" transform="translate(-185.19885,33.793334)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5098" xlink:href="#path5062" transform="translate(-135.52107,-22.63241)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5120" xlink:href="#path5062" transform="translate(-65.971352,-30.927478)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5122" xlink:href="#path5062" transform="translate(-106.01296,-40.653327)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5124" xlink:href="#path5062" transform="translate(-85.060493,-45.882569)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5126" xlink:href="#path5062" transform="translate(-50.427285,-81.676209)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5128" xlink:href="#path5062" transform="translate(-54.019512,-86.722609)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5130" xlink:href="#path5062" transform="translate(-69.899463,-91.943917)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5146" xlink:href="#path5062" transform="translate(-29.503091,-115.34121)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5148" xlink:href="#path5062" transform="translate(-20.274754,-129.61193)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5150" xlink:href="#path5062" transform="translate(-11.986431,28.207932)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5152" xlink:href="#path5062" transform="translate(23.8638,28.893576)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5154" xlink:href="#path5062" transform="translate(15.292677,46.327602)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5156" xlink:href="#path5062" transform="translate(-138.49133,31.995957)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5158" xlink:href="#path5062" transform="translate(-178.69761,-45.455552)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5180" xlink:href="#path5062" transform="translate(17.572635,-67.946423)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5182" xlink:href="#path5062" transform="translate(18.381394,-92.883363)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5184" xlink:href="#path5062" transform="translate(13.457479,-25.955549)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5186" xlink:href="#path5062" transform="translate(-2.8510475,-62.005751)" height="1052.3622" width="744.09448" y="0" x="0"/>

  <use id="use5188" xlink:href="#path5062" transform="translate(31.393599,-63.565682)" height="1052.3622" width="744.09448" y="0" x="0"/>

 </g>

 <g id="layer3" transform="translate(-14.197589,-11.027445)">

  <path id="path3970" opacity="0.53170734" fill="url(#linearGradient4201)" d="m108.94,225.7s-23.087,10.842-24.419,25.301c-1.3326,14.459-2.2262,43.375-2.2262,43.375l1.3329,21.694s4.003-0.008,2.2262,4.9623c-1.7768,4.9704,0.43493,18.979-0.45347,22.142-0.8884,3.1629-3.1101,9.0398-2.6659,10.847,0.44421,1.8074-1.3281,19.878-0.43973,22.589,0.8884,2.7111,0.43973,10.847,0.43973,10.847v9.9386s2.2286,7.6888,11.557,10.4c3.8493,1.1187,10.134,1.8257,17.393,2.903l-0.0785-44.433c-0.002-1.3695,0.0211-2.5697,0.0275-3.858-0.79148-1.6488-1.1606-3.7455-0.90695-6.5838,0.19659-2.1999,0.63656-4.8154,1.1818-7.6602,0.0536-0.87141,0.11742-1.3978,0.17864-1.3978h0.0825c1.9376-9.8036,4.8788-22.095,3.8889-31.158-1.3326-12.2-3.1101-25.302-2.6659-29.369,0.44421-4.0667-0.44998-24.405,12.876-35.701s-2.6673-9.0311-7.9977-13.098c-5.3304-4.0667-9.3306-11.742-9.3306-11.742z"/>

  <path id="path4042" opacity="0.48292679" fill="url(#radialGradient4052-4)" d="m235.13,248.52s2.5542,7.8846-54.637,19.545c-63.277,12.901-83.51-14.214-83.51-14.214s-0.88841,23.987-0.88841,28.429,0.88841,92.394,0.88841,97.724c0,5.3304,5.3304,18.656,5.3304,18.656s5.3304,7.9956,17.768,9.7724,95.059,1.7768,99.501-1.7768,12.438-12.438,12.438-12.438,4.442-6.2188,2.6652-14.214c-1.7768-7.9956,0.4442-131.48,0.4442-131.48z"/>

  <path id="path4656" opacity="0.48292679" d="m541.63,555.91s5.8084,17.93-124.25,44.447c-143.9,29.338-189.91-32.325-189.91-32.325s-2.0203,54.548-2.0203,64.65,2.0203,210.11,2.0203,222.23c0,12.122,12.122,42.426,12.122,42.426s12.122,18.183,40.406,22.223c28.284,4.0406,216.17,4.0406,226.27-4.0406,10.102-8.0812,28.284-28.284,28.284-28.284s10.102-14.142,6.0609-32.325c-4.0406-18.183,1.0102-299.01,1.0102-299.01z" transform="matrix(0.4397366,0,0,0.4397366,-3.0444959,4.0628394)" filter="url(#filter4670)" fill="url(#radialGradient5391)"/>

  <path id="path4710" opacity="0.53170734" d="m254.66,504.03s-52.501,24.655-55.531,57.536c-3.0305,32.881-5.0625,98.638-5.0625,98.638l3.0312,49.335s9.1031-0.0182,5.0625,11.285,0.98906,43.16-1.0312,50.352c-2.0203,7.1928-7.0727,20.557-6.0625,24.668,1.0102,4.1102-3.0203,45.204-1,51.37,2.0203,6.1653,1,24.668,1,24.668v22.601s5.068,17.485,26.281,23.65c8.7537,2.5441,23.045,4.1519,39.554,6.6017l-0.17857-101.04c-0.006-3.1144,0.0479-5.8437,0.0625-8.7735-1.7999-3.7496-2.6394-8.5176-2.0625-14.972,0.4471-5.0028,1.4476-10.951,2.6875-17.42,0.12182-1.9816,0.26703-3.1788,0.40625-3.1788h0.1875c4.4062-22.294,11.095-50.247,8.8438-70.856-3.0305-27.744-7.0726-57.539-6.0625-66.787,1.0102-9.2479-1.0233-55.498,29.281-81.187,30.305-25.689-6.0657-20.538-18.188-29.785-12.122-9.2479-21.219-26.702-21.219-26.702z" transform="matrix(0.4397366,0,0,0.4397366,-3.0444959,4.0628394)" filter="url(#filter4716)" fill="url(#linearGradient5393)"/>

 </g>

</svg>


              
            
!

CSS

              
                #path4187{
    -webkit-animation: Star 1s infinite;
  
 }
@-webkit-keyframes Star {
  from{
    fill: #0044aa;
  }  
  to {
    fill: #ffe680;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console