Pen Settings

HTML

CSS

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.

+ 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

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.

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

              
                <svg id="e72771cf-8548-4b13-9199-aa8cd6e4fee1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1001" height="550.95456" viewBox="0 0 1001 550.95456">
  <title>unDraw_1000</title>
  <rect x="1" y="547.69751" width="1000" height="2" fill="#3f3d56" />
  <path d="M735.89835,598.07072s0,68.257,15.66554,86.16044c0,0,3.3569,8.95173,4.47587,12.30863a47.0472,47.0472,0,0,0,2.23793,5.59484v4.47587s30.2121-3.3569,33.569-11.18967l-5.59483-6.7138s-1.119-1.119,0-4.47587a2.29864,2.29864,0,0,0-2.23794-3.3569l-7.83276-17.90347,1.119-73.8518-5.59483-101.826-48.11557-2.23793Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <path d="M760.51562,699.89669s-7.83276,23.49831,0,24.61727,76.08974,2.23794,74.97078-6.7138-23.49831-7.83276-23.49831-7.83276l-23.4983-14.54657Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <path d="M691.13968,487.293s-2.23793,14.54657,6.71381,30.2121,3.3569,68.257,3.3569,68.257L621.76375,655.138s15.66553,26.85521,21.26036,25.73624,93.99321-72.73284,93.99321-72.73284l34.688-116.37254Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <path d="M622.85553,652.17313s-24.04067,5.96395-20.79253,13.17879,38.84421,65.46589,45.8061,59.72849-5.96395-24.04067-5.96395-24.04067l-.29326-27.63488Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <circle cx="635.27939" cy="104.64248" r="25.73624" fill="#ffb8b8" />
  <path d="M714.52967,288.24584l1.13832,33.11773,21.65512,8.55623s2.12366-33.91038,5.12142-35.79035S714.52967,288.24584,714.52967,288.24584Z" transform="translate(-99.5 -174.52272)" fill="#ffb8b8" />
  <path d="M742.61216,333.99457s-30.21211-30.2121-38.04487-29.09314-7.83277,4.47587-7.83277,6.7138,2.23793,3.3569,0,4.47587-4.47587,0-4.47587,3.3569-20.1414,36.9259-13.4276,73.85181,14.54657,54.82937,11.18967,74.97077-1.119,24.61727-1.119,24.61727,83.92251,6.7138,85.04147-1.119-3.3569-3.3569,2.23794-8.95173,3.3569-5.59484,3.3569-8.95174S754.92079,333.99457,742.61216,333.99457Z" transform="translate(-99.5 -174.52272)" fill="#575a89" />
  <path d="M726.94662,486.17405s13.4276,32.45,23.4983,24.61726-4.47586-34.688-4.47586-34.688Z" transform="translate(-99.5 -174.52272)" fill="#ffb8b8" />
  <path d="M694.49658,336.2325s-26.29016,3.00986-16.502,51.29895,47.833,104.23743,47.833,104.23743l25.73624-12.30863-33.569-66.019,7.83276-41.40177S730.30352,332.8756,694.49658,336.2325Z" transform="translate(-99.5 -174.52272)" fill="#575a89" />
  <polygon points="617.935 239.478 654.861 301.021 651.504 304.378 617.935 239.478" opacity="0.2" />
  <polygon points="598.39 268.158 628.006 316.687 617.935 316.687 598.39 268.158" opacity="0.2" />
  <path d="M723.13083,294.63c2.08351-1.10162,4.50375-1.32873,6.7589-2.01345,8.06829-2.44973,13.47322-11.5705,11.74763-19.824a10.11528,10.11528,0,0,1-.42376-3.26724c.30165-2.44445,2.8029-4.0217,5.20137-4.58178s4.95039-.47874,7.24281-1.37937c3.53954-1.3906,5.89072-5.02809,6.4004-8.79668a18.17088,18.17088,0,0,0-2.42733-10.952l-.86635,2.493a9.24721,9.24721,0,0,1-2.83074-4.23375,5.832,5.832,0,0,0-4.4435,3.5733c-1.39062.82-1.591-2.54755-3.127-3.04435a2.75911,2.75911,0,0,0-1.91726.4729c-3.0952,1.44361-6.69134.20933-10.01157-.59088a37.6878,37.6878,0,0,0-17.49529-.0206c-3.82183.91158-7.60478,2.499-10.33957,5.32a24.80936,24.80936,0,0,0-4.83683,8.31133c-2.93319,7.38193-4.87092,15.36941-3.90262,23.2535a32.91485,32.91485,0,0,0,7.75684,17.43943c2.21469,2.55167,9.4403,11.45374,13.40222,9.936C723.99739,304.81835,717.26524,297.7313,723.13083,294.63Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <rect x="709.49624" y="568.96077" width="82.62857" height="1.59219" transform="matrix(0.35636, -0.93435, 0.93435, 0.35636, -148.60029, 893.71385)" opacity="0.2" />
  <circle cx="642.95352" cy="164.02378" r="1.59181" fill="#d0cde1" />
  <line x1="642.95352" y1="164.02378" x2="656.48391" y2="207.79855" fill="#d0cde1" />
  <path d="M755.98391,383.11718a.79551.79551,0,0,1-.76016-.56118l-13.53038-43.77438a.79568.79568,0,1,1,1.5203-.47024l13.53039,43.77516a.79658.79658,0,0,1-.76015,1.03064Z" transform="translate(-99.5 -174.52272)" fill="#d0cde1" />
  <polygon points="253.312 479.929 249.14 530.824 264.993 530.824 273.336 479.929 253.312 479.929" fill="#ffb8b8" />
  <polygon points="355.103 479.929 350.931 530.824 366.784 530.824 375.127 479.929 355.103 479.929" fill="#ffb8b8" />
  <path d="M461.90074,374.76009l-1.60547,24.27231-9.03841,73.34073s-11.37724,34.55327,4.98458,30.87453,11.11169-32.7066,11.11169-32.7066l10.6171-68.59005,4.24392-24.26988Z" transform="translate(-99.5 -174.52272)" fill="#ffb8b8" />
  <polygon points="376.379 165.795 383.888 212.519 358.023 210.016 365.532 164.126 376.379 165.795" fill="#575a89" />
  <circle cx="340.91885" cy="100.29836" r="23.36187" fill="#ffb8b8" />
  <path d="M455.85438,282.74742s7.50917,16.68706,11.68093,25.86493,3.33741,10.84659,3.33741,10.84659H436.66427s3.33741-23.36187,0-25.86493S455.85438,282.74742,455.85438,282.74742Z" transform="translate(-99.5 -174.52272)" fill="#ffb8b8" />
  <path d="M450.01391,403.72855s46.72374-57.57033,23.36187-87.607c1.29181-.80515-8.082-11.6267-14.184-9.17788-1.09507.43946-24.19623,5.00611-27.53364,8.34353s-17.93858,20.44163-17.93858,20.44163-8.34353,10.01223-11.68094,31.7054-10.4294,32.95693-10.4294,32.95693" transform="translate(-99.5 -174.52272)" fill="#575a89" />
  <path d="M391.60923,400.39114l-1.66871,13.34964L355.31489,544.317,337.37631,659.87479c8.58529,14.05256,27.16064,16.29605,55.06727,7.50918l5.42329-113.88913,25.03058-62.57645L433.32686,667.384c22.67746,7.53672,43.13751,5.92643,61.74209-3.33741L463.78073,477.56875s15.43552-27.11646-12.09812-62.15926l-1.6687-11.68094" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <path d="M416.6398,370.35445,407.46193,392.882l-31.7054,66.7482s-21.69317,29.20234-5.00612,30.871,20.85882-27.53364,20.85882-27.53364l31.7054-61.74209,11.68093-21.69317Z" transform="translate(-99.5 -174.52272)" fill="#ffb8b8" />
  <path d="M367.83018,686.1569v13.46867s9.62047,22.12709,2.88614,24.05119-25.01324,0-27.89938,0-33.67167,2.88614-32.70962-5.77229,21.16505-14.43071,21.16505-14.43071l18.2789-17.31686Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <path d="M470.45555,686.1569v13.46867s9.62047,22.12709,2.88614,24.05119-25.01324,0-27.89938,0-33.67167,2.88614-32.70962-5.77229,21.16505-14.43071,21.16505-14.43071l18.2789-17.31686Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <path d="M445.00779,312.78412s-16.687,4.17176-24.19622,30.871-9.17788,30.871-9.17788,30.871l25.03058,11.68094L455.02,349.49563S465.86661,317.79023,445.00779,312.78412Z" transform="translate(-99.5 -174.52272)" fill="#575a89" />
  <path d="M415.46058,267.66936s-4.56507-35.52744,32.68287-23.87716c0,0,26.60272-4.88121,35.32679,28.39472L492.304,307.0683l-4.30511-2.34324-2.00706,4.38722L479.0155,310.879l-2.98532-5.9253-1.44416,7.19554-57.13952,5.69633s25.59165-15.13473,25.99746-42.25978l-4.87467,5.15126Z" transform="translate(-99.5 -174.52272)" fill="#2f2e41" />
  <polygon points="350.931 172.887 332.958 209.722 336.747 211.267 350.931 172.887" opacity="0.2" />
  <polygon points="330.072 167.881 312.551 200.421 309.213 200.421 330.072 167.881" opacity="0.2" />
  <polygon points="376.234 184.032 363.386 210.535 371.441 210.535 376.234 184.032" opacity="0.2" />
  <rect x="797.92567" y="46.62575" width="27.57756" height="2.29813" fill="#3f3d56" />
  <rect x="834.69575" y="46.62575" width="27.57756" height="2.29813" fill="#3f3d56" />
  <rect x="888.12728" y="67.88346" width="27.57756" height="2.29813" fill="#3f3d56" />
  <rect x="925.4719" y="67.88346" width="27.57756" height="2.29813" fill="#3f3d56" />
  <rect x="872.04037" y="46.62575" width="81.00909" height="2.29813" fill="#3f3d56" />
  <rect x="797.92567" y="67.88346" width="81.00909" height="2.29813" fill="#3f3d56" />
  <rect x="797.92567" y="89.14116" width="81.00909" height="2.29813" fill="#3f3d56" />
  <rect x="896.74527" y="89.14116" width="56.30419" height="2.29813" fill="#3f3d56" />
  <polygon points="790.174 56.328 780.472 46.626 790.174 36.923 792.115 38.864 784.354 46.626 792.115 54.387 790.174 56.328" fill="#26f967" />
  <polygon points="979.186 101.142 977.245 99.201 985.006 91.439 977.245 83.678 979.186 81.737 988.888 91.439 979.186 101.142" fill="#26f967" />
  <rect x="1057.00727" y="264.30208" width="19.81066" height="2.74546" transform="translate(403.71605 1035.14986) rotate(-73.13998)" fill="#d0cde1" />
  <path d="M123.41022,697.51164c4.33284,16.01679,19.1738,25.9364,19.1738,25.9364s7.816-16.04875,3.4832-32.06554-19.17381-25.93639-19.17381-25.93639S119.07738,681.49486,123.41022,697.51164Z" transform="translate(-99.5 -174.52272)" fill="#26f967" />
  <path d="M143.682,723.98312l-.59162-.03231c-.18021-.00959-18.15524-1.11762-30.04622-12.69259-11.89047-11.575-13.48133-29.51391-13.496-29.69412L99.5,680.974l.59162.03231c.18021.00959,18.15524,1.11762,30.046,12.69259,11.89073,11.57548,13.48159,29.51391,13.49623,29.69412Zm-43.03714-41.895c.38995,3.20242,2.73751,18.32207,13.12066,28.4291,10.38314,10.108,25.55958,12.048,28.7716,12.35185-.38995-3.20293-2.73751-18.32157-13.12091-28.4291h0C119.02551,684.32432,103.85538,682.39045,100.64488,682.08808Z" transform="translate(-99.5 -174.52272)" fill="#3f3d56" />
  <path d="M1026.4729,695.27512c-4.53524,16.765-20.06944,27.14792-20.06944,27.14792s-8.18114-16.79841-3.6459-33.56336,20.06944-27.14792,20.06944-27.14792S1031.00814,678.51017,1026.4729,695.27512Z" transform="translate(-99.5 -174.52272)" fill="#26f967" />
  <path d="M1005.30463,722.36545c.01533-.18863,1.6805-18.965,14.12666-31.08118,12.44615-12.11566,31.26082-13.27544,31.44945-13.28548l.61926-.03382-.05046.61768c-.01532.18863-1.6805,18.96552-14.12639,31.08117-12.44642,12.11566-31.26109,13.27544-31.44972,13.28548l-.61926.03382Zm14.88171-30.30552h0c-10.86843,10.57966-13.32564,26.40452-13.73381,29.75706,3.36206-.31808,19.24741-2.34863,30.11557-12.92882,10.86816-10.57914,13.32537-26.405,13.73354-29.75707C1046.94117,679.4476,1031.06242,681.4718,1020.18634,692.05993Z" transform="translate(-99.5 -174.52272)" fill="#3f3d56" />
  <path d="M236.82767,287.91179l-11.26653,11.26652-11.31159-11.31159a29.92092,29.92092,0,0,1,22.57812.04507Z" transform="translate(-99.5 -174.52272)" fill="#26f967" />
  <path d="M225.56122,300.08853l-17.51435-17.50712,17.51435-17.51467,17.50744,17.51435Zm-15.693-17.50775,15.693,15.687,15.68669-15.68669-15.68669-15.693Z" transform="translate(-99.5 -174.52272)" fill="#3f3d56" />
  <polygon points="130.372 57.485 126.27 62.332 122.168 57.485 122.168 37.828 130.372 37.828 130.372 57.485" fill="#26f967" />
  <path d="M238.82337,196.39893h-4.40669a10.43192,10.43192,0,0,0,1.83574-5.92481c0-5.78924-4.69311-15.9514-10.48236-15.9514s-10.48235,10.16216-10.48235,15.9514a10.43192,10.43192,0,0,0,1.83574,5.92481h-4.40669a3.36373,3.36373,0,0,0-3.35387,3.35386v2.40738a3.36373,3.36373,0,0,0,3.35387,3.35386h26.10661a3.36373,3.36373,0,0,0,3.35387-3.35386v-2.40738A3.36373,3.36373,0,0,0,238.82337,196.39893Z" transform="translate(-99.5 -174.52272)" fill="#3f3d56" />
  <path d="M229.7947,249.31385a4.02464,4.02464,0,0,1-8.04927,0c0-2.22275,4.02463-6.70773,4.02463-6.70773S229.7947,247.0911,229.7947,249.31385Z" transform="translate(-99.5 -174.52272)" fill="#26f967" />
  <path d="M225.77006,240.82925l-6.438-5.72254V201.33982h12.876v33.76689Zm-5.15041-6.301,5.15041,4.57829,5.15042-4.57829V202.62743H220.61965Z" transform="translate(-99.5 -174.52272)" fill="#3f3d56" />
  <rect x="272.72456" y="272.91593" width="23.47857" height="23.47857" transform="translate(573.64436 214.41922) rotate(150)" fill="#3f3d56" />
  <rect x="154.90889" y="270.98453" width="23.47857" height="23.47857" transform="translate(352.83163 269.723) rotate(150)" fill="#d0cde1" />
</svg>
              
            
!

CSS

              
                svg {
  width: 600px;
  height: 600px;
  padding: 5px;
}
svg:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

              
            
!

JS

              
                
              
            
!
999px

Console