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 t="1524185367739" class="icon" style="" viewBox="0 0 1024 1024"
	version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7167"
	xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
	<path fill="#fff" stroke="#000" stroke-width="8" d="M712.142 104.186c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.998 7.918-7.998h0.156c4.42 0 7.996 3.578 7.996 7.998s-3.576 7.996-7.996 7.996zM328.318 136.172c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.996-7.996 7.996zM504.238 40.216c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.998 7.918-7.998h0.156c4.42 0 7.996 3.578 7.996 7.998s-3.576 7.996-7.996 7.996zM872.07 40.216c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.998 7.918-7.998h0.156c4.418 0 7.996 3.578 7.996 7.998s-3.578 7.996-7.996 7.996zM984.02 328.084c-4.406 0-8.076-3.576-8.076-7.996s3.498-7.996 7.92-7.996h0.156c4.418 0 7.996 3.576 7.996 7.996s-3.578 7.996-7.996 7.996zM904.054 440.034c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.996-7.996 7.996zM72.436 488.012c-4.404 0-8.074-3.578-8.074-7.998s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.998-7.996 7.998zM136.406 663.93c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.996-7.996 7.996zM8.464 791.872c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.996-7.996 7.996zM920.046 807.866c-4.402 0-8.074-3.576-8.074-7.998 0-4.418 3.5-7.996 7.918-7.996h0.156a7.992 7.992 0 0 1 7.996 7.996 7.992 7.992 0 0 1-7.996 7.998zM248.356 855.844c-4.404 0-8.074-3.578-8.074-7.998s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.998-7.996 7.998zM393.632 999.778c-4.42 0-8.074-3.578-8.074-7.996 0-4.42 3.498-7.996 7.918-7.996h0.156a7.99 7.99 0 0 1 7.996 7.996 7.992 7.992 0 0 1-7.996 7.996zM536.222 919.812c-4.402 0-8.074-3.576-8.074-7.996s3.5-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.996-7.996 7.996zM1016.004 983.786c-4.404 0-8.074-3.578-8.074-7.998s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.998-7.996 7.998zM744.128 951.798c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.996 7.918-7.996h0.156c4.418 0 7.996 3.576 7.996 7.996s-3.578 7.996-7.996 7.996zM712.142 903.82c-4.404 0-8.074-3.576-8.074-7.996s3.498-7.996 7.918-7.996h0.156c4.42 0 7.996 3.576 7.996 7.996s-3.576 7.996-7.996 7.996z"
	></path>
	<path d="M751.656 983.786c-44.09 0-79.964-35.876-79.964-79.964s35.876-79.962 79.964-79.962 79.962 35.874 79.962 79.962-35.872 79.964-79.962 79.964z m0-143.936c-35.282 0-63.97 28.69-63.97 63.97s28.69 63.97 63.97 63.97c35.266 0 63.97-28.69 63.97-63.97s-28.704-63.97-63.97-63.97z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7169"></path>
	<path d="M775.644 903.82c-13.228 0-23.988-10.76-23.988-23.988s10.76-23.988 23.988-23.988 23.988 10.76 23.988 23.988-10.758 23.988-23.988 23.988z m0-31.984a8 8 0 0 0-7.996 7.996 8 8 0 0 0 7.996 7.996c4.404 0 7.996-3.592 7.996-7.996s-3.592-7.996-7.996-7.996zM903.586 232.128a7.99 7.99 0 0 1-7.996-7.996V160.162c0-4.42 3.576-7.998 7.996-7.998s7.996 3.578 7.996 7.998v63.97a7.99 7.99 0 0 1-7.996 7.996z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7170"></path>
	<path d="M919.578 200.142h-31.984c-4.42 0-7.996-3.576-7.996-7.996s3.576-7.996 7.996-7.996h31.984c4.422 0 7.998 3.576 7.998 7.996s-3.576 7.996-7.998 7.996zM951.564 663.93a7.99 7.99 0 0 1-7.996-7.996v-63.97c0-4.42 3.576-7.996 7.996-7.996s7.996 3.576 7.996 7.996v63.97a7.99 7.99 0 0 1-7.996 7.996z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7171"></path>
	<path d="M967.556 631.946h-31.984c-4.42 0-7.996-3.576-7.996-7.996s3.576-7.996 7.996-7.996h31.984c4.42 0 7.998 3.576 7.998 7.996s-3.578 7.996-7.998 7.996z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7172"></path>
	<path d="M135.938 983.786a7.992 7.992 0 0 1-7.996-7.998v-63.97c0-4.42 3.576-7.996 7.996-7.996s7.996 3.576 7.996 7.996v63.97a7.992 7.992 0 0 1-7.996 7.998z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7173"></path>
	<path d="M151.93 951.798H119.946c-4.42 0-7.996-3.576-7.996-7.996s3.576-7.996 7.996-7.996h31.986c4.42 0 7.996 3.576 7.996 7.996s-3.578 7.996-7.998 7.996z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7174"></path>
	<path d="M23.99 344.078a7.994 7.994 0 0 1-7.998-7.998v-63.97a7.992 7.992 0 0 1 7.998-7.996 7.992 7.992 0 0 1 7.996 7.996v63.97a7.994 7.994 0 0 1-7.996 7.998z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7175"></path>
	<path d="M39.982 312.092H7.996c-4.42 0-7.996-3.576-7.996-7.996s3.576-7.996 7.996-7.996h31.986c4.418 0 7.996 3.576 7.996 7.996s-3.576 7.996-7.996 7.996z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7176"></path>
	<path d="M151.93 168.158c-14.946 0-29.002-5.826-39.576-16.398-10.574-10.574-16.4-24.63-16.4-39.576 0-14.962 5.826-29.018 16.4-39.576 21.146-21.146 58.004-21.146 79.15 0 10.574 10.558 16.398 24.614 16.398 39.576 0 14.946-5.824 29.002-16.398 39.576-10.572 10.572-24.628 16.398-39.574 16.398z m0-95.956c-10.682 0-20.726 4.154-28.268 11.712-7.558 7.544-11.712 17.586-11.712 28.27a39.724 39.724 0 0 0 11.712 28.268c15.102 15.118 41.434 15.118 56.538 0 7.542-7.558 11.712-17.602 11.712-28.268A39.738 39.738 0 0 0 180.2 83.914a39.726 39.726 0 0 0-28.27-11.712z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7177"></path>
	<path d="M110.606 166.752c-3.716 0-6.98-1.11-9.558-3.686a7.994 7.994 0 0 1 0-11.308 7.992 7.992 0 0 1 10.184-0.936c5.124-0.296 23.302-9.95 46.354-32.986C180.622 94.8 190.272 76.606 190.568 71.466a7.974 7.974 0 0 1 0.938-10.182 7.994 7.994 0 0 1 11.308 0c16.15 16.148-25.426 59.364-33.922 67.86-7.138 7.138-38.78 37.608-58.286 37.608z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7178"></path>
	<path d="M247.872 361.256a7.934 7.934 0 0 1-3.966-1.062 7.97 7.97 0 0 1-2.968-10.902c55.49-96.94 159.27-157.146 270.83-157.146 65.112 0 127.488 19.88 180.418 57.49a7.984 7.984 0 0 1 1.888 11.152 8.028 8.028 0 0 1-11.15 1.874c-50.196-35.67-109.386-54.522-171.156-54.522-105.842 0-204.296 57.13-256.946 149.088a8 8 0 0 1-6.95 4.028zM391.82 791.246a7.84 7.84 0 0 1-3.154-0.654 311.68 311.68 0 0 1-188.758-286.588c0-30.736 4.466-61.114 13.26-90.272 1.266-4.216 5.732-6.606 9.964-5.342a7.984 7.984 0 0 1 5.34 9.964c-8.34 27.66-12.572 56.474-12.572 85.648a295.716 295.716 0 0 0 179.074 271.906 7.996 7.996 0 0 1 4.202 10.496 8.016 8.016 0 0 1-7.356 4.842zM511.766 815.862a313.074 313.074 0 0 1-73.716-8.778 8.016 8.016 0 0 1-5.886-9.668c1.046-4.294 5.31-6.824 9.666-5.888a296.694 296.694 0 0 0 69.936 8.34c163.144 0 295.866-132.718 295.866-295.864 0-78.464-30.424-152.4-85.68-208.186a8.01 8.01 0 0 1 0.046-11.308c3.154-3.124 8.2-3.06 11.322 0.062 58.222 58.802 90.302 136.734 90.302 219.432 0.002 171.954-139.904 311.858-311.856 311.858z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7179"></path>
	<path d="M597.914 738.084c-1.688 0-3.42-0.078-5.17-0.234-16.696-1.42-28.33-14.87-34.562-39.966-4.124-16.648-5.436-33.594-6.7-49.976-1.39-17.976-2.702-34.938-7.388-51.79-2.716-9.9-7.074-16.96-13.32-21.598a7.988 7.988 0 0 1-1.656-11.184 8.016 8.016 0 0 1 11.184-1.656c9.228 6.858 15.524 16.726 19.208 30.174 5.092 18.32 6.528 36.876 7.918 54.818 1.266 16.46 2.466 32.018 6.28 47.37 4.402 17.71 11.26 27.098 20.396 27.878 22.162 1.874 37.31-13.322 52.116-30.486 4.124-4.794 8.59-9.386 13.074-13.978 9.028-9.26 17.554-18.006 23.3-28.456 6.558-11.994 9.058-25.316 11.698-39.42 2.89-15.414 5.874-31.346 14.51-46.212l3.28-5.638c26.004-44.65 33.812-63.362 35.046-70.858-42.48 2.25-67.328-14.15-76.48-30.626-5.17-9.292-5.452-18.664-0.766-25.066 9.512-12.948 29.44-7.606 48.698-2.436 11.854 3.186 28.096 7.528 33.454 3.952 0.5-0.328 1.794-1.202 2.28-4.918 1.64-12.37 30.862-26.614 44.528-28.378 4.358-0.656 8.386 2.53 8.964 6.904a8.016 8.016 0 0 1-6.92 8.964c-11.134 1.436-28.784 12.056-31.094 15.882-0.546 5.904-3.656 11.338-8.84 14.836-11.386 7.622-28.442 3.062-46.512-1.796-10.712-2.858-28.612-7.684-31.672-3.53-0.376 0.592-0.578 3.794 2.282 8.542 7.356 12.198 28.126 24.364 64.422 21.49 5.076-0.39 9.246 1.624 11.668 5.498 6.652 10.604-1.922 32.376-35.234 89.584l-3.264 5.606c-7.264 12.51-9.872 26.426-12.634 41.152-2.75 14.712-5.592 29.926-13.384 44.152-6.794 12.37-16.492 22.318-25.878 31.94-4.248 4.358-8.496 8.698-12.4 13.244-15.234 17.648-33.6 36.216-60.432 36.216zM471.784 565.82h-0.234c-43.496-1.204-71.546-29.566-73.2-74.014-0.376-10.308 0.14-20.178 1.544-29.362a7.956 7.956 0 0 1 9.106-6.702 7.992 7.992 0 0 1 6.7 9.106c-1.25 8.2-1.702 17.07-1.374 26.364 1.342 35.732 22.896 57.662 57.662 58.614a8 8 0 1 1-0.204 15.994zM439.784 412.544c-2.312 0-4.608-1-6.184-2.92a8.016 8.016 0 0 1 1.108-11.26c25.316-20.726 54.85-23.568 62.16-22.272 37.858 6.574 59.162 11.634 66.954 15.868a45.982 45.982 0 0 0 6.7 3.062 7.994 7.994 0 0 1 4.748 10.276c-1.514 4.154-6.122 6.262-10.26 4.748a63.19 63.19 0 0 1-8.886-4.06c-3.36-1.828-15.946-6.138-62.066-14.15-2.81-0.39-27.626 1.204-49.21 18.898a7.972 7.972 0 0 1-5.064 1.81zM599.71 370.112a8.12 8.12 0 0 1-2.624-0.436c-27.94-9.682-70.282-18.46-89.49-19.834-2.858-0.36-7.48 0.64-12.056 1.468-11.728 2.092-26.332 4.716-34.844-4.576-7.856-8.746-6.45-22.006 3.716-35.562 25.864-34.046 63.83-49.086 100.548-63.626 12.588-4.982 25.598-10.136 37.732-15.946 1.498-2.218 4.686-8.152 6.668-14.948 1.234-4.232 5.67-6.622 9.918-5.45a8.008 8.008 0 0 1 5.436 9.916c-1.812 6.248-7.684 20.958-13.306 24.02-13.416 6.528-27.208 11.996-40.56 17.274-36.28 14.368-70.544 27.94-93.676 58.396-4.108 5.482-7.042 12.494-4.638 15.18 2.516 2.734 13.572 0.766 20.178-0.42 5.826-1.032 11.386-2.062 16.04-1.686 20.178 1.452 64.502 10.604 93.566 20.678a8.01 8.01 0 0 1 4.952 10.182 8.022 8.022 0 0 1-7.56 5.37zM296.942 723.496L294.146 716l-1.218-7.902 1.218 7.918-7.152-3.498c3.388-8.45 20.474-81.932-6.732-138.78-14.602-30.518-39.746-51.398-74.7-62.082l4.67-15.304c80.588 24.628 99.408 92.286 101.016 144.714 0.704 22.614-4.124 78.62-14.306 82.43zM455.792 711.908c-22.052 0-39.982-17.928-39.982-39.982 0-22.05 17.928-39.98 39.982-39.98 22.038 0 39.982 17.93 39.982 39.98 0 22.054-17.946 39.982-39.982 39.982z m0-63.97c-13.228 0-23.988 10.762-23.988 23.988 0 13.23 10.76 23.99 23.988 23.99s23.99-10.76 23.99-23.99c-0.002-13.226-10.762-23.988-23.99-23.988z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7180"></path>
	<path d="M311.858 440.034c-22.052 0-39.982-17.93-39.982-39.982s17.93-39.98 39.982-39.98c22.038 0 39.982 17.928 39.982 39.98-0.002 22.052-17.946 39.982-39.982 39.982z m0-63.972c-13.228 0-23.99 10.76-23.99 23.988s10.76 23.99 23.99 23.99 23.988-10.762 23.988-23.99-10.76-23.988-23.988-23.988z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7181"></path>
	<path d="M551.748 519.996c-22.052 0-39.982-17.93-39.982-39.982s17.93-39.982 39.982-39.982c22.038 0 39.98 17.93 39.98 39.982s-17.942 39.982-39.98 39.982z m0-63.97c-13.228 0-23.99 10.762-23.99 23.99 0 13.228 10.762 23.99 23.99 23.99s23.988-10.76 23.988-23.99c0-13.228-10.76-23.99-23.988-23.99z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7182"></path>
	<path d="M407.814 823.858a7.996 7.996 0 0 1-7.794-9.794c8.934-38.748 20.382-77.854 33.984-116.198 1.468-4.168 6.03-6.402 10.214-4.856a7.968 7.968 0 0 1 4.858 10.198c-13.4 37.78-24.676 76.292-33.47 114.448a8.008 8.008 0 0 1-7.792 6.202z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7183"></path>
	<path d="M464.6 649.188a8.156 8.156 0 0 1-3.108-0.624 8.006 8.006 0 0 1-4.248-10.48c19.49-46.182 42.542-92.098 68.516-136.468a7.996 7.996 0 0 1 10.932-2.858 8.024 8.024 0 0 1 2.876 10.948c-25.63 43.76-48.37 89.054-67.594 134.594a7.996 7.996 0 0 1-7.374 4.888z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7184"></path>
	<path d="M566.288 459.54c-1.498 0-3.03-0.42-4.388-1.31a8.006 8.006 0 0 1-2.28-11.074c82.042-124.692 161.942-196.3 162.738-197.018a8 8 0 0 1 10.62 11.962c-0.782 0.688-79.198 71.03-160.004 193.834a7.964 7.964 0 0 1-6.686 3.606z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7185"></path>
	<path d="M280.278 402.924c-0.514 0-1.046-0.046-1.576-0.156-21.772-4.358-43.278-7.982-63.876-10.792a8.006 8.006 0 0 1-6.858-8.996c0.61-4.374 4.638-7.574 9.012-6.84 20.928 2.842 42.762 6.528 64.862 10.948a8 8 0 0 1 6.278 9.402 8.01 8.01 0 0 1-7.842 6.434z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7186"></path>
	<path d="M522.356 475.72c-0.984 0-2-0.188-2.968-0.578-32.656-13.072-99.314-38.03-178.808-58.256a7.986 7.986 0 0 1-5.778-9.714 7.946 7.946 0 0 1 9.73-5.778c80.37 20.458 147.778 45.682 180.808 58.91a7.996 7.996 0 0 1 4.452 10.386 8.038 8.038 0 0 1-7.436 5.03z"
		fill="#fff" stroke="#000" stroke-width="8" p-id="7187"></path>
</svg>
            
          
!
            
              :root {
			--s-index: 10000;
		}

		path {
			stroke-dasharray: 3000;
			stroke-dashoffset: 3000;
			animation: dash 4s ease-in-out infinite;
			animation-delay: calc(var(--s-index) * .3s);
		}

		@keyframes dash {
			to {
				stroke-dashoffset: 0;
			}
		}


            
          
!
            
              const path = document.querySelectorAll('path');
        for (let i = 0, l = path.length; i <= l; i += 1) {
            const p = path[i];
            p.style.setProperty('--s-index', i);
        }
            
          
!
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