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 width="25" height="507" viewBox="0 0 25 507" fill="none" xmlns="http://www.w3.org/2000/svg">
					<defs>
						<mask id="msk1" maskUnits="userSpaceOnUse">
							<path class="path" fill="none" d="M12 5C12 200.262 12 309.738 12 505" stroke="#fff" stroke-width="4"
										stroke-linecap="round" stroke-dashoffset="0">
								<animate attributeName="stroke-dasharray" dur="2s" values="0,500;500,0"/>
							</path>
						</mask>
					</defs>
					<path class="path" fill="none" mask="url(#msk1)" d="M12 5C12 200.262 12 309.738 12 505" stroke-dashoffset="0"
								stroke="#E84E1B" stroke-width="4"
								stroke-linecap="round" stroke-dasharray="10 20"/>
					<circle cx="12.5" cy="12.5" r="10.5" fill="white" stroke="#E84E1B" stroke-width="4"/>
				</svg>



<svg width="431" height="181" viewBox="0 0 431 181" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.1333 63.9615C7.41746 63.9615 1.13001 67.6306 0.177371 74.6227C-0.411535 78.9322 0.471825 82.584 2.74085 85.1974C6.03179 88.9704 12.1287 90.0608 18.6413 88.0185C21.43 87.1359 23.3872 85.4744 24.4438 83.0687C26.9206 77.4438 23.3872 69.794 23.2313 69.4652C21.2914 65.9864 17.5328 63.9615 13.1333 63.9615ZM12.25 86.1667C9.09757 86.1667 6.56874 85.1802 4.92326 83.2937C3.22583 81.3379 2.56764 78.4823 3.0353 75.0208C3.79741 69.4133 8.80312 66.8691 13.116 66.8691C16.4416 66.8691 19.2475 68.3402 20.6159 70.7979C20.6159 70.7979 23.699 77.513 21.7417 81.9091C21.0316 83.536 19.7152 84.6263 17.7406 85.2494C15.8353 85.8551 13.982 86.1667 12.25 86.1667Z" fill="#E84E1B"/>
<path d="M428.832 144.561C428.122 144.561 427.498 145.081 427.394 145.807C426.788 150.117 425.558 154.202 423.74 157.957C423.393 158.684 423.705 159.549 424.415 159.896C425.143 160.242 426.009 159.948 426.355 159.221C428.295 155.188 429.611 150.809 430.27 146.223C430.374 145.427 429.837 144.7 429.04 144.579C428.971 144.579 428.901 144.561 428.832 144.561Z" fill="#E84E1B"/>
<path d="M417.399 167.407C417.053 167.407 416.706 167.528 416.429 167.788C413.623 170.314 410.263 172.461 406.453 174.157C405.725 174.485 405.396 175.334 405.708 176.078C406.037 176.805 406.886 177.134 407.63 176.822C411.735 175.005 415.355 172.686 418.387 169.951C418.976 169.414 419.027 168.497 418.491 167.909C418.179 167.563 417.78 167.407 417.399 167.407Z" fill="#E84E1B"/>
<path d="M378.914 177.618C378.187 177.618 377.563 178.155 377.477 178.881C377.373 179.678 377.944 180.405 378.741 180.508C382.222 180.941 385.721 181.097 389.151 180.941C389.947 180.906 390.571 180.231 390.536 179.435C390.502 178.639 389.809 177.999 389.029 178.051C385.773 178.189 382.448 178.051 379.105 177.635C379.035 177.618 378.983 177.618 378.914 177.618Z" fill="#E84E1B"/>
<path d="M361.611 172.963C361.04 172.963 360.52 173.291 360.278 173.845C359.966 174.589 360.295 175.438 361.04 175.749C363.655 176.874 366.409 177.826 369.215 178.605C369.995 178.812 370.791 178.362 370.999 177.584C371.207 176.805 370.757 176.009 369.995 175.801C367.31 175.057 364.677 174.139 362.183 173.084C362.01 173.015 361.802 172.963 361.611 172.963Z" fill="#E84E1B"/>
<path d="M343.356 159.619C343.027 159.619 342.698 159.723 342.42 159.965C341.814 160.484 341.728 161.401 342.247 162.007C345.382 165.728 349.141 168.999 353.436 171.734C354.112 172.166 355.013 171.959 355.446 171.284C355.879 170.609 355.671 169.709 354.995 169.276C350.96 166.715 347.426 163.634 344.482 160.138C344.17 159.792 343.771 159.619 343.356 159.619Z" fill="#E84E1B"/>
<path d="M334.28 142.485C334.141 142.485 334.02 142.502 333.882 142.536C333.12 142.761 332.669 143.558 332.894 144.336C334.003 148.179 335.544 151.83 337.502 155.205C337.9 155.898 338.783 156.14 339.494 155.742C340.186 155.344 340.429 154.461 340.03 153.752C338.194 150.567 336.74 147.14 335.7 143.523C335.492 142.9 334.904 142.485 334.28 142.485Z" fill="#E84E1B"/>
<path d="M329.065 118.756C328.961 118.756 328.857 118.774 328.736 118.791C327.956 118.964 327.471 119.743 327.645 120.522C328.32 123.516 328.926 126.579 329.515 129.539C329.862 131.287 330.191 133.017 330.555 134.748C330.71 135.527 331.49 136.046 332.269 135.873C333.049 135.717 333.568 134.939 333.395 134.16C333.031 132.429 332.702 130.698 332.356 128.968C331.767 125.973 331.161 122.893 330.468 119.847C330.329 119.206 329.723 118.756 329.065 118.756Z" fill="#E84E1B"/>
<path d="M322.397 100.082C322.155 100.082 321.912 100.134 321.687 100.272C320.994 100.67 320.734 101.553 321.133 102.245C322.553 104.772 323.817 107.628 324.891 110.709C325.151 111.47 325.983 111.868 326.745 111.608C327.507 111.349 327.905 110.518 327.645 109.757C326.52 106.52 325.186 103.509 323.679 100.826C323.402 100.341 322.899 100.082 322.397 100.082Z" fill="#E84E1B"/>
<path d="M311.121 89.2127C310.55 89.2127 310.013 89.5415 309.788 90.0953C309.476 90.8395 309.822 91.6876 310.567 91.9991C312.507 92.8125 314.308 93.9721 315.919 95.4605C316.508 95.9971 317.426 95.9625 317.98 95.374C318.517 94.7856 318.483 93.8683 317.894 93.3318C316.04 91.6184 313.945 90.2857 311.693 89.3338C311.502 89.2473 311.312 89.2127 311.121 89.2127Z" fill="#E84E1B"/>
<path d="M301.402 88.5378C301.298 88.5378 301.194 88.555 301.09 88.5724C297.765 89.3166 294.387 90.7877 290.732 93.0896C290.057 93.5222 289.849 94.4049 290.282 95.0972C290.715 95.7722 291.616 95.9799 292.291 95.5472C295.651 93.4357 298.734 92.0684 301.731 91.4108C302.51 91.2377 303.013 90.4588 302.822 89.68C302.666 89.005 302.06 88.5378 301.402 88.5378Z" fill="#E84E1B"/>
<path d="M282.697 99.6146C282.35 99.6146 282.004 99.7357 281.727 99.978C279.371 102.055 277.067 104.288 275.076 106.209C274.504 106.762 274.487 107.68 275.041 108.268C275.595 108.839 276.513 108.857 277.102 108.303C279.059 106.399 281.346 104.218 283.649 102.159C284.256 101.622 284.307 100.705 283.771 100.116C283.493 99.7703 283.095 99.6146 282.697 99.6146Z" fill="#E84E1B"/>
<path d="M267.281 114.551C266.917 114.551 266.536 114.689 266.259 114.983L265.6 115.641C262.639 118.618 259.573 121.681 256.161 124.122C255.503 124.589 255.364 125.489 255.832 126.147C256.299 126.804 257.2 126.943 257.858 126.475C261.461 123.897 264.613 120.747 267.662 117.701L268.32 117.043C268.891 116.472 268.891 115.554 268.32 114.983C268.025 114.689 267.644 114.551 267.281 114.551Z" fill="#E84E1B"/>
<path d="M249.338 128.5C249.113 128.5 248.888 128.552 248.68 128.656C246.81 129.625 244.87 130.49 242.912 131.235C242.168 131.529 241.787 132.36 242.064 133.104C242.341 133.848 243.19 134.229 243.934 133.952C245.996 133.173 248.022 132.256 249.997 131.252C250.707 130.888 250.984 130.006 250.62 129.296C250.378 128.794 249.875 128.5 249.338 128.5Z" fill="#E84E1B"/>
<path d="M234.858 133.71C234.754 133.71 234.651 133.727 234.547 133.744C231.082 134.523 227.514 134.99 223.912 135.163C223.115 135.198 222.491 135.873 222.526 136.686C222.561 137.483 223.201 138.106 224.05 138.071C227.809 137.898 231.55 137.396 235.187 136.583C235.967 136.41 236.469 135.631 236.279 134.852C236.123 134.177 235.517 133.71 234.858 133.71Z" fill="#E84E1B"/>
<path d="M201.602 132.429C200.978 132.429 200.406 132.827 200.216 133.467C199.991 134.229 200.424 135.042 201.186 135.267C205.187 136.479 209.344 137.31 213.536 137.76C214.315 137.846 215.043 137.275 215.129 136.461C215.216 135.665 214.644 134.956 213.83 134.869C209.829 134.437 205.845 133.64 202 132.481C201.896 132.446 201.74 132.429 201.602 132.429Z" fill="#E84E1B"/>
<path d="M184.835 124.693C184.35 124.693 183.882 124.935 183.605 125.35C183.172 126.025 183.363 126.925 184.038 127.358C186.463 128.916 189.009 130.335 191.607 131.581C192.335 131.927 193.201 131.616 193.547 130.889C193.894 130.162 193.582 129.297 192.855 128.95C190.36 127.774 187.918 126.406 185.597 124.918C185.389 124.779 185.112 124.693 184.835 124.693Z" fill="#E84E1B"/>
<path d="M170.182 112.179C169.835 112.179 169.489 112.301 169.212 112.56C168.623 113.097 168.571 114.014 169.108 114.602C171.342 117.077 173.75 119.414 176.244 121.56C176.85 122.079 177.768 122.01 178.288 121.404C178.807 120.798 178.738 119.881 178.132 119.362C175.724 117.302 173.403 115.052 171.255 112.681C170.978 112.353 170.58 112.179 170.182 112.179Z" fill="#E84E1B"/>
<path d="M156.533 92.8647C156.29 92.8647 156.048 92.9166 155.823 93.0378C155.112 93.4185 154.87 94.3012 155.251 95.0108C157.433 98.9568 159.824 102.747 162.37 106.26C162.838 106.918 163.738 107.057 164.396 106.589C165.055 106.122 165.193 105.205 164.726 104.564C162.266 101.138 159.928 97.4511 157.797 93.6089C157.537 93.1243 157.035 92.8647 156.533 92.8647Z" fill="#E84E1B"/>
<path d="M148.098 74.8998C147.925 74.8998 147.734 74.9344 147.561 75.0036C146.816 75.2979 146.452 76.1459 146.747 76.8901C148.15 80.4208 149.657 83.865 151.216 87.136C151.562 87.8629 152.428 88.1745 153.156 87.8283C153.883 87.4822 154.195 86.6168 153.848 85.8899C152.307 82.6707 150.835 79.2785 149.466 75.8171C149.224 75.2459 148.669 74.8998 148.098 74.8998Z" fill="#E84E1B"/>
<path d="M140.735 54.1658C140.579 54.1658 140.44 54.1831 140.284 54.235C139.522 54.4773 139.107 55.308 139.349 56.0696C140.752 60.3271 141.93 63.8059 143.056 67.025C143.316 67.7866 144.147 68.1846 144.909 67.9077C145.671 67.6481 146.07 66.8174 145.792 66.0558C144.667 62.8713 143.489 59.4099 142.103 55.1696C141.913 54.5638 141.341 54.1658 140.735 54.1658Z" fill="#E84E1B"/>
<path d="M134.848 38.6581C134.657 38.6581 134.467 38.6927 134.276 38.7792C133.532 39.0908 133.202 39.9388 133.514 40.683C134.363 42.656 135.212 44.7675 136.026 46.9309C136.303 47.6751 137.152 48.0559 137.896 47.779C138.641 47.4848 139.022 46.654 138.728 45.9098C137.896 43.7118 137.03 41.5657 136.164 39.558C135.956 38.9869 135.42 38.6581 134.848 38.6581Z" fill="#E84E1B"/>
<path d="M119.779 14.5665C119.415 14.5665 119.034 14.7049 118.757 14.9819C118.185 15.553 118.185 16.4703 118.739 17.0415C122.81 21.1779 126.413 26.2835 129.738 32.6526C130.102 33.3622 130.985 33.6391 131.695 33.2756C132.406 32.9122 132.683 32.0295 132.319 31.3199C128.855 24.6912 125.096 19.3606 120.801 15.0165C120.524 14.7223 120.142 14.5665 119.779 14.5665Z" fill="#E84E1B"/>
<path d="M105.42 4.78786C104.849 4.78786 104.312 5.1167 104.086 5.68784C103.775 6.43205 104.121 7.28008 104.866 7.59161C107.291 8.61274 109.612 9.85888 111.794 11.2954C112.47 11.7454 113.37 11.555 113.803 10.8973C114.254 10.2223 114.063 9.32234 113.405 8.88966C111.067 7.33201 108.573 5.99938 105.974 4.92633C105.801 4.82249 105.611 4.78786 105.42 4.78786Z" fill="#E84E1B"/>
<path d="M85.6738 0.842163C84.8771 0.842163 84.2189 1.48249 84.2189 2.27863C84.2189 3.07476 84.8597 3.73245 85.6565 3.73245C88.7916 3.74976 91.9266 4.04397 94.9751 4.61511C95.7545 4.75357 96.5166 4.25167 96.6725 3.45554C96.8284 2.6594 96.3088 1.91518 95.512 1.75941C92.3077 1.17097 88.9994 0.85947 85.6738 0.842163Z" fill="#E84E1B"/>
<path d="M76.0598 1.62068C75.9732 1.62068 75.9039 1.62071 75.8173 1.63802C72.8901 2.12262 69.9629 2.84954 67.1223 3.78413C66.3602 4.02644 65.9445 4.85715 66.2043 5.61867C66.4641 6.38019 67.2608 6.79555 68.0403 6.55325C70.7423 5.67058 73.531 4.97834 76.3196 4.51105C77.1164 4.37259 77.636 3.62832 77.5147 2.83218C77.3588 2.12259 76.7526 1.62068 76.0598 1.62068Z" fill="#E84E1B"/>
<path d="M60.2799 6.63997C60.072 6.63997 59.8642 6.69188 59.6563 6.77841C57.5085 7.79954 55.3954 8.95912 53.3689 10.2052C52.6934 10.6206 52.4682 11.5206 52.9012 12.1956C53.3169 12.8706 54.2176 13.0782 54.8931 12.6629C56.833 11.4687 58.8596 10.361 60.9034 9.37448C61.6309 9.02834 61.9253 8.16302 61.5789 7.43611C61.3538 6.9342 60.8341 6.63997 60.2799 6.63997Z" fill="#E84E1B"/>
<path d="M47.6356 14.5668C47.3238 14.5668 46.9947 14.6706 46.7349 14.8783C43.8943 17.1283 41.1749 19.6378 38.6461 22.3377C38.0918 22.9262 38.1265 23.8435 38.7154 24.3973C39.3043 24.9512 40.2223 24.9165 40.7766 24.3281C43.2188 21.732 45.8169 19.3262 48.5536 17.1628C49.1771 16.6609 49.2811 15.7437 48.7961 15.1206C48.4843 14.7572 48.0686 14.5668 47.6356 14.5668Z" fill="#E84E1B"/>
<path d="M34.855 27.3048C34.4393 27.3048 34.0063 27.4951 33.7291 27.8412C30.5941 31.6834 27.8747 35.8199 25.6403 40.0948C25.2766 40.8044 25.5364 41.6871 26.2639 42.0505C26.974 42.414 27.8574 42.1543 28.2211 41.4447C30.3689 37.3256 32.9843 33.3796 35.9982 29.6758C36.5005 29.0528 36.4139 28.1355 35.7903 27.6336C35.5132 27.4086 35.1841 27.3048 34.855 27.3048Z" fill="#E84E1B"/>
<path d="M23.8042 45.8755C23.2499 45.8755 22.713 46.2043 22.4705 46.7582C19.6819 53.2138 17.7939 59.0982 16.6854 64.7577C16.5295 65.5365 17.0491 66.3154 17.8285 66.4538C18.608 66.6096 19.3874 66.0904 19.526 65.3115C20.5999 59.8598 22.4359 54.1657 25.1379 47.9005C25.4497 47.1562 25.1206 46.3082 24.3758 45.9967C24.2026 45.9101 23.9947 45.8755 23.8042 45.8755Z" fill="#E84E1B"/>
<path d="M427.5 133C427.569 133.796 428.452 135.423 429.266 135.354C430.063 135.285 430.669 134.592 430.6 133.796V133H427.5Z" fill="#E84E1B"/>
</svg>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console