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.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              <div class="container">
  <img src="https://jmperezperez.com/cssconfau16/assets/melbourne.jpg">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 426" preserveAspectRatio="xMidYMid meet"><g><path d="M-50,-28L-27,512L-46,12Z" fill="rgb(209,168,180)" stroke="rgb(209,168,180)"/><path d="M-50,-28L-46,12L26,30Z" fill="rgb(82,102,142)" stroke="rgb(82,102,142)"/><path d="M-50,-28L26,30L52,-7Z" fill="rgb(81,100,140)" stroke="rgb(81,100,140)"/><path d="M-50,-28L52,-7L67,-34Z" fill="rgb(89,103,140)" stroke="rgb(89,103,140)"/><path d="M-50,-28L67,-34L128,-47Z" fill="rgb(79,101,144)" stroke="rgb(79,101,144)"/><path d="M52,-7L26,30L101,36Z" fill="rgb(92,107,141)" stroke="rgb(92,107,141)"/><path d="M52,-7L101,36L67,-34Z" fill="rgb(67,97,139)" stroke="rgb(67,97,139)"/><path d="M67,-34L101,36L128,-47Z" fill="rgb(68,96,143)" stroke="rgb(68,96,143)"/><path d="M128,-47L101,36L156,36Z" fill="rgb(96,110,151)" stroke="rgb(96,110,151)"/><path d="M128,-47L156,36L192,-10Z" fill="rgb(165,137,171)" stroke="rgb(165,137,171)"/><path d="M128,-47L192,-10L271,-32Z" fill="rgb(175,140,169)" stroke="rgb(175,140,169)"/><path d="M128,-47L271,-32L394,-51Z" fill="rgb(135,123,159)" stroke="rgb(135,123,159)"/><path d="M192,-10L156,36L226,15Z" fill="rgb(207,156,171)" stroke="rgb(207,156,171)"/><path d="M192,-10L226,15L271,-32Z" fill="rgb(162,135,166)" stroke="rgb(162,135,166)"/><path d="M271,-32L226,15L259,36Z" fill="rgb(168,140,166)" stroke="rgb(168,140,166)"/><path d="M271,-32L259,36L308,30Z" fill="rgb(130,120,150)" stroke="rgb(130,120,150)"/><path d="M271,-32L308,30L318,-26Z" fill="rgb(87,110,142)" stroke="rgb(87,110,142)"/><path d="M271,-32L318,-26L394,-51Z" fill="rgb(79,101,136)" stroke="rgb(79,101,136)"/><path d="M318,-26L308,30L405,31Z" fill="rgb(70,95,130)" stroke="rgb(70,95,130)"/><path d="M318,-26L405,31L394,-51Z" fill="rgb(45,76,118)" stroke="rgb(45,76,118)"/><path d="M394,-51L405,31L444,-19Z" fill="rgb(38,77,118)" stroke="rgb(38,77,118)"/><path d="M394,-51L444,-19L511,-45Z" fill="rgb(37,76,118)" stroke="rgb(37,76,118)"/><path d="M394,-51L511,-45L587,-46Z" fill="rgb(45,76,119)" stroke="rgb(45,76,119)"/><path d="M444,-19L405,31L465,27Z" fill="rgb(34,76,114)" stroke="rgb(34,76,114)"/><path d="M444,-19L465,27L511,-45Z" fill="rgb(38,77,118)" stroke="rgb(38,77,118)"/><path d="M511,-45L465,27L534,44Z" fill="rgb(47,78,118)" stroke="rgb(47,78,118)"/><path d="M511,-45L534,44L565,36Z" fill="rgb(46,83,121)" stroke="rgb(46,83,121)"/><path d="M511,-45L565,36L587,-46Z" fill="rgb(41,81,121)" stroke="rgb(41,81,121)"/><path d="M587,-46L565,36L612,-15Z" fill="rgb(47,82,124)" stroke="rgb(47,82,124)"/><path d="M587,-46L612,-15L705,-16Z" fill="rgb(64,85,126)" stroke="rgb(64,85,126)"/><path d="M612,-15L565,36L619,52Z" fill="rgb(69,91,127)" stroke="rgb(69,91,127)"/><path d="M612,-15L619,52L699,33Z" fill="rgb(86,95,130)" stroke="rgb(86,95,130)"/><path d="M612,-15L699,33L705,-16Z" fill="rgb(69,86,130)" stroke="rgb(69,86,130)"/><path d="M705,-16L699,33L713,252Z" fill="rgb(115,118,155)" stroke="rgb(115,118,155)"/><path d="M-46,12L-27,512L-24,343Z" fill="rgb(152,81,98)" stroke="rgb(152,81,98)"/><path d="M-46,12L-24,343L-25,259Z" fill="rgb(11,11,20)" stroke="rgb(11,11,20)"/><path d="M-46,12L-25,259L-26,144Z" fill="rgb(162,149,154)" stroke="rgb(162,149,154)"/><path d="M-46,12L-26,144L-8,113Z" fill="rgb(111,101,132)" stroke="rgb(111,101,132)"/><path d="M-46,12L-8,113L26,30Z" fill="rgb(93,107,144)" stroke="rgb(93,107,144)"/><path d="M26,30L-8,113L43,75Z" fill="rgb(126,122,150)" stroke="rgb(126,122,150)"/><path d="M26,30L43,75L89,68Z" fill="rgb(72,101,137)" stroke="rgb(72,101,137)"/><path d="M26,30L89,68L101,36Z" fill="rgb(87,107,140)" stroke="rgb(87,107,140)"/><path d="M101,36L89,68L133,80Z" fill="rgb(64,96,130)" stroke="rgb(64,96,130)"/><path d="M101,36L133,80L156,36Z" fill="rgb(80,102,135)" stroke="rgb(80,102,135)"/><path d="M156,36L133,80L229,72Z" fill="rgb(101,114,151)" stroke="rgb(101,114,151)"/><path d="M156,36L229,72L226,15Z" fill="rgb(250,196,191)" stroke="rgb(250,196,191)"/><path d="M226,15L229,72L259,36Z" fill="rgb(214,156,164)" stroke="rgb(214,156,164)"/><path d="M259,36L229,72L285,112Z" fill="rgb(158,135,160)" stroke="rgb(158,135,160)"/><path d="M259,36L285,112L308,30Z" fill="rgb(103,116,144)" stroke="rgb(103,116,144)"/><path d="M308,30L285,112L312,106Z" fill="rgb(130,119,142)" stroke="rgb(130,119,142)"/><path d="M308,30L312,106L388,107Z" fill="rgb(91,111,142)" stroke="rgb(91,111,142)"/><path d="M308,30L388,107L405,31Z" fill="rgb(78,95,126)" stroke="rgb(78,95,126)"/><path d="M405,31L388,107L445,105Z" fill="rgb(175,133,151)" stroke="rgb(175,133,151)"/><path d="M405,31L445,105L465,27Z" fill="rgb(86,95,128)" stroke="rgb(86,95,128)"/><path d="M465,27L445,105L489,80Z" fill="rgb(119,112,143)" stroke="rgb(119,112,143)"/><path d="M465,27L489,80L534,44Z" fill="rgb(76,97,133)" stroke="rgb(76,97,133)"/><path d="M534,44L489,80L548,134Z" fill="rgb(118,119,148)" stroke="rgb(118,119,148)"/><path d="M534,44L548,134L594,94Z" fill="rgb(250,240,233)" stroke="rgb(250,240,233)"/><path d="M534,44L594,94L565,36Z" fill="rgb(90,102,137)" stroke="rgb(90,102,137)"/><path d="M565,36L594,94L619,52Z" fill="rgb(89,103,140)" stroke="rgb(89,103,140)"/><path d="M619,52L594,94L619,75Z" fill="rgb(93,108,143)" stroke="rgb(93,108,143)"/><path d="M619,52L619,75L673,93Z" fill="rgb(99,107,143)" stroke="rgb(99,107,143)"/><path d="M619,52L673,93L699,33Z" fill="rgb(104,109,143)" stroke="rgb(104,109,143)"/><path d="M699,33L673,93L676,143Z" fill="rgb(115,118,155)" stroke="rgb(115,118,155)"/><path d="M699,33L676,143L713,252Z" fill="rgb(142,132,164)" stroke="rgb(142,132,164)"/><path d="M-8,113L-26,144L36,169Z" fill="rgb(218,164,166)" stroke="rgb(218,164,166)"/><path d="M-8,113L36,169L43,75Z" fill="rgb(89,86,107)" stroke="rgb(89,86,107)"/><path d="M43,75L36,169L100,129Z" fill="rgb(85,82,104)" stroke="rgb(85,82,104)"/><path d="M43,75L100,129L89,68Z" fill="rgb(117,124,152)" stroke="rgb(117,124,152)"/><path d="M89,68L100,129L133,80Z" fill="rgb(102,113,141)" stroke="rgb(102,113,141)"/><path d="M133,80L100,129L131,169Z" fill="rgb(132,119,135)" stroke="rgb(132,119,135)"/><path d="M133,80L131,169L228,166Z" fill="rgb(219,165,164)" stroke="rgb(219,165,164)"/><path d="M133,80L228,166L229,72Z" fill="rgb(147,127,144)" stroke="rgb(147,127,144)"/><path d="M229,72L228,166L285,112Z" fill="rgb(218,163,162)" stroke="rgb(218,163,162)"/><path d="M285,112L228,166L259,165Z" fill="rgb(255,223,181)" stroke="rgb(255,223,181)"/><path d="M285,112L259,165L324,147Z" fill="rgb(53,35,57)" stroke="rgb(53,35,57)"/><path d="M285,112L324,147L312,106Z" fill="rgb(199,145,147)" stroke="rgb(199,145,147)"/><path d="M312,106L324,147L388,107Z" fill="rgb(140,126,135)" stroke="rgb(140,126,135)"/><path d="M388,107L324,147L381,144Z" fill="rgb(64,43,43)" stroke="rgb(64,43,43)"/><path d="M388,107L381,144L436,156Z" fill="rgb(118,69,100)" stroke="rgb(118,69,100)"/><path d="M388,107L436,156L445,105Z" fill="rgb(231,167,159)" stroke="rgb(231,167,159)"/><path d="M445,105L436,156L517,136Z" fill="rgb(193,142,153)" stroke="rgb(193,142,153)"/><path d="M445,105L517,136L489,80Z" fill="rgb(148,130,150)" stroke="rgb(148,130,150)"/><path d="M489,80L517,136L548,134Z" fill="rgb(183,143,163)" stroke="rgb(183,143,163)"/><path d="M594,94L548,134L648,148Z" fill="rgb(122,129,168)" stroke="rgb(122,129,168)"/><path d="M594,94L648,148L619,75Z" fill="rgb(123,123,158)" stroke="rgb(123,123,158)"/><path d="M619,75L648,148L673,93Z" fill="rgb(115,119,160)" stroke="rgb(115,119,160)"/><path d="M673,93L648,148L676,143Z" fill="rgb(119,122,159)" stroke="rgb(119,122,159)"/><path d="M-26,144L-25,259L-17,220Z" fill="rgb(8,15,27)" stroke="rgb(8,15,27)"/><path d="M-26,144L-17,220L12,189Z" fill="rgb(41,27,31)" stroke="rgb(41,27,31)"/><path d="M-26,144L12,189L36,169Z" fill="rgb(209,168,171)" stroke="rgb(209,168,171)"/><path d="M36,169L12,189L105,198Z" fill="rgb(10,10,19)" stroke="rgb(10,10,19)"/><path d="M36,169L105,198L100,129Z" fill="rgb(154,60,61)" stroke="rgb(154,60,61)"/><path d="M100,129L105,198L131,169Z" fill="rgb(142,87,96)" stroke="rgb(142,87,96)"/><path d="M131,169L105,198L141,200Z" fill="rgb(29,29,39)" stroke="rgb(29,29,39)"/><path d="M131,169L141,200L228,166Z" fill="rgb(209,164,172)" stroke="rgb(209,164,172)"/><path d="M228,166L141,200L219,200Z" fill="rgb(115,50,60)" stroke="rgb(115,50,60)"/><path d="M228,166L219,200L259,165Z" fill="rgb(87,57,57)" stroke="rgb(87,57,57)"/><path d="M259,165L219,200L265,219Z" fill="rgb(131,56,43)" stroke="rgb(131,56,43)"/><path d="M259,165L265,219L343,190Z" fill="rgb(72,29,41)" stroke="rgb(72,29,41)"/><path d="M259,165L343,190L324,147Z" fill="rgb(24,23,28)" stroke="rgb(24,23,28)"/><path d="M324,147L343,190L381,144Z" fill="rgb(96,55,58)" stroke="rgb(96,55,58)"/><path d="M381,144L343,190L372,222Z" fill="rgb(195,124,75)" stroke="rgb(195,124,75)"/><path d="M381,144L372,222L436,156Z" fill="rgb(32,52,50)" stroke="rgb(32,52,50)"/><path d="M436,156L372,222L448,208Z" fill="rgb(42,18,33)" stroke="rgb(42,18,33)"/><path d="M436,156L448,208L517,136Z" fill="rgb(183,138,155)" stroke="rgb(183,138,155)"/><path d="M517,136L448,208L515,216Z" fill="rgb(115,93,96)" stroke="rgb(115,93,96)"/><path d="M517,136L515,216L548,134Z" fill="rgb(110,110,121)" stroke="rgb(110,110,121)"/><path d="M548,134L515,216L556,219Z" fill="rgb(100,69,72)" stroke="rgb(100,69,72)"/><path d="M548,134L556,219L648,148Z" fill="rgb(182,142,164)" stroke="rgb(182,142,164)"/><path d="M648,148L556,219L632,220Z" fill="rgb(147,119,145)" stroke="rgb(147,119,145)"/><path d="M648,148L632,220L689,209Z" fill="rgb(158,124,155)" stroke="rgb(158,124,155)"/><path d="M648,148L689,209L676,143Z" fill="rgb(180,141,166)" stroke="rgb(180,141,166)"/><path d="M676,143L689,209L713,252Z" fill="rgb(155,114,137)" stroke="rgb(155,114,137)"/><path d="M-17,220L-25,259L14,262Z" fill="rgb(0,2,1)" stroke="rgb(0,2,1)"/><path d="M-17,220L14,262L12,189Z" fill="rgb(70,33,43)" stroke="rgb(70,33,43)"/><path d="M12,189L14,262L105,198Z" fill="rgb(14,11,27)" stroke="rgb(14,11,27)"/><path d="M105,198L14,262L104,293Z" fill="rgb(30,39,42)" stroke="rgb(30,39,42)"/><path d="M105,198L104,293L133,266Z" fill="rgb(12,16,29)" stroke="rgb(12,16,29)"/><path d="M105,198L133,266L141,200Z" fill="rgb(36,20,33)" stroke="rgb(36,20,33)"/><path d="M141,200L133,266L195,264Z" fill="rgb(17,12,22)" stroke="rgb(17,12,22)"/><path d="M141,200L195,264L219,200Z" fill="rgb(64,20,30)" stroke="rgb(64,20,30)"/><path d="M219,200L195,264L265,251Z" fill="rgb(0,25,6)" stroke="rgb(0,25,6)"/><path d="M219,200L265,251L265,219Z" fill="rgb(47,32,30)" stroke="rgb(47,32,30)"/><path d="M265,219L265,251L331,267Z" fill="rgb(25,35,20)" stroke="rgb(25,35,20)"/><path d="M265,219L331,267L343,190Z" fill="rgb(51,41,48)" stroke="rgb(51,41,48)"/><path d="M343,190L331,267L372,222Z" fill="rgb(25,22,27)" stroke="rgb(25,22,27)"/><path d="M372,222L331,267L396,279Z" fill="rgb(39,35,50)" stroke="rgb(39,35,50)"/><path d="M372,222L396,279L448,208Z" fill="rgb(1,8,6)" stroke="rgb(1,8,6)"/><path d="M448,208L396,279L466,266Z" fill="rgb(14,16,20)" stroke="rgb(14,16,20)"/><path d="M448,208L466,266L515,216Z" fill="rgb(67,36,42)" stroke="rgb(67,36,42)"/><path d="M515,216L466,266L518,258Z" fill="rgb(2,6,15)" stroke="rgb(2,6,15)"/><path d="M515,216L518,258L556,219Z" fill="rgb(61,52,56)" stroke="rgb(61,52,56)"/><path d="M556,219L518,258L593,264Z" fill="rgb(13,6,6)" stroke="rgb(13,6,6)"/><path d="M556,219L593,264L632,220Z" fill="rgb(177,101,94)" stroke="rgb(177,101,94)"/><path d="M632,220L593,264L632,291Z" fill="rgb(33,30,44)" stroke="rgb(33,30,44)"/><path d="M632,220L632,291L713,252Z" fill="rgb(1,3,14)" stroke="rgb(1,3,14)"/><path d="M632,220L713,252L689,209Z" fill="rgb(115,57,73)" stroke="rgb(115,57,73)"/><path d="M-25,259L-24,343L24,326Z" fill="rgb(164,98,130)" stroke="rgb(164,98,130)"/><path d="M-25,259L24,326L14,262Z" fill="rgb(90,55,60)" stroke="rgb(90,55,60)"/><path d="M14,262L24,326L67,332Z" fill="rgb(154,95,118)" stroke="rgb(154,95,118)"/><path d="M14,262L67,332L104,293Z" fill="rgb(114,68,78)" stroke="rgb(114,68,78)"/><path d="M104,293L67,332L128,322Z" fill="rgb(137,91,116)" stroke="rgb(137,91,116)"/><path d="M104,293L128,322L133,266Z" fill="rgb(126,79,96)" stroke="rgb(126,79,96)"/><path d="M133,266L128,322L195,264Z" fill="rgb(215,107,97)" stroke="rgb(215,107,97)"/><path d="M195,264L128,322L198,352Z" fill="rgb(239,135,137)" stroke="rgb(239,135,137)"/><path d="M195,264L198,352L250,347Z" fill="rgb(238,118,116)" stroke="rgb(238,118,116)"/><path d="M195,264L250,347L265,251Z" fill="rgb(243,108,92)" stroke="rgb(243,108,92)"/><path d="M265,251L250,347L331,267Z" fill="rgb(188,84,80)" stroke="rgb(188,84,80)"/><path d="M331,267L250,347L347,307Z" fill="rgb(197,96,104)" stroke="rgb(197,96,104)"/><path d="M331,267L347,307L396,279Z" fill="rgb(213,102,102)" stroke="rgb(213,102,102)"/><path d="M396,279L347,307L379,316Z" fill="rgb(190,95,100)" stroke="rgb(190,95,100)"/><path d="M396,279L379,316L431,346Z" fill="rgb(159,89,103)" stroke="rgb(159,89,103)"/><path d="M396,279L431,346L466,266Z" fill="rgb(176,95,105)" stroke="rgb(176,95,105)"/><path d="M466,266L431,346L514,353Z" fill="rgb(185,94,115)" stroke="rgb(185,94,115)"/><path d="M466,266L514,353L518,258Z" fill="rgb(232,129,136)" stroke="rgb(232,129,136)"/><path d="M518,258L514,353L554,338Z" fill="rgb(142,85,110)" stroke="rgb(142,85,110)"/><path d="M518,258L554,338L593,264Z" fill="rgb(221,132,148)" stroke="rgb(221,132,148)"/><path d="M593,264L554,338L613,326Z" fill="rgb(132,84,118)" stroke="rgb(132,84,118)"/><path d="M593,264L613,326L632,291Z" fill="rgb(180,117,152)" stroke="rgb(180,117,152)"/><path d="M632,291L613,326L696,307Z" fill="rgb(16,18,38)" stroke="rgb(16,18,38)"/><path d="M632,291L696,307L713,252Z" fill="rgb(191,111,148)" stroke="rgb(191,111,148)"/><path d="M713,252L696,307L699,378Z" fill="rgb(7,12,18)" stroke="rgb(7,12,18)"/><path d="M713,252L699,378L703,461Z" fill="rgb(113,71,84)" stroke="rgb(113,71,84)"/><path d="M-24,343L-27,512L-20,435Z" fill="rgb(58,43,68)" stroke="rgb(58,43,68)"/><path d="M-24,343L-20,435L-12,410Z" fill="rgb(73,52,79)" stroke="rgb(73,52,79)"/><path d="M-24,343L-12,410L21,371Z" fill="rgb(89,55,88)" stroke="rgb(89,55,88)"/><path d="M-24,343L21,371L24,326Z" fill="rgb(98,69,95)" stroke="rgb(98,69,95)"/><path d="M24,326L21,371L67,332Z" fill="rgb(98,73,99)" stroke="rgb(98,73,99)"/><path d="M67,332L21,371L97,374Z" fill="rgb(82,62,87)" stroke="rgb(82,62,87)"/><path d="M67,332L97,374L128,322Z" fill="rgb(104,72,98)" stroke="rgb(104,72,98)"/><path d="M128,322L97,374L165,389Z" fill="rgb(116,70,90)" stroke="rgb(116,70,90)"/><path d="M128,322L165,389L198,352Z" fill="rgb(165,85,98)" stroke="rgb(165,85,98)"/><path d="M198,352L165,389L214,393Z" fill="rgb(156,76,86)" stroke="rgb(156,76,86)"/><path d="M198,352L214,393L250,347Z" fill="rgb(179,80,87)" stroke="rgb(179,80,87)"/><path d="M250,347L214,393L250,390Z" fill="rgb(176,78,80)" stroke="rgb(176,78,80)"/><path d="M250,347L250,390L313,385Z" fill="rgb(125,61,73)" stroke="rgb(125,61,73)"/><path d="M250,347L313,385L347,307Z" fill="rgb(141,73,86)" stroke="rgb(141,73,86)"/><path d="M347,307L313,385L379,316Z" fill="rgb(193,89,94)" stroke="rgb(193,89,94)"/><path d="M379,316L313,385L373,408Z" fill="rgb(130,62,73)" stroke="rgb(130,62,73)"/><path d="M379,316L373,408L431,346Z" fill="rgb(112,67,83)" stroke="rgb(112,67,83)"/><path d="M431,346L373,408L438,388Z" fill="rgb(78,52,65)" stroke="rgb(78,52,65)"/><path d="M431,346L438,388L514,353Z" fill="rgb(49,34,46)" stroke="rgb(49,34,46)"/><path d="M514,353L438,388L518,374Z" fill="rgb(125,82,91)" stroke="rgb(125,82,91)"/><path d="M514,353L518,374L554,338Z" fill="rgb(131,88,95)" stroke="rgb(131,88,95)"/><path d="M554,338L518,374L552,409Z" fill="rgb(114,71,80)" stroke="rgb(114,71,80)"/><path d="M554,338L552,409L613,326Z" fill="rgb(130,87,93)" stroke="rgb(130,87,93)"/><path d="M613,326L552,409L648,391Z" fill="rgb(104,69,74)" stroke="rgb(104,69,74)"/><path d="M613,326L648,391L696,307Z" fill="rgb(100,61,77)" stroke="rgb(100,61,77)"/><path d="M696,307L648,391L699,378Z" fill="rgb(113,79,92)" stroke="rgb(113,79,92)"/><path d="M-12,410L-20,435L49,445Z" fill="rgb(54,42,64)" stroke="rgb(54,42,64)"/><path d="M-12,410L49,445L21,371Z" fill="rgb(58,48,66)" stroke="rgb(58,48,66)"/><path d="M21,371L49,445L97,374Z" fill="rgb(65,54,73)" stroke="rgb(65,54,73)"/><path d="M97,374L49,445L79,461Z" fill="rgb(45,34,53)" stroke="rgb(45,34,53)"/><path d="M97,374L79,461L163,436Z" fill="rgb(21,24,40)" stroke="rgb(21,24,40)"/><path d="M97,374L163,436L165,389Z" fill="rgb(100,61,77)" stroke="rgb(100,61,77)"/><path d="M165,389L163,436L214,393Z" fill="rgb(90,56,71)" stroke="rgb(90,56,71)"/><path d="M214,393L163,436L230,443Z" fill="rgb(35,26,39)" stroke="rgb(35,26,39)"/><path d="M214,393L230,443L250,390Z" fill="rgb(52,41,60)" stroke="rgb(52,41,60)"/><path d="M250,390L230,443L294,457Z" fill="rgb(71,46,66)" stroke="rgb(71,46,66)"/><path d="M250,390L294,457L313,385Z" fill="rgb(71,53,68)" stroke="rgb(71,53,68)"/><path d="M313,385L294,457L327,462Z" fill="rgb(101,67,90)" stroke="rgb(101,67,90)"/><path d="M313,385L327,462L373,408Z" fill="rgb(52,19,39)" stroke="rgb(52,19,39)"/><path d="M373,408L327,462L387,435Z" fill="rgb(89,51,71)" stroke="rgb(89,51,71)"/><path d="M373,408L387,435L438,388Z" fill="rgb(115,76,91)" stroke="rgb(115,76,91)"/><path d="M438,388L387,435L440,468Z" fill="rgb(107,63,85)" stroke="rgb(107,63,85)"/><path d="M438,388L440,468L519,445Z" fill="rgb(99,66,85)" stroke="rgb(99,66,85)"/><path d="M438,388L519,445L518,374Z" fill="rgb(105,68,82)" stroke="rgb(105,68,82)"/><path d="M518,374L519,445L552,409Z" fill="rgb(109,66,83)" stroke="rgb(109,66,83)"/><path d="M552,409L519,445L571,446Z" fill="rgb(97,54,71)" stroke="rgb(97,54,71)"/><path d="M552,409L571,446L626,447Z" fill="rgb(77,46,64)" stroke="rgb(77,46,64)"/><path d="M552,409L626,447L648,391Z" fill="rgb(101,72,85)" stroke="rgb(101,72,85)"/><path d="M648,391L626,447L703,461Z" fill="rgb(106,58,87)" stroke="rgb(106,58,87)"/><path d="M648,391L703,461L699,378Z" fill="rgb(89,63,77)" stroke="rgb(89,63,77)"/><path d="M-20,435L-27,512L11,526Z" fill="rgb(58,43,68)" stroke="rgb(58,43,68)"/><path d="M-20,435L11,526L49,445Z" fill="rgb(55,44,63)" stroke="rgb(55,44,63)"/><path d="M49,445L11,526L79,461Z" fill="rgb(56,45,62)" stroke="rgb(56,45,62)"/><path d="M79,461L11,526L94,496Z" fill="rgb(55,44,63)" stroke="rgb(55,44,63)"/><path d="M79,461L94,496L163,436Z" fill="rgb(29,32,48)" stroke="rgb(29,32,48)"/><path d="M163,436L94,496L128,531Z" fill="rgb(24,27,44)" stroke="rgb(24,27,44)"/><path d="M163,436L128,531L230,506Z" fill="rgb(40,35,45)" stroke="rgb(40,35,45)"/><path d="M163,436L230,506L230,443Z" fill="rgb(62,43,62)" stroke="rgb(62,43,62)"/><path d="M230,443L230,506L294,457Z" fill="rgb(41,32,47)" stroke="rgb(41,32,47)"/><path d="M294,457L230,506L291,512Z" fill="rgb(61,30,54)" stroke="rgb(61,30,54)"/><path d="M294,457L291,512L322,491Z" fill="rgb(102,68,91)" stroke="rgb(102,68,91)"/><path d="M294,457L322,491L327,462Z" fill="rgb(63,46,64)" stroke="rgb(63,46,64)"/><path d="M327,462L322,491L391,517Z" fill="rgb(126,82,104)" stroke="rgb(126,82,104)"/><path d="M327,462L391,517L387,435Z" fill="rgb(71,48,61)" stroke="rgb(71,48,61)"/><path d="M387,435L391,517L440,468Z" fill="rgb(101,63,83)" stroke="rgb(101,63,83)"/><path d="M440,468L391,517L462,532Z" fill="rgb(79,52,75)" stroke="rgb(79,52,75)"/><path d="M440,468L462,532L513,506Z" fill="rgb(84,51,78)" stroke="rgb(84,51,78)"/><path d="M440,468L513,506L519,445Z" fill="rgb(94,58,78)" stroke="rgb(94,58,78)"/><path d="M519,445L513,506L571,446Z" fill="rgb(117,65,91)" stroke="rgb(117,65,91)"/><path d="M571,446L513,506L554,527Z" fill="rgb(120,75,94)" stroke="rgb(120,75,94)"/><path d="M571,446L554,527L610,507Z" fill="rgb(77,51,74)" stroke="rgb(77,51,74)"/><path d="M571,446L610,507L626,447Z" fill="rgb(82,56,73)" stroke="rgb(82,56,73)"/><path d="M626,447L610,507L701,493Z" fill="rgb(106,58,87)" stroke="rgb(106,58,87)"/><path d="M626,447L701,493L703,461Z" fill="rgb(106,58,87)" stroke="rgb(106,58,87)"/><path d="M11,526L128,531L94,496Z" fill="rgb(39,29,48)" stroke="rgb(39,29,48)"/><path d="M128,531L462,532L291,512Z" fill="rgb(67,42,62)" stroke="rgb(67,42,62)"/><path d="M128,531L291,512L230,506Z" fill="rgb(98,59,84)" stroke="rgb(98,59,84)"/><path d="M291,512L462,532L391,517Z" fill="rgb(120,57,87)" stroke="rgb(120,57,87)"/><path d="M291,512L391,517L322,491Z" fill="rgb(77,52,71)" stroke="rgb(77,52,71)"/><path d="M462,532L554,527L513,506Z" fill="rgb(92,54,74)" stroke="rgb(92,54,74)"/><path d="M554,527L701,493L610,507Z" fill="rgb(110,62,85)" stroke="rgb(110,62,85)"/></g></svg>
</div>
            
          
!
            
              body {
  margin: 0;
}

.container {
  padding-bottom: 66.5625%;
  position: relative;
  width: 100%;
}

.container:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.container img,
.container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container svg {
  opacity: 1;
  transition: opacity 1s linear;
}

.container.show svg {
  opacity: 0;
}

            
          
!
            
              window.onload = () => {
  const container = document.querySelector('.container');
  setInterval(() => {
    container.classList.toggle('show');
  }, 4000);
};

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console