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

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

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <svg width="38" height="59" viewBox="0 0 38 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.2903 51.8064C36.2903 47.7613 32.3548 42.0645 32.3548 42.0645C32.3548 42.0645 25.972 39.4582 18.798 43.8468C11.6241 48.2354 5.38709 42.7741 5.38709 42.7741C5.38709 42.7741 1.96445 47.4034 1.70967 51.5483C1.45488 55.6932 5.58063 57.2868 5.58063 57.2868H32.6129C32.6129 57.2868 36.2903 55.8514 36.2903 51.8064Z" fill="#52412D"/>
<path d="M4.22264 5.91601C4.34319 5.99637 4.48316 6.03981 4.5979 6.06714C4.72179 6.09665 4.86366 6.11795 5.01632 6.1337C5.32209 6.16523 5.70966 6.17823 6.15985 6.17674C7.06239 6.17375 8.25984 6.11218 9.6474 6.00635C12.425 5.79451 15.9971 5.40272 19.5652 4.93323C23.1333 4.46375 26.7057 3.91549 29.4836 3.38973C30.8714 3.12707 32.069 2.86852 32.9713 2.6265C33.4217 2.50571 33.8081 2.38651 34.1117 2.26985C34.3906 2.16267 34.6769 2.03022 34.8536 1.85356L34.1464 1.14646C34.1503 1.14263 34.1281 1.1641 34.0515 1.20484C33.9802 1.24276 33.8817 1.28693 33.753 1.33639C33.4956 1.4353 33.1467 1.54413 32.7123 1.66064C31.8451 1.89323 30.6755 2.1464 29.2976 2.40718C26.5443 2.92829 22.9917 3.47377 19.4348 3.94178C15.8779 4.40978 12.325 4.79923 9.57135 5.00925C8.19328 5.11436 7.02354 5.17388 6.15654 5.17674C5.72197 5.17818 5.37418 5.1653 5.11891 5.13897C4.99106 5.12579 4.89599 5.11016 4.82963 5.09436C4.75412 5.07637 4.75054 5.06609 4.77733 5.08395L4.22264 5.91601ZM34.8536 1.85356C34.8901 1.81697 34.9101 1.80105 34.9157 1.79702C34.9301 1.7866 34.8887 1.82202 34.806 1.83856C34.6902 1.86172 34.5034 1.8396 34.373 1.68026C34.2824 1.5696 34.281 1.46118 34.281 1.46085C34.28 1.4431 34.2821 1.47813 34.25 1.60193C34.2218 1.71081 34.1767 1.85339 34.1147 2.0281C33.8653 2.73113 33.3896 3.82208 32.8582 4.97874C32.3291 6.13017 31.7528 7.32954 31.3083 8.24195C31.0862 8.69794 30.8972 9.0818 30.7637 9.35158C30.697 9.48646 30.6442 9.5928 30.6081 9.66535C30.5901 9.70163 30.5762 9.72946 30.5669 9.74819C30.5622 9.75755 30.5587 9.76464 30.5563 9.76936C30.5551 9.77173 30.5542 9.7735 30.5536 9.77468C30.5533 9.77527 30.5531 9.7757 30.553 9.77599C30.5529 9.77613 30.5529 9.77623 30.5528 9.77631C30.5528 9.77637 30.5528 9.77639 31 10C31.4472 10.2236 31.4472 10.2236 31.4473 10.2235C31.4473 10.2234 31.4474 10.2233 31.4475 10.2231C31.4476 10.2228 31.4479 10.2223 31.4482 10.2217C31.4488 10.2204 31.4497 10.2186 31.4509 10.2162C31.4534 10.2113 31.457 10.204 31.4617 10.1945C31.4712 10.1755 31.4852 10.1474 31.5034 10.1108C31.5399 10.0376 31.593 9.93053 31.6601 9.7949C31.7942 9.52366 31.9841 9.13799 32.2073 8.67992C32.6534 7.76421 33.2334 6.55732 33.7668 5.39625C34.2979 4.24041 34.791 3.11261 35.0572 2.36252C35.1241 2.17395 35.1796 2.00111 35.218 1.8529C35.2526 1.71962 35.2874 1.55593 35.2796 1.40829C35.2761 1.34302 35.2614 1.18687 35.1469 1.04701C34.9927 0.858465 34.7714 0.825665 34.6098 0.857985C34.4813 0.883683 34.3829 0.9481 34.3282 0.987815C34.2647 1.03392 34.2036 1.0893 34.1464 1.14646L34.8536 1.85356ZM6.49999 10C6.92182 9.73157 6.92182 9.73157 6.92181 9.73155C6.92179 9.73152 6.92176 9.73148 6.92172 9.73141C6.92163 9.73127 6.9215 9.73105 6.9213 9.73075C6.92092 9.73015 6.92033 9.72922 6.91953 9.72796C6.91793 9.72545 6.91552 9.72164 6.91231 9.71659C6.9059 9.70647 6.89634 9.69137 6.88389 9.67163C6.85898 9.63216 6.8225 9.57418 6.77653 9.50063C6.68457 9.35349 6.55472 9.14418 6.40352 8.89607C6.10058 8.39894 5.71425 7.74978 5.37559 7.13403C5.02947 6.50473 4.75702 5.95247 4.6569 5.6321C4.63247 5.55392 4.62679 5.51524 4.62614 5.50654C4.62345 5.47063 4.64736 5.60312 4.53154 5.73549C4.37381 5.91575 4.17345 5.87584 4.15031 5.86986C4.12566 5.8635 4.14439 5.86384 4.22264 5.91601L4.77733 5.08395C4.66808 5.01112 4.53837 4.93724 4.40018 4.90158C4.26352 4.86632 3.98455 4.84203 3.77897 5.07698C3.61529 5.26403 3.62211 5.49028 3.62894 5.58132C3.63781 5.69957 3.66826 5.82105 3.70242 5.93037C3.83668 6.36001 4.15798 6.99525 4.49937 7.61595C4.84822 8.25022 5.24314 8.91356 5.54958 9.41644C5.70307 9.66832 5.83494 9.88089 5.92853 10.0306C5.97533 10.1055 6.01259 10.1647 6.03822 10.2053C6.05103 10.2256 6.06094 10.2413 6.06768 10.2519C6.07105 10.2573 6.07364 10.2613 6.07539 10.2641C6.07627 10.2655 6.07694 10.2665 6.07741 10.2673C6.07764 10.2676 6.07782 10.2679 6.07794 10.2681C6.07801 10.2682 6.07806 10.2683 6.07809 10.2683C6.07813 10.2684 6.07816 10.2684 6.49999 10Z" fill="black"/>
<path d="M24.9379 30.1325C24.9379 30.1325 36.6573 9.99992 32.55 9.99992C28.4428 9.99992 24.4998 10.9325 18.9687 10.8776C13.4377 10.8228 10.2066 9.99992 5.66128 9.99992C1.11593 9.99992 13.1091 30.1325 13.1091 30.1325C13.1091 30.1325 0.67783 46.6993 1.0064 51.9656C1.33497 57.2319 5.66128 57.9999 5.66128 57.9999H32.55C32.55 57.9999 36.493 57.5611 36.9858 51.9656C37.4787 46.3702 24.9379 30.1325 24.9379 30.1325Z" stroke="#17171D" stroke-width="2"/>
<path d="M8.55734 22.9462C11.9526 21.7942 27.4507 21.8491 29.915 22.9462C32.3793 24.0434 31.3388 32.5462 29.915 34.2468C28.4912 35.9474 10.3097 35.4536 8.55734 34.2468C6.80493 33.0399 5.16204 24.0982 8.55734 22.9462Z" fill="#D8D6B1"/>
</svg>

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

Console