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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <div class="outerContainer">
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" class="link" viewBox="0 0 700 450"><rect x="5" y="5" width="690" height="440" fill="none"/>
  <g class="iconTextLayer"><style>.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}</style><g class="iconTextLayer"><path d="M317.7 256.6c-1.1-1-10-9-34.5-11-1.3-.1-2.7-1.3-3.9-2.2-1.5-1.2-3.1-2.5-4.3-4.1-1.9-2.7-4-4.9-5.8-7.9-11.9-19.9-23.6-23.9-25.4-24.7-2.3-1.3-11.2.3-7 7.4.3.1 13.6 22.5 14.5 24.3 1.5 3.2 3.3 4.5 4.9 6.7 1.5 2 3.1 3.9 4.7 5.9 0 0-8.5-6.1-10.6-8.7-.9-1.2-1.4-2.9-2.1-4.3-.8-1.6-1.7-3.2-2.6-4.8-1.1-2-2.3-3.9-3.5-5.8-1.5-2.4-3.2-4.8-4.7-7.1-1-1.5-2.1-2.9-2.9-4.4-4-7.6.6-12.2 5-12.8-.2-.9-2.2-24-2.6-27.9-1-11.1-2-19.4-7.3-21.6-1.4-.6-2.3-.4-3.4.9-1.2 1.5-1.9 9.6-2.3 14.7 0 0-2.3 27.5-1.8 40.3.3 6.9 18.1 54.1 23.3 61.5 5.1 7.3 45.2 35 45.2 35 1.3 1.3 8.8 8.2 8.8 17.1v19.5l43.2.1v-17.9c.1-3.3.6-6.6.9-9.9.9-3.8.2-10.9-.3-13.6-5-27-23.5-42.8-25.5-44.7zm157.7-87.5c-.4-5.1-1.1-13.2-2.3-14.7-1-1.3-2-1.5-3.4-.9-5.3 2.2-6.3 10.5-7.3 21.6-.4 3.9-2.4 27-2.6 27.9 4.4.6 9 5.1 5 12.8-.8 1.5-1.9 3-2.9 4.4-1.6 2.4-3.2 4.7-4.8 7.1-1.2 1.9-2.4 3.8-3.5 5.8-.9 1.6-1.8 3.2-2.6 4.8-.7 1.4-1.2 3.1-2.1 4.3-2 2.7-10.6 8.7-10.6 8.7 1.5-2 3.2-3.9 4.7-5.9 1.6-2.2 3.4-3.5 4.9-6.7.9-1.8 14.2-24.3 14.5-24.3 4.3-7.1-4.6-8.8-7-7.4-1.7.8-13.4 4.8-25.4 24.7-1.8 3-3.9 5.2-5.8 7.9-1.2 1.6-2.7 2.9-4.3 4.1-1.2 1-2.6 2.1-3.9 2.2-24.5 1.9-33.4 10-34.5 11-2 1.9-20.5 17.7-25.5 44.5-.4 2.8-1.2 9.9-.3 13.6.3 3.3.8 6.6.9 9.9v17.9l43.2-.1v-19.5c0-9 7.4-15.8 8.8-17.1 0 0 40.1-27.7 45.2-35 5.1-7.3 23-54.6 23.3-61.5.7-12.6-1.7-40.1-1.7-40.1z"/><path d="M437.3 76.3l-.3-5.4-5.2-1.3c-31.1-7.7-31.7-36.9-31.7-38.2v-5.7l-5.5-1.3c-1.1-.3-26.8-6.2-44-6.2s-42.9 5.8-44 6l-5.5 1.3v5.7c0 1.3-.3 30.5-31.7 38.2l-5.2 1.4-.3 5.4c0 .9-.9 23.7 8.8 51.9 9 26.2 29.4 62.2 74.6 85.4l3.3 1.7 3.3-1.7c45.3-23.2 65.5-59.3 74.6-85.4 9.8-28.2 8.8-50.9 8.8-51.8zm-122.4-39c8-1.7 23.8-4.6 35-4.7V116h-66c-4.3-15-5.4-27.6-5.7-34.2 25.5-8.5 34.8-30.2 36.7-44.5zm36.3 161.4v-81.4h65.6c-.6 2.2-1.4 4.4-2.2 6.6-11.4 32.8-32.8 57.9-63.4 74.8z" id="checkered-shield"/><path d="M40.9 431.3H30.6v-54.9h10.3v54.9zm19-34.2c.8-.8 1.6-1.5 2.5-2.2s1.8-1.2 2.8-1.7 2-.8 3.1-1.1c1.1-.3 2.3-.4 3.6-.4 2.1 0 4 .4 5.7 1.1 1.6.7 3 1.7 4.1 3s1.9 2.9 2.5 4.7c.6 1.8.9 3.8.9 6v24.8h-9.4v-24.8c0-2.4-.5-4.2-1.6-5.5-1.1-1.3-2.7-2-5-2-1.6 0-3.1.4-4.6 1.1-1.4.7-2.8 1.7-4 3v28.2h-9.4v-39h5.7c1.2 0 2 .6 2.4 1.7l.7 3.1zm57.8 2.8c-.3.4-.5.7-.8.9-.3.2-.6.2-1.1.2-.5 0-.9-.1-1.5-.4-.5-.3-1.1-.5-1.8-.9-.7-.3-1.5-.6-2.3-.9-.9-.3-1.9-.4-3.1-.4-1.8 0-3.3.4-4.4 1.2-1.1.8-1.6 1.8-1.6 3.1 0 .8.3 1.5.8 2.1.5.6 1.3 1.1 2.2 1.5.9.4 1.9.8 3.1 1.2 1.1.3 2.3.7 3.5 1.1 1.2.4 2.3.9 3.5 1.4 1.1.5 2.2 1.2 3.1 2 .9.8 1.6 1.8 2.2 2.9.5 1.1.8 2.5.8 4 0 1.9-.3 3.6-1 5.2s-1.7 3-3 4.1c-1.3 1.2-2.9 2.1-4.9 2.7-1.9.6-4.2 1-6.7 1-1.3 0-2.7-.1-3.9-.4-1.3-.2-2.5-.6-3.7-1s-2.3-.9-3.3-1.5-1.9-1.2-2.6-1.9l2.2-3.6c.3-.4.6-.8 1-1 .4-.2.9-.3 1.4-.3.6 0 1.1.2 1.7.5.5.3 1.1.7 1.8 1.1.7.4 1.5.7 2.4 1.1.9.3 2.1.5 3.5.5 1.1 0 2.1-.1 2.9-.4.8-.3 1.5-.6 2-1s.9-.9 1.1-1.5c.2-.6.4-1.2.4-1.8 0-.9-.3-1.7-.8-2.2-.5-.6-1.3-1.1-2.2-1.5-.9-.4-1.9-.8-3.1-1.2-1.2-.3-2.3-.7-3.5-1.1-1.2-.4-2.4-.9-3.5-1.4-1.2-.5-2.2-1.2-3.1-2.1-.9-.8-1.6-1.9-2.2-3.1-.5-1.2-.8-2.7-.8-4.4 0-1.6.3-3.1 1-4.6.6-1.4 1.6-2.7 2.8-3.8 1.2-1.1 2.8-1.9 4.6-2.6 1.8-.6 4-1 6.4-1 2.7 0 5.1.4 7.3 1.3s4 2.1 5.5 3.5l-2.3 3.4zm43.2-7.6v39h-5.7c-1.2 0-2-.6-2.4-1.7l-.6-3.1c-1.6 1.6-3.4 2.9-5.3 3.9s-4.2 1.5-6.8 1.5c-2.1 0-4-.4-5.6-1.1-1.6-.7-3-1.7-4.1-3.1-1.1-1.3-2-2.9-2.5-4.7-.6-1.8-.9-3.8-.9-6v-24.8h9.4V417c0 2.4.6 4.2 1.7 5.5s2.8 2 5 2c1.6 0 3.1-.4 4.6-1.1 1.4-.7 2.8-1.7 4-3v-28.2h9.2zm18.2 6.8c1.2-2.3 2.7-4.2 4.3-5.5 1.7-1.3 3.6-2 5.9-2 1.8 0 3.2.4 4.3 1.2l-.6 7c-.1.5-.3.8-.6 1-.2.2-.6.3-1 .3s-.9-.1-1.7-.2c-.7-.1-1.5-.2-2.2-.2-1 0-2 .2-2.8.5-.8.3-1.5.7-2.2 1.3-.6.6-1.2 1.3-1.7 2.1s-1 1.7-1.4 2.8v24H170v-39h5.5c1 0 1.6.2 2 .5.4.3.6 1 .8 1.8l.8 4.4zm18.1-1.4c4.5-4.1 9.9-6.2 16.2-6.2 2.3 0 4.3.4 6.1 1.1s3.3 1.8 4.6 3.1 2.2 2.9 2.8 4.8c.6 1.8 1 3.9 1 6.1v24.6h-4.3c-.9 0-1.6-.1-2.1-.4-.5-.3-.9-.8-1.1-1.6l-.8-2.8c-1 .9-2 1.7-2.9 2.3-.9.7-1.9 1.2-2.9 1.7s-2.1.8-3.2 1c-1.2.2-2.4.4-3.8.4-1.6 0-3.2-.2-4.6-.7-1.4-.4-2.6-1.1-3.6-2-1-.9-1.8-2-2.4-3.3-.6-1.3-.8-2.8-.8-4.6 0-1 .2-2 .5-2.9.3-1 .9-1.9 1.6-2.8.7-.9 1.7-1.7 2.9-2.5s2.7-1.5 4.4-2.1c1.7-.6 3.8-1.1 6.1-1.4 2.3-.4 4.9-.6 7.9-.7v-2.3c0-2.6-.6-4.5-1.7-5.8-1.1-1.3-2.7-1.9-4.8-1.9-1.5 0-2.8.2-3.8.5-1 .4-1.9.8-2.6 1.2-.8.4-1.5.8-2.1 1.2-.6.4-1.3.5-2.1.5-.7 0-1.2-.2-1.7-.5s-.8-.7-1.1-1.2l-1.7-2.8zm21.5 16.9c-2.7.1-5 .4-6.8.7-1.8.3-3.3.8-4.4 1.3s-1.9 1.2-2.4 1.9-.7 1.5-.7 2.3c0 1.6.5 2.8 1.5 3.5 1 .7 2.2 1.1 3.8 1.1 1.9 0 3.6-.3 5-1s2.8-1.8 4.1-3.2v-6.6zm26.7-17.5c.8-.8 1.6-1.5 2.5-2.2s1.8-1.2 2.8-1.7 2-.8 3.1-1.1c1.1-.3 2.3-.4 3.6-.4 2.1 0 4 .4 5.7 1.1 1.6.7 3 1.7 4.1 3s1.9 2.9 2.5 4.7c.6 1.8.9 3.8.9 6v24.8h-9.4v-24.8c0-2.4-.5-4.2-1.6-5.5-1.1-1.3-2.7-2-5-2-1.6 0-3.1.4-4.6 1.1-1.4.7-2.8 1.7-4 3v28.2h-9.4v-39h5.7c1.2 0 2 .6 2.4 1.7l.7 3.1zm62 3.4c-.3.4-.6.6-.8.8-.3.2-.7.3-1.2.3s-.9-.1-1.4-.4c-.5-.3-1-.6-1.6-1-.6-.4-1.4-.7-2.3-1s-2-.4-3.2-.4c-1.6 0-3.1.3-4.3.9-1.2.6-2.3 1.5-3.1 2.6-.8 1.1-1.4 2.5-1.8 4-.4 1.6-.6 3.4-.6 5.4 0 2.1.2 3.9.7 5.5.4 1.6 1.1 3 1.9 4.1.8 1.1 1.8 1.9 3 2.5 1.2.6 2.5.9 4 .9s2.7-.2 3.6-.6c.9-.4 1.7-.8 2.3-1.2s1.2-.8 1.7-1.2c.5-.4 1-.6 1.6-.6.8 0 1.3.3 1.7.9l2.7 3.4c-1 1.2-2.2 2.2-3.4 3.1-1.2.8-2.5 1.5-3.8 2-1.3.5-2.6.8-4 1-1.4.2-2.8.3-4.1.3-2.4 0-4.7-.5-6.8-1.3-2.1-.9-4-2.2-5.6-3.9-1.6-1.7-2.9-3.8-3.8-6.3-.9-2.5-1.4-5.3-1.4-8.5 0-2.9.4-5.5 1.2-8 .8-2.4 2-4.6 3.6-6.3 1.6-1.8 3.6-3.2 5.9-4.2 2.4-1 5.1-1.5 8.1-1.5 2.9 0 5.5.5 7.7 1.4 2.2.9 4.2 2.3 5.9 4l-2.4 3.3zm15.3 12.5c.2 2 .5 3.7 1.1 5.2.6 1.5 1.3 2.7 2.2 3.6.9.9 2 1.7 3.2 2.1s2.6.7 4.2.7c1.5 0 2.8-.2 3.9-.5 1.1-.4 2.1-.7 2.9-1.2.8-.4 1.5-.8 2.2-1.2.6-.4 1.2-.5 1.8-.5.8 0 1.4.3 1.7.9l2.7 3.4c-1 1.2-2.2 2.2-3.5 3.1s-2.6 1.5-4 2-2.8.8-4.3 1-2.9.3-4.2.3c-2.7 0-5.2-.5-7.6-1.3-2.3-.9-4.4-2.2-6.1-4s-3.1-3.9-4.1-6.5c-1-2.6-1.5-5.6-1.5-9 0-2.7.4-5.2 1.3-7.5s2.1-4.4 3.7-6.1c1.6-1.7 3.6-3.1 5.9-4.1 2.3-1 4.9-1.5 7.8-1.5 2.5 0 4.7.4 6.8 1.2s3.9 1.9 5.4 3.4c1.5 1.5 2.7 3.4 3.5 5.5s1.3 4.7 1.3 7.5c0 1.4-.2 2.4-.5 2.9s-.9.7-1.7.7h-24.1zm17.9-5.7c0-1.2-.2-2.4-.5-3.4-.3-1.1-.9-2-1.5-2.8-.7-.8-1.6-1.5-2.6-1.9-1.1-.5-2.3-.7-3.7-.7-2.7 0-4.8.8-6.4 2.3-1.6 1.5-2.6 3.7-3 6.6h17.7zm53.2-31c3.7 0 6.9.4 9.5 1.3 2.7.9 4.9 2.1 6.7 3.6 1.7 1.5 3 3.4 3.9 5.5s1.3 4.5 1.3 7.1c0 2.7-.4 5.1-1.3 7.3s-2.2 4.1-4 5.7c-1.8 1.6-4 2.8-6.7 3.7s-5.8 1.3-9.4 1.3h-7.6v19.3H376v-54.9h17.8zm0 27.7c1.9 0 3.5-.2 4.9-.7 1.4-.5 2.6-1.1 3.5-2 .9-.9 1.6-1.9 2.1-3.2.5-1.3.7-2.7.7-4.2s-.2-2.8-.7-4c-.5-1.2-1.1-2.2-2.1-3s-2.1-1.5-3.5-1.9c-1.4-.4-3-.7-4.9-.7h-7.6V404h7.6zm36-4.9c1.2-2.3 2.7-4.2 4.3-5.5s3.6-2 5.9-2c1.8 0 3.2.4 4.3 1.2l-.6 7c-.1.5-.3.8-.6 1-.2.2-.6.3-1 .3s-.9-.1-1.7-.2c-.7-.1-1.5-.2-2.2-.2-1 0-2 .2-2.8.5s-1.5.7-2.2 1.3c-.6.6-1.2 1.3-1.7 2.1s-1 1.7-1.4 2.8v24h-9.4v-39h5.5c1 0 1.6.2 2 .5.4.3.6 1 .8 1.8l.8 4.4zm35.6-7.4c2.9 0 5.5.5 7.9 1.4 2.4.9 4.4 2.3 6.1 4 1.7 1.7 3 3.8 3.9 6.3s1.4 5.3 1.4 8.3c0 3.1-.5 5.9-1.4 8.4-.9 2.5-2.2 4.6-3.9 6.3s-3.7 3.1-6.1 4c-2.4.9-5 1.4-7.9 1.4-2.9 0-5.6-.5-7.9-1.4-2.4-.9-4.4-2.3-6.1-4s-3-3.9-3.9-6.3c-.9-2.5-1.4-5.3-1.4-8.4 0-3.1.5-5.8 1.4-8.3s2.2-4.6 3.9-6.3c1.7-1.7 3.7-3.1 6.1-4 2.4-.9 5-1.4 7.9-1.4zm0 32.9c3.2 0 5.6-1.1 7.2-3.3 1.6-2.2 2.3-5.4 2.3-9.6 0-4.2-.8-7.4-2.3-9.6-1.6-2.2-4-3.3-7.2-3.3-3.3 0-5.7 1.1-7.3 3.3-1.6 2.2-2.4 5.4-2.4 9.6s.8 7.4 2.4 9.6c1.6 2.2 4 3.3 7.3 3.3zm60.3-49.8v56.5H520c-1.2 0-2-.6-2.4-1.7l-.8-3.8c-1.6 1.8-3.4 3.3-5.4 4.4-2 1.1-4.4 1.7-7.1 1.7-2.1 0-4.1-.4-5.9-1.3s-3.3-2.2-4.6-3.9c-1.3-1.7-2.3-3.8-3-6.3-.7-2.5-1-5.3-1-8.5 0-2.9.4-5.6 1.2-8.1.8-2.5 1.9-4.6 3.4-6.5 1.5-1.8 3.2-3.2 5.3-4.3s4.4-1.5 6.9-1.5c2.2 0 4 .3 5.6 1 1.5.7 2.9 1.6 4.1 2.8v-20.6h9.4zm-9.4 27.4c-1.1-1.3-2.2-2.2-3.5-2.7-1.3-.5-2.6-.8-4-.8s-2.7.3-3.8.8c-1.1.5-2.1 1.3-2.9 2.4-.8 1.1-1.4 2.4-1.9 4.1s-.6 3.6-.6 5.9c0 2.3.2 4.2.6 5.8.4 1.6.9 2.9 1.6 3.9.7 1 1.5 1.7 2.5 2.2 1 .4 2.1.7 3.3.7 2 0 3.6-.4 5-1.2 1.4-.8 2.7-2 3.9-3.5v-17.6zm52.3-9.9v39h-5.7c-1.2 0-2-.6-2.4-1.7l-.6-3.1c-1.6 1.6-3.4 2.9-5.3 3.9s-4.2 1.5-6.8 1.5c-2.1 0-4-.4-5.6-1.1-1.6-.7-3-1.7-4.1-3.1-1.1-1.3-2-2.9-2.5-4.7-.6-1.8-.9-3.8-.9-6v-24.8h9.4V417c0 2.4.6 4.2 1.7 5.5 1.1 1.3 2.8 2 5 2 1.6 0 3.1-.4 4.6-1.1 1.4-.7 2.8-1.7 4-3v-28.2h9.2zm37.2 8.2c-.3.4-.6.6-.8.8-.3.2-.7.3-1.2.3s-1-.1-1.4-.4c-.5-.3-1-.6-1.6-1-.6-.4-1.4-.7-2.3-1s-2-.4-3.2-.4c-1.6 0-3.1.3-4.3.9-1.2.6-2.3 1.5-3.1 2.6-.8 1.1-1.4 2.5-1.8 4-.4 1.6-.6 3.4-.6 5.4 0 2.1.2 3.9.7 5.5.4 1.6 1.1 3 1.9 4.1.8 1.1 1.8 1.9 3 2.5 1.2.6 2.5.9 4 .9s2.7-.2 3.6-.6c.9-.4 1.7-.8 2.3-1.2.6-.4 1.2-.8 1.7-1.2s1-.6 1.6-.6c.8 0 1.3.3 1.7.9l2.7 3.4c-1 1.2-2.2 2.2-3.4 3.1s-2.5 1.5-3.8 2-2.6.8-4 1-2.8.3-4.1.3c-2.4 0-4.7-.5-6.8-1.3-2.1-.9-4-2.2-5.6-3.9s-2.9-3.8-3.8-6.3-1.4-5.3-1.4-8.5c0-2.9.4-5.5 1.2-8 .8-2.4 2-4.6 3.6-6.3s3.6-3.2 5.9-4.2c2.4-1 5.1-1.5 8.1-1.5 2.9 0 5.5.5 7.7 1.4 2.2.9 4.2 2.3 5.9 4l-2.4 3.3zm21.7 31.4c-3.4 0-6-1-7.8-2.9-1.8-1.9-2.7-4.6-2.7-7.9v-21.8h-4c-.5 0-.9-.2-1.3-.5s-.5-.8-.5-1.5v-3.7l6.3-1 2-10.6c.1-.5.4-.9.7-1.2.4-.3.8-.4 1.4-.4h4.9v12.3h10.4v6.7h-10.4v21.1c0 1.2.3 2.2.9 2.8.6.7 1.4 1 2.5 1 .6 0 1.1-.1 1.5-.2.4-.1.7-.3 1-.4.3-.2.6-.3.8-.4.2-.1.5-.2.7-.2.3 0 .5.1.7.2.2.1.4.3.6.6l2.8 4.6c-1.4 1.1-2.9 2-4.7 2.6-2.1.5-3.9.8-5.8.8zm39-32c-.3.4-.5.7-.8.9-.3.2-.6.2-1.1.2-.5 0-.9-.1-1.5-.4-.5-.3-1.1-.5-1.8-.9-.7-.3-1.5-.6-2.3-.9-.9-.3-1.9-.4-3.1-.4-1.8 0-3.3.4-4.4 1.2-1.1.8-1.6 1.8-1.6 3.1 0 .8.3 1.5.8 2.1.5.6 1.3 1.1 2.2 1.5.9.4 1.9.8 3.1 1.2 1.1.3 2.3.7 3.5 1.1 1.2.4 2.3.9 3.5 1.4 1.1.5 2.2 1.2 3.1 2 .9.8 1.6 1.8 2.2 2.9.5 1.1.8 2.5.8 4 0 1.9-.3 3.6-1 5.2s-1.7 3-3 4.1c-1.3 1.2-2.9 2.1-4.9 2.7-1.9.6-4.2 1-6.7 1-1.3 0-2.7-.1-3.9-.4-1.3-.2-2.5-.6-3.7-1-1.2-.4-2.3-.9-3.3-1.5s-1.9-1.2-2.6-1.9l2.2-3.6c.3-.4.6-.8 1-1 .4-.2.9-.3 1.4-.3.6 0 1.1.2 1.7.5.5.3 1.1.7 1.8 1.1.7.4 1.5.7 2.4 1.1s2.1.5 3.5.5c1.1 0 2.1-.1 2.9-.4.8-.3 1.5-.6 2-1s.9-.9 1.1-1.5c.2-.6.4-1.2.4-1.8 0-.9-.3-1.7-.8-2.2s-1.3-1.1-2.2-1.5c-.9-.4-1.9-.8-3.1-1.2-1.2-.3-2.3-.7-3.5-1.1s-2.4-.9-3.5-1.4c-1.2-.5-2.2-1.2-3.1-2.1-.9-.8-1.6-1.9-2.2-3.1-.5-1.2-.8-2.7-.8-4.4 0-1.6.3-3.1 1-4.6.6-1.4 1.6-2.7 2.8-3.8 1.2-1.1 2.8-1.9 4.6-2.6 1.8-.6 4-1 6.4-1 2.7 0 5.1.4 7.3 1.3s4 2.1 5.5 3.5l-2.3 3.4z"/><g>
    <line class="st0" x1="700" y1="0" x2="700" y2="450" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5"/>
	<line class="st0" x1="0" y1="0" x2="700" y2="0" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5" />
	<line class="st0" x1="0" y1="450" x2="0" y2="0" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5"/>
	<line class="st0" x1="700" y1="450" x2="0" y2="450" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5" />
  </g></svg>
    </div>
<div class="container">
<svg class="link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 450">
   <rect x="5" y="5" width="690" height="440" fill="none"/>
  <g class="iconTextLayer">
    <path d="M217 334.3s-.3 8.2 7.7 8.2c9.9 0 92.2-.1 92.2-.1l.1-75.5s-1.3-12.4 10.8-12.4H366c14.3 0 13.4 12.4 13.4 12.4l-.2 75.3h90.2c10.1 0 9.7-10.2 9.7-10.2V192.7L352 79.6 217 192.7v141.6z"/>
    <path d="M167.3 182.2s11.5 21.1 36.5 0L353.1 55.8l140 125.6c28.9 20.9 39.8 0 39.8 0L353.1 18.5 167.3 182.2zM489.7 55.5h-36l.1 43.7 35.9 30.4z"/>
    <g>
      <path d="M297.6 377.3v54.9h-10.3v-24h-25.8v24h-10.3v-54.9h10.3v23.6h25.8v-23.6h10.3zM324.4 392.6c2.9 0 5.5.5 7.9 1.4 2.4.9 4.4 2.3 6.1 4 1.7 1.7 3 3.8 3.9 6.3s1.4 5.3 1.4 8.3c0 3.1-.5 5.9-1.4 8.4-.9 2.5-2.2 4.6-3.9 6.3-1.7 1.7-3.7 3.1-6.1 4-2.4.9-5 1.4-7.9 1.4-2.9 0-5.6-.5-7.9-1.4s-4.4-2.3-6.1-4c-1.7-1.7-3-3.9-3.9-6.3-.9-2.5-1.4-5.3-1.4-8.4 0-3.1.5-5.8 1.4-8.3.9-2.5 2.2-4.6 3.9-6.3 1.7-1.7 3.7-3.1 6.1-4 2.3-.9 5-1.4 7.9-1.4zm0 33c3.2 0 5.6-1.1 7.2-3.3s2.3-5.4 2.3-9.6c0-4.2-.8-7.4-2.3-9.6-1.6-2.2-4-3.3-7.2-3.3-3.3 0-5.7 1.1-7.3 3.3-1.6 2.2-2.4 5.4-2.4 9.6s.8 7.4 2.4 9.6c1.6 2.2 4 3.3 7.3 3.3zM350.8 432.2v-39h5.7c1.2 0 2 .6 2.4 1.7l.6 2.9c.7-.8 1.4-1.5 2.1-2.1.7-.6 1.5-1.2 2.4-1.6.8-.5 1.8-.8 2.7-1.1 1-.3 2-.4 3.2-.4 2.5 0 4.5.7 6.1 2 1.6 1.3 2.8 3.1 3.6 5.3.6-1.3 1.4-2.4 2.3-3.3.9-.9 1.9-1.7 3-2.3s2.2-1 3.5-1.3c1.2-.3 2.5-.4 3.7-.4 2.2 0 4.1.3 5.7 1 1.7.7 3.1 1.6 4.2 2.9 1.1 1.3 2 2.8 2.6 4.6.6 1.8.9 3.9.9 6.3v24.8h-9.4v-24.8c0-2.5-.5-4.4-1.6-5.6-1.1-1.3-2.7-1.9-4.8-1.9-1 0-1.9.2-2.7.5-.8.3-1.5.8-2.2 1.4-.6.6-1.1 1.4-1.5 2.3-.4.9-.5 2-.5 3.2v24.8h-9.4v-24.8c0-2.6-.5-4.5-1.6-5.7-1.1-1.2-2.6-1.8-4.6-1.8-1.4 0-2.6.3-3.8 1-1.2.7-2.3 1.6-3.3 2.8v28.5h-9.3zM421.7 413.9c.2 2 .5 3.7 1.1 5.2.6 1.5 1.3 2.7 2.2 3.6.9.9 2 1.7 3.2 2.1s2.6.7 4.2.7c1.5 0 2.8-.2 3.9-.5 1.1-.4 2.1-.7 2.9-1.2.8-.4 1.5-.8 2.2-1.2.6-.4 1.2-.5 1.8-.5.8 0 1.4.3 1.7.9l2.7 3.4c-1 1.2-2.2 2.2-3.5 3.1s-2.6 1.5-4 2-2.8.8-4.3 1-2.9.3-4.2.3c-2.7 0-5.2-.5-7.6-1.3-2.3-.9-4.4-2.2-6.1-4s-3.1-3.9-4.1-6.5c-1-2.6-1.5-5.6-1.5-9 0-2.7.4-5.2 1.3-7.5s2.1-4.4 3.7-6.1c1.6-1.7 3.6-3.1 5.9-4.1 2.3-1 4.9-1.5 7.8-1.5 2.5 0 4.7.4 6.8 1.2s3.9 1.9 5.4 3.4c1.5 1.5 2.7 3.4 3.5 5.5s1.3 4.7 1.3 7.5c0 1.4-.2 2.4-.5 2.9s-.9.7-1.7.7h-24.1zm17.9-5.7c0-1.2-.2-2.4-.5-3.4-.3-1.1-.9-2-1.5-2.8-.7-.8-1.6-1.5-2.6-1.9-1.1-.5-2.3-.7-3.7-.7-2.7 0-4.8.8-6.4 2.3-1.6 1.5-2.6 3.7-3 6.6h17.7z"/>
    </g>
  </g>
 
  <g>
    <line class="st0" x1="700" y1="0" x2="700" y2="450" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5"/>
	<line class="st0" x1="0" y1="0" x2="700" y2="0" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5" />
	<line class="st0" x1="0" y1="450" x2="0" y2="0" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5"/>
	<line class="st0" x1="700" y1="450" x2="0" y2="450" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="5" />
  </g>
</svg>
</div>
</div>
              
            
!

CSS

              
                body {
	background: none;
}

.container {
  width:700px;
  height:450px; 
  display: inline-block;
}

              
            
!

JS

              
                $(".link").each(createNavLinkHoverAnim);

function createNavLinkHoverAnim(i, element) {
	var lines = ($(this).find("line"));
    var background = ($(this).find("rect"));
	var iconTextPaths = ($(this).find($(".iconTextLayer").find("path")));
  
	var tl = new TimelineMax( { paused:true } );
	
	tl.fromTo(lines, .25, {drawSVG:"0% 100%"},{drawSVG:"0% 0%", ease:Linear.easeNone}, 0)
	tl.fromTo(lines, .25, {drawSVG:"100% 100%"},{drawSVG:"0% 100%", immediateRender:false, ease:Linear.easeNone}, 0.25)
  tl.to(background, 0.5, {fill:"#000", ease:Linear.easeNone}, 0.5)
	tl.to(iconTextPaths, 0.5, {fill:"#fff", ease:Linear.easeNone}, 0.5);
		
	$(element).hover(linkOnMouseenter, linkOnMouseout);
	  
	function linkOnMouseenter() {
		tl.play();
	}
	
	function linkOnMouseout() {
		tl.reverse();
	}
}
              
            
!
999px

Console