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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div class="flyout-options">
    <span class="to-right is-selected">To Right</span>
    <span class="to-top">To Top</span>
    <span class="to-left">To Left (no rotate)</span>
</div>
<div class="flyout">
    <div class="flyout-action-bar">
        <div class="flyout-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 505.3 506.1">
                <path d="M76.9 70.9l-3.3 3.3c-96.9 96.9-98.3 255.9-3.2 354.6 96.9 100.5 257.4 103.4 357.9 6.5l3.3-3.3c96.9-96.9 98.3-256 3.2-354.6-47-48.7-110-76.2-177.6-77.4-67.6-1.2-131.6 24-180.3 70.9zm341.9 348.3l-3.1 3c-93.2 89.9-242.2 87.2-332.2-6-88.3-91.6-87-239.2 2.9-329.1l3.1-3.1c45.2-43.6 104.6-67 167.4-65.8 62.8 1.1 121.3 26.6 164.8 71.8 88.4 91.6 87 239.3-2.9 329.2z"
                />
                <path d="M245.8 131l-2.1 112.9-113-2c-5-.1-9.1 3.9-9.2 8.9-.1 5 3.9 9.2 8.9 9.2l112.9 2.1-2.1 112.9c-.1 5 3.9 9.2 8.9 9.3 2.6 0 4.9-1 6.6-2.7 1.6-1.6 2.6-3.8 2.7-6.3l2.1-112.9 112.9 2c2.6 0 5-1 6.6-2.6 1.6-1.6 2.6-3.8 2.6-6.3.1-5-3.9-9.2-8.9-9.3l-112.9-2.1 2.1-112.9c.1-5-3.9-9.1-8.9-9.3-5 .1-9.1 4.1-9.2 9.1z"
                />
            </svg>
            <div class="flyout-action-bar-actions to-right">
                <div class="flyout-action-bar-action">
                    <a class="flyout-action flyout-action-resume">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551.9 236.5"><path d="M129.2 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM411.6 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4c.1-17.3-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM358 95.9l-28.4-16c-7.9-4.5-21.2-7.9-30.3-7.9h-78.8c-12.5 0-22.7 10.2-22.7 22.7v1.8c0 12.5 10.2 22.7 22.7 22.7H352c10.3 0 13.7-4.6 14.7-8.5 1-4 .3-9.7-8.7-14.8zm-137.5 5.7c-2.8 0-5.1-2.4-5.1-5.1v-1.8c0-2.8 2.4-5.1 5.1-5.1h78.8c6.2 0 16.3 2.7 21.7 5.7l11.4 6.4c0-.1-111.9-.1-111.9-.1z"/><path d="M551.9 164.2c0-9.8-6.6-18.1-15.7-21-.2-1-.6-2-1.2-2.9l-13.6-20.1c-5.7-8.4-17.6-15.8-27.7-17.1l-1.2-.2c-4.2-6.2-13.1-11.2-20.5-11.2h-19.7c-5.5 0-10.2 1.7-12.5 4.2L420 93.4c-6.6-.9-17.6-4.2-23.5-7.1l-62.2-30.7c-8-4-21.3-7.1-30.2-7.1h-67.7c1.4-3.2.8-7-1.8-9.6l-11.3-11.5c3.4-3.3 3.5-8.7.3-12.2-3.3-3.5-8.9-3.7-12.4-.4l-.2.2-12.2-12.4C197.1 1 194.9 0 192.6 0h-.1c-2.3 0-4.5.9-6.1 2.5-8.5 8.4-11.6 20.1-9.5 31.1-6 1.5-10.3 7.5-10.7 15-8.1.4-18.3 1.9-25.1 3.7L87.8 66.4 68.5 53c-7.8-5.4-20.8-9.5-30.3-9.5H25c-12.5 0-22.7 10.2-22.7 22.7v25.2c0 1.9.7 3.6 1.8 5.1-2.6 4.2-4.2 8.9-4.2 13.7v40.3c0 9.9 5.1 22.8 12 30l5.3 5.5c2.4 2.5 5.6 4.8 9.1 6.8.8 1 1.7 1.9 2.9 2.5 1.3.6 2.6.9 3.9.9.2 0 .4-.1.5-.1 4.5 1.6 9.2 2.6 13.4 2.6h28.1c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h174.2c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h48.1c13.1 0 22-5.5 22.6-13.7 8.9-2.8 15.5-11 15.5-20.8zm-22.7-4.6c2.8 0 5.1 2.1 5.1 4.6 0 2.5-2.4 4.6-5.1 4.6h-33.6c-2.8 0-5.1-2.1-5.1-4.6 0-2.5 2.4-4.6 5.1-4.6h33.6zm-335-136.7l19.9 20.2c-5.5 1.2-11.5-.4-15.6-4.6-4.2-4.2-5.7-10.2-4.3-15.6zm-60.6 54.2v4.4c0 2.8-2.4 5.1-5.1 5.1H81.9l48.9-11.7c.4-.1.7-.1 1-.1.6 0 1.8 0 1.8 2.3zM25 61.1h13.2c5.8 0 15.5 3 20.3 6.4l7 4.8-11.4 3-34.3 8.2V66.2c0-2.8 2.4-5.1 5.2-5.1zm-7.5 49.1c0-2.1 1.1-4.3 2.7-6.1h108.2c12.5 0 22.7-10.2 22.7-22.7V77c0-3.2-.7-6.1-1.9-8.7 5.1-1.1 11.6-1.9 16.9-2.3v38.7c0 2.8-2.4 5.1-5.1 5.1H81.7c-11 0-23 7.4-28 17.2L30 173.9s-.1-.1-.2-.1l-5.3-5.5c-3.8-3.9-7.2-12.5-7.2-17.9l.2-40.2zm54 68.5c0 .9.1 1.8.1 2.7H47.1c-.3 0-.6 0-.9-.1l23.3-46.2c2-3.9 8-7.6 12.3-7.6h20.7c-18.4 9.7-31 29-31 51.2zm57.8 40.2c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c-.1 22.3-18.1 40.3-40.3 40.3zm57.6-37.6c0-.9.1-1.8.1-2.7 0-6.7-1.2-13.1-3.3-19.1h173.4c-2.1 6-3.3 12.4-3.3 19.1 0 .9.1 1.8.1 2.7h-167zm224.7 37.6c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c0 22.3-18 40.3-40.3 40.3zm0-98c-18 0-34.1 8.3-44.7 21.2h-193c-4.9-6-11-10.9-17.9-14.5h4.9c12.5 0 22.7-10.2 22.7-22.7V66h120.3c6.3 0 16.8 2.5 22.5 5.2l62.2 30.7c7.7 3.8 20.4 7.7 29 8.8l73.7 9.8c5.1.7 12.6 5.3 15.5 9.6l8.1 12h-19.3c-12.5 0-22.7 9.9-22.7 22.2 0 6.9 3.4 13.1 8.5 17.1h-12.1c0-.9.1-1.8.1-2.7 0-31.9-25.9-57.8-57.8-57.8z"/></svg>
                    </a>
                </div>
                <div class="flyout-action-bar-action">
                    <a class="flyout-action flyout-action-resume">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551.9 236.5"><path d="M129.2 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM411.6 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4c.1-17.3-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM358 95.9l-28.4-16c-7.9-4.5-21.2-7.9-30.3-7.9h-78.8c-12.5 0-22.7 10.2-22.7 22.7v1.8c0 12.5 10.2 22.7 22.7 22.7H352c10.3 0 13.7-4.6 14.7-8.5 1-4 .3-9.7-8.7-14.8zm-137.5 5.7c-2.8 0-5.1-2.4-5.1-5.1v-1.8c0-2.8 2.4-5.1 5.1-5.1h78.8c6.2 0 16.3 2.7 21.7 5.7l11.4 6.4c0-.1-111.9-.1-111.9-.1z"/><path d="M551.9 164.2c0-9.8-6.6-18.1-15.7-21-.2-1-.6-2-1.2-2.9l-13.6-20.1c-5.7-8.4-17.6-15.8-27.7-17.1l-1.2-.2c-4.2-6.2-13.1-11.2-20.5-11.2h-19.7c-5.5 0-10.2 1.7-12.5 4.2L420 93.4c-6.6-.9-17.6-4.2-23.5-7.1l-62.2-30.7c-8-4-21.3-7.1-30.2-7.1h-67.7c1.4-3.2.8-7-1.8-9.6l-11.3-11.5c3.4-3.3 3.5-8.7.3-12.2-3.3-3.5-8.9-3.7-12.4-.4l-.2.2-12.2-12.4C197.1 1 194.9 0 192.6 0h-.1c-2.3 0-4.5.9-6.1 2.5-8.5 8.4-11.6 20.1-9.5 31.1-6 1.5-10.3 7.5-10.7 15-8.1.4-18.3 1.9-25.1 3.7L87.8 66.4 68.5 53c-7.8-5.4-20.8-9.5-30.3-9.5H25c-12.5 0-22.7 10.2-22.7 22.7v25.2c0 1.9.7 3.6 1.8 5.1-2.6 4.2-4.2 8.9-4.2 13.7v40.3c0 9.9 5.1 22.8 12 30l5.3 5.5c2.4 2.5 5.6 4.8 9.1 6.8.8 1 1.7 1.9 2.9 2.5 1.3.6 2.6.9 3.9.9.2 0 .4-.1.5-.1 4.5 1.6 9.2 2.6 13.4 2.6h28.1c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h174.2c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h48.1c13.1 0 22-5.5 22.6-13.7 8.9-2.8 15.5-11 15.5-20.8zm-22.7-4.6c2.8 0 5.1 2.1 5.1 4.6 0 2.5-2.4 4.6-5.1 4.6h-33.6c-2.8 0-5.1-2.1-5.1-4.6 0-2.5 2.4-4.6 5.1-4.6h33.6zm-335-136.7l19.9 20.2c-5.5 1.2-11.5-.4-15.6-4.6-4.2-4.2-5.7-10.2-4.3-15.6zm-60.6 54.2v4.4c0 2.8-2.4 5.1-5.1 5.1H81.9l48.9-11.7c.4-.1.7-.1 1-.1.6 0 1.8 0 1.8 2.3zM25 61.1h13.2c5.8 0 15.5 3 20.3 6.4l7 4.8-11.4 3-34.3 8.2V66.2c0-2.8 2.4-5.1 5.2-5.1zm-7.5 49.1c0-2.1 1.1-4.3 2.7-6.1h108.2c12.5 0 22.7-10.2 22.7-22.7V77c0-3.2-.7-6.1-1.9-8.7 5.1-1.1 11.6-1.9 16.9-2.3v38.7c0 2.8-2.4 5.1-5.1 5.1H81.7c-11 0-23 7.4-28 17.2L30 173.9s-.1-.1-.2-.1l-5.3-5.5c-3.8-3.9-7.2-12.5-7.2-17.9l.2-40.2zm54 68.5c0 .9.1 1.8.1 2.7H47.1c-.3 0-.6 0-.9-.1l23.3-46.2c2-3.9 8-7.6 12.3-7.6h20.7c-18.4 9.7-31 29-31 51.2zm57.8 40.2c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c-.1 22.3-18.1 40.3-40.3 40.3zm57.6-37.6c0-.9.1-1.8.1-2.7 0-6.7-1.2-13.1-3.3-19.1h173.4c-2.1 6-3.3 12.4-3.3 19.1 0 .9.1 1.8.1 2.7h-167zm224.7 37.6c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c0 22.3-18 40.3-40.3 40.3zm0-98c-18 0-34.1 8.3-44.7 21.2h-193c-4.9-6-11-10.9-17.9-14.5h4.9c12.5 0 22.7-10.2 22.7-22.7V66h120.3c6.3 0 16.8 2.5 22.5 5.2l62.2 30.7c7.7 3.8 20.4 7.7 29 8.8l73.7 9.8c5.1.7 12.6 5.3 15.5 9.6l8.1 12h-19.3c-12.5 0-22.7 9.9-22.7 22.2 0 6.9 3.4 13.1 8.5 17.1h-12.1c0-.9.1-1.8.1-2.7 0-31.9-25.9-57.8-57.8-57.8z"/></svg>
                    </a>
                </div>
                <div class="flyout-action-bar-action">
                    <a class="flyout-action flyout-action-resume">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551.9 236.5"><path d="M129.2 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM411.6 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4c.1-17.3-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM358 95.9l-28.4-16c-7.9-4.5-21.2-7.9-30.3-7.9h-78.8c-12.5 0-22.7 10.2-22.7 22.7v1.8c0 12.5 10.2 22.7 22.7 22.7H352c10.3 0 13.7-4.6 14.7-8.5 1-4 .3-9.7-8.7-14.8zm-137.5 5.7c-2.8 0-5.1-2.4-5.1-5.1v-1.8c0-2.8 2.4-5.1 5.1-5.1h78.8c6.2 0 16.3 2.7 21.7 5.7l11.4 6.4c0-.1-111.9-.1-111.9-.1z"/><path d="M551.9 164.2c0-9.8-6.6-18.1-15.7-21-.2-1-.6-2-1.2-2.9l-13.6-20.1c-5.7-8.4-17.6-15.8-27.7-17.1l-1.2-.2c-4.2-6.2-13.1-11.2-20.5-11.2h-19.7c-5.5 0-10.2 1.7-12.5 4.2L420 93.4c-6.6-.9-17.6-4.2-23.5-7.1l-62.2-30.7c-8-4-21.3-7.1-30.2-7.1h-67.7c1.4-3.2.8-7-1.8-9.6l-11.3-11.5c3.4-3.3 3.5-8.7.3-12.2-3.3-3.5-8.9-3.7-12.4-.4l-.2.2-12.2-12.4C197.1 1 194.9 0 192.6 0h-.1c-2.3 0-4.5.9-6.1 2.5-8.5 8.4-11.6 20.1-9.5 31.1-6 1.5-10.3 7.5-10.7 15-8.1.4-18.3 1.9-25.1 3.7L87.8 66.4 68.5 53c-7.8-5.4-20.8-9.5-30.3-9.5H25c-12.5 0-22.7 10.2-22.7 22.7v25.2c0 1.9.7 3.6 1.8 5.1-2.6 4.2-4.2 8.9-4.2 13.7v40.3c0 9.9 5.1 22.8 12 30l5.3 5.5c2.4 2.5 5.6 4.8 9.1 6.8.8 1 1.7 1.9 2.9 2.5 1.3.6 2.6.9 3.9.9.2 0 .4-.1.5-.1 4.5 1.6 9.2 2.6 13.4 2.6h28.1c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h174.2c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h48.1c13.1 0 22-5.5 22.6-13.7 8.9-2.8 15.5-11 15.5-20.8zm-22.7-4.6c2.8 0 5.1 2.1 5.1 4.6 0 2.5-2.4 4.6-5.1 4.6h-33.6c-2.8 0-5.1-2.1-5.1-4.6 0-2.5 2.4-4.6 5.1-4.6h33.6zm-335-136.7l19.9 20.2c-5.5 1.2-11.5-.4-15.6-4.6-4.2-4.2-5.7-10.2-4.3-15.6zm-60.6 54.2v4.4c0 2.8-2.4 5.1-5.1 5.1H81.9l48.9-11.7c.4-.1.7-.1 1-.1.6 0 1.8 0 1.8 2.3zM25 61.1h13.2c5.8 0 15.5 3 20.3 6.4l7 4.8-11.4 3-34.3 8.2V66.2c0-2.8 2.4-5.1 5.2-5.1zm-7.5 49.1c0-2.1 1.1-4.3 2.7-6.1h108.2c12.5 0 22.7-10.2 22.7-22.7V77c0-3.2-.7-6.1-1.9-8.7 5.1-1.1 11.6-1.9 16.9-2.3v38.7c0 2.8-2.4 5.1-5.1 5.1H81.7c-11 0-23 7.4-28 17.2L30 173.9s-.1-.1-.2-.1l-5.3-5.5c-3.8-3.9-7.2-12.5-7.2-17.9l.2-40.2zm54 68.5c0 .9.1 1.8.1 2.7H47.1c-.3 0-.6 0-.9-.1l23.3-46.2c2-3.9 8-7.6 12.3-7.6h20.7c-18.4 9.7-31 29-31 51.2zm57.8 40.2c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c-.1 22.3-18.1 40.3-40.3 40.3zm57.6-37.6c0-.9.1-1.8.1-2.7 0-6.7-1.2-13.1-3.3-19.1h173.4c-2.1 6-3.3 12.4-3.3 19.1 0 .9.1 1.8.1 2.7h-167zm224.7 37.6c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c0 22.3-18 40.3-40.3 40.3zm0-98c-18 0-34.1 8.3-44.7 21.2h-193c-4.9-6-11-10.9-17.9-14.5h4.9c12.5 0 22.7-10.2 22.7-22.7V66h120.3c6.3 0 16.8 2.5 22.5 5.2l62.2 30.7c7.7 3.8 20.4 7.7 29 8.8l73.7 9.8c5.1.7 12.6 5.3 15.5 9.6l8.1 12h-19.3c-12.5 0-22.7 9.9-22.7 22.2 0 6.9 3.4 13.1 8.5 17.1h-12.1c0-.9.1-1.8.1-2.7 0-31.9-25.9-57.8-57.8-57.8z"/></svg>
                    </a>
                </div>
                <div class="flyout-action-bar-action">
                    <a class="flyout-action user-action-email" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551.9 236.5"><path d="M129.2 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM411.6 147.2c-17.3 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4 31.4-14.1 31.4-31.4c.1-17.3-14-31.4-31.4-31.4zm0 45.4c-7.7 0-13.9-6.2-13.9-13.9s6.2-13.9 13.9-13.9 13.9 6.2 13.9 13.9c.1 7.6-6.2 13.9-13.9 13.9zM358 95.9l-28.4-16c-7.9-4.5-21.2-7.9-30.3-7.9h-78.8c-12.5 0-22.7 10.2-22.7 22.7v1.8c0 12.5 10.2 22.7 22.7 22.7H352c10.3 0 13.7-4.6 14.7-8.5 1-4 .3-9.7-8.7-14.8zm-137.5 5.7c-2.8 0-5.1-2.4-5.1-5.1v-1.8c0-2.8 2.4-5.1 5.1-5.1h78.8c6.2 0 16.3 2.7 21.7 5.7l11.4 6.4c0-.1-111.9-.1-111.9-.1z"/><path d="M551.9 164.2c0-9.8-6.6-18.1-15.7-21-.2-1-.6-2-1.2-2.9l-13.6-20.1c-5.7-8.4-17.6-15.8-27.7-17.1l-1.2-.2c-4.2-6.2-13.1-11.2-20.5-11.2h-19.7c-5.5 0-10.2 1.7-12.5 4.2L420 93.4c-6.6-.9-17.6-4.2-23.5-7.1l-62.2-30.7c-8-4-21.3-7.1-30.2-7.1h-67.7c1.4-3.2.8-7-1.8-9.6l-11.3-11.5c3.4-3.3 3.5-8.7.3-12.2-3.3-3.5-8.9-3.7-12.4-.4l-.2.2-12.2-12.4C197.1 1 194.9 0 192.6 0h-.1c-2.3 0-4.5.9-6.1 2.5-8.5 8.4-11.6 20.1-9.5 31.1-6 1.5-10.3 7.5-10.7 15-8.1.4-18.3 1.9-25.1 3.7L87.8 66.4 68.5 53c-7.8-5.4-20.8-9.5-30.3-9.5H25c-12.5 0-22.7 10.2-22.7 22.7v25.2c0 1.9.7 3.6 1.8 5.1-2.6 4.2-4.2 8.9-4.2 13.7v40.3c0 9.9 5.1 22.8 12 30l5.3 5.5c2.4 2.5 5.6 4.8 9.1 6.8.8 1 1.7 1.9 2.9 2.5 1.3.6 2.6.9 3.9.9.2 0 .4-.1.5-.1 4.5 1.6 9.2 2.6 13.4 2.6h28.1c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h174.2c8.2 21.9 29.3 37.6 54.1 37.6s45.9-15.7 54.1-37.6h48.1c13.1 0 22-5.5 22.6-13.7 8.9-2.8 15.5-11 15.5-20.8zm-22.7-4.6c2.8 0 5.1 2.1 5.1 4.6 0 2.5-2.4 4.6-5.1 4.6h-33.6c-2.8 0-5.1-2.1-5.1-4.6 0-2.5 2.4-4.6 5.1-4.6h33.6zm-335-136.7l19.9 20.2c-5.5 1.2-11.5-.4-15.6-4.6-4.2-4.2-5.7-10.2-4.3-15.6zm-60.6 54.2v4.4c0 2.8-2.4 5.1-5.1 5.1H81.9l48.9-11.7c.4-.1.7-.1 1-.1.6 0 1.8 0 1.8 2.3zM25 61.1h13.2c5.8 0 15.5 3 20.3 6.4l7 4.8-11.4 3-34.3 8.2V66.2c0-2.8 2.4-5.1 5.2-5.1zm-7.5 49.1c0-2.1 1.1-4.3 2.7-6.1h108.2c12.5 0 22.7-10.2 22.7-22.7V77c0-3.2-.7-6.1-1.9-8.7 5.1-1.1 11.6-1.9 16.9-2.3v38.7c0 2.8-2.4 5.1-5.1 5.1H81.7c-11 0-23 7.4-28 17.2L30 173.9s-.1-.1-.2-.1l-5.3-5.5c-3.8-3.9-7.2-12.5-7.2-17.9l.2-40.2zm54 68.5c0 .9.1 1.8.1 2.7H47.1c-.3 0-.6 0-.9-.1l23.3-46.2c2-3.9 8-7.6 12.3-7.6h20.7c-18.4 9.7-31 29-31 51.2zm57.8 40.2c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c-.1 22.3-18.1 40.3-40.3 40.3zm57.6-37.6c0-.9.1-1.8.1-2.7 0-6.7-1.2-13.1-3.3-19.1h173.4c-2.1 6-3.3 12.4-3.3 19.1 0 .9.1 1.8.1 2.7h-167zm224.7 37.6c-22.2 0-40.3-18.1-40.3-40.3 0-22.2 18.1-40.3 40.3-40.3s40.3 18.1 40.3 40.3c0 22.3-18 40.3-40.3 40.3zm0-98c-18 0-34.1 8.3-44.7 21.2h-193c-4.9-6-11-10.9-17.9-14.5h4.9c12.5 0 22.7-10.2 22.7-22.7V66h120.3c6.3 0 16.8 2.5 22.5 5.2l62.2 30.7c7.7 3.8 20.4 7.7 29 8.8l73.7 9.8c5.1.7 12.6 5.3 15.5 9.6l8.1 12h-19.3c-12.5 0-22.7 9.9-22.7 22.2 0 6.9 3.4 13.1 8.5 17.1h-12.1c0-.9.1-1.8.1-2.7 0-31.9-25.9-57.8-57.8-57.8z"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Montserrat);
body,html{
    background: whitesmoke;
    display: flex;
    font-family: Montserrat, sans-serif;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}
.flyout-options{
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: 20px;
    span{
        cursor: pointer;
        border: 1px solid #1a1a1a;
        padding: 5px;
        &.is-selected{
            background: #1a1a1a;
            color: whitesmoke;
        }
    }
}
.flyout-action-bar{
    position: relative;
    margin-top: 70px;
}
.flyout-action-bar-actions{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65px;
    height: 65px;
    transform: translateX(-50%) translateY(-50%);
    .flyout-action-bar-action{
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        transform-origin: 50% 50%;
    }
    .flyout-action{
        width: 65px;
        height: 65px;
        display: flex;
        align-items: center;
        opacity: 0;
        transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);;
        svg{
            max-height: 50px;
            fill: #1a1a1a;
        }
    }
}
.flyout-icon {
    position: relative;
    width: 65px;
    height: 65px;
    cursor: pointer;
    &.is-active{
        > svg{
            transform: rotate(45deg);
        }
    }
    svg{
        width: 65px;
        height: 65px;
        transition: 400ms transform;
    }
}

$icons: 5;

@for $i from 1 through $icons {
    .flyout{
        .to-top{
            .flyout-action-bar-action:nth-child(#{$i}) {
                transform: rotate(-22.5deg + 45deg * ($i - 1));
            }
        }
        .flyout-icon.is-active {
            .flyout-action-bar-action{
                pointer-events: auto;
            }
            .to-top{
                .flyout-action-bar-action:nth-child(#{$i}) .flyout-action {
                    opacity: 1;
                    transform: translateY(-105px) rotate(22.5deg - 45deg * ($i - 1));
                }
            }
            .to-left{
                .flyout-action-bar-action:nth-child(#{$i}) .flyout-action {
                    opacity: 1;
                    transform: translateX(-75px*$i+5) rotate(0);
                }
            }
            .to-right{
                .flyout-action-bar-action:nth-child(#{$i}) .flyout-action {
                    opacity: 1;
                    transform: translateX(75px*$i+5) rotate(720deg);
                }
            }
        }
    }
}
              
            
!

JS

              
                $('.flyout-icon').click(function() {
    $(this).toggleClass('is-active');
});

//Selection JS class swappin.
$('.flyout-options span').click(function() {
    var $newClass = $(this).attr('class');
    $(this).siblings().removeClass('is-selected');
    $(this).addClass('is-selected');
    $('.flyout-action-bar-actions').attr('class', 'flyout-action-bar-actions ' + $newClass);
});
              
            
!
999px

Console