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="squid-cta">
  <div class="squid-cta-squidly">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 174.35 228.95" width="174.35" height="228.95">
      <defs>
        <linearGradient id="linear-gradient" x1="20.24" y1="161.14" x2="20.24" y2="142.08" gradientTransform="rotate(-5.41 103.95 100.8)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#f37b4e"/>
          <stop offset="1" stop-color="#f04e40"/>
        </linearGradient>
        <linearGradient id="linear-gradient-2" x1="137.24" y1="137.92" x2="137.24" y2="152.32" xlink:href="#linear-gradient"/>
        <linearGradient id="linear-gradient-3" x1="541.78" y1="-826.14" x2="545.63" y2="-826.14" gradientTransform="translate(-395.25 981.75)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#f37b4e"/>
          <stop offset="1" stop-color="#f37b4e"/>
        </linearGradient>
        <linearGradient id="linear-gradient-4" x1="40.73" y1="155.18" x2="119.63" y2="155.18" xlink:href="#linear-gradient"/>
        <linearGradient id="linear-gradient-5" x1="44.49" y1="175.57" x2="115.96" y2="175.57" gradientTransform="rotate(-5.41 103.95 100.8)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-6" x1="79.26" y1="163.75" x2="79.26" y2="55.89" xlink:href="#linear-gradient"/>
        <linearGradient id="linear-gradient-7" x1="212.44" y1="-394.51" x2="222.04" y2="-394.51" gradientTransform="translate(-132.65 433.38)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-8" x1="224.62" y1="-404.09" x2="230.3" y2="-404.09" gradientTransform="translate(-135.62 430.92)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-9" x1="371.24" y1="-677.21" x2="379.97" y2="-677.21" gradientTransform="translate(-277.95 716.08)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-10" x1="101.75" y1="105.36" x2="139.75" y2="105.36" gradientTransform="rotate(-5.41 103.95 100.8)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-11" x1="16.23" y1="105.36" x2="54.23" y2="105.36" gradientTransform="rotate(-5.41 103.95 100.8)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-12" x1="110.86" y1="-308.12" x2="114.71" y2="-308.12" gradientTransform="translate(-101.34 461.12)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-13" x1="115.53" y1="-312.16" x2="117.8" y2="-312.16" gradientTransform="translate(-102.32 460.33)" xlink:href="#linear-gradient-3"/>
        <linearGradient id="linear-gradient-14" x1="250.36" y1="-611.41" x2="253.86" y2="-611.41" gradientTransform="translate(-235.43 764.4)" xlink:href="#linear-gradient-3"/>
      </defs>
      <g id="squid">
        <path d="M81.25 2.35c22.08 10.77 35.77 21 55.11 36.19 3.69 2.89 7.37 5.92 9.95 9.82a17.74 17.74 0 0 1 3.08 11.51 6 6 0 0 1-2.71 4.54 8.22 8.22 0 0 1-2.76.81c-3 .47-6.12.6-9.14 1.2s-6.74 1.75-8.58 4.43c-1.65 2.39-.41 6 .53 9" fill="#333"/>
        <path d="M95.81 22.54a129.18 129.18 0 0 1 20.31 12.19c6.47 4.7 13.27 9 19.45 14a8.41 8.41 0 0 1 2.75 7.36 3.4 3.4 0 0 1-1.55 2.54 4.57 4.57 0 0 1-1.58.46c-1.74.27-7.13-1.07-8.86-.73s-3.85 1-4.9 2.49c-1 1.34-.24 3.38.29 5z" fill="#f04e40"/>
        <path d="M58.75 4.48c-19.66 14.73-31.19 27.38-47.34 45.9-3.07 3.53-6.13 7.19-7.93 11.51a17.73 17.73 0 0 0-.86 11.88 6 6 0 0 0 3.52 4A8.06 8.06 0 0 0 9 78c3.07-.11 6.13-.56 9.2-.54s7 .46 9.26 2.74c2.07 2 1.53 5.85 1.17 9" fill="#333"/>
        <path d="M48.36 27A129.28 129.28 0 0 0 30.7 42.83c-5.47 5.82-11.35 11.27-16.46 17.43A8.37 8.37 0 0 0 12.92 68a3.33 3.33 0 0 0 2 2.21 4.46 4.46 0 0 0 1.63.16c1.76-.06 6.81-2.39 8.56-2.39s4 .25 5.29 1.53.87 3.28.66 5z" fill="#f04e40"/>
        <path d="M28 172a45.67 45.67 0 0 1-5.3.18C20 172.14 11.88 172 7 165a19.28 19.28 0 0 1-2.74-15.05c1.34-5.46 5.38-9.43 10-9.87h.54a5.41 5.41 0 0 1 4.2 1.47 6.84 6.84 0 0 1 1.47 2.36c1.37 3.2 4.05 5.46 6.86 5.87a3.47 3.47 0 0 0 .79 0 10.84 10.84 0 0 0 3-1 16.79 16.79 0 0 1 5.14-1.53c5.88-.43 8 5.19 9.4 8.9l.34.85a8.31 8.31 0 0 1 .45 5.77 6.73 6.73 0 0 1-2.32 3.11A29.89 29.89 0 0 1 28 172z" fill="url(#linear-gradient)"/>
        <path d="M14.65 143.82h.31a1.74 1.74 0 0 1 1.38.42 4.09 4.09 0 0 1 .72 1.3 13 13 0 0 0 9.73 8 6.81 6.81 0 0 0 1.68 0c2.93-.27 5.29-2.24 8.14-2.51h.16c3.07-.22 4.25 3.61 5.68 7.34a5 5 0 0 1 .41 3.21 3 3 0 0 1-1.11 1.42 26 26 0 0 1-14.09 5.31 44.13 44.13 0 0 1-4.88.17c-4.52-.1-9.52-1.06-12.69-5.6a15.5 15.5 0 0 1-2.17-12c.95-3.85 3.67-6.73 6.73-7m-.71-7.5C7.69 136.91 2.33 142 .6 149a23.23 23.23 0 0 0 3.31 18.11c4 5.67 10.27 8.63 18.72 8.81a51 51 0 0 0 5.74-.2 33.56 33.56 0 0 0 18.07-6.91A10.39 10.39 0 0 0 50 164a12 12 0 0 0-.5-8.33l-.31-.83c-1.46-3.88-4.51-11.95-13-11.34h-.32a20.74 20.74 0 0 0-6.26 1.81 11 11 0 0 1-1.88.7 5.62 5.62 0 0 1-3.73-3.46 10.72 10.72 0 0 0-2.34-3.67 9.07 9.07 0 0 0-7-2.61h-.75z" fill="#333"/>
        <path d="M152.09 163.61a5.43 5.43 0 0 1-4.17-1.53 7 7 0 0 1-1.47-2.34c-1.66-3.87-4.62-5.55-6.86-5.88a3 3 0 0 0-.79 0 10.84 10.84 0 0 0-3 1 16.79 16.79 0 0 1-5.14 1.53c-5.88.42-8-5.18-9.39-8.89l-.32-.85a8.38 8.38 0 0 1-.46-5.77 6.74 6.74 0 0 1 2.33-3.11 29.92 29.92 0 0 1 16.09-6.11 45.67 45.67 0 0 1 5.3-.18c2.68.05 10.83.22 15.71 7.2a19.29 19.29 0 0 1 2.74 15c-1.35 5.46-5.38 9.43-10 9.87z" fill="url(#linear-gradient-2)"/>
        <ellipse cx="148.45" cy="155.61" rx="1.92" ry="2.9" transform="rotate(-35.41 148.45 155.6)" fill="url(#linear-gradient-3)"/>
        <path d="M139.26 135.38a44.21 44.21 0 0 1 4.88-.17c4.52.1 9.52 1.06 12.69 5.6a15.48 15.48 0 0 1 2.17 12c-.94 3.86-3.67 6.74-6.73 7h-.31a1.74 1.74 0 0 1-1.38-.43 3.93 3.93 0 0 1-.72-1.29 13 13 0 0 0-9.73-8 6.35 6.35 0 0 0-1.68 0c-2.93.27-5.29 2.24-8.14 2.51h-.16c-3.07.22-4.25-3.61-5.68-7.35a4.94 4.94 0 0 1-.41-3.2 3 3 0 0 1 1.11-1.38 26 26 0 0 1 14.09-5.31m-.71-7.5a33.48 33.48 0 0 0-18.07 6.91 10.39 10.39 0 0 0-3.55 4.84 12 12 0 0 0 .5 8.34l.31.81c1.46 3.89 4.51 12 13 11.35h.32a20.43 20.43 0 0 0 6.26-1.82 13 13 0 0 1 1.88-.7 5.64 5.64 0 0 1 3.77 3.5 10.81 10.81 0 0 0 2.34 3.67 9.1 9.1 0 0 0 7 2.61c.25 0 .5 0 .75-.05 6.25-.59 11.61-5.71 13.34-12.73a23.21 23.21 0 0 0-3.31-18.1c-4-5.67-10.26-8.63-18.72-8.81a51.06 51.06 0 0 0-5.74.2z" fill="#333"/>
        <path d="M49.86 173.79h.21c1.18-.29 2.77-1.89 4.2-2.44a4.06 4.06 0 0 1 .89-.21l.09-4.79a2.79 2.79 0 0 0-1.64.65c-1 2.29-4.21 3.34-5.48 3.7v.12h.48-.48a8.54 8.54 0 0 0 .14 1.22c.27 1.05.73 1.83 1.59 1.75z" fill="none"/>
        <path d="M49.85 160.14a26.72 26.72 0 0 0-3.67-1.27c-.56 2.61 1.11 3.21 2.91 3.77.21-.79.4-1.56.68-2.39a.76.76 0 0 1 .08-.11z" fill="url(#linear-gradient-4)"/>
        <path d="M59 176.15c.4 3 .06 6.16.46 8.68a7.82 7.82 0 0 0 3.87 5.93c1.46.82 3.34 1.36 4.44 2.93 1.47 2.27 1 4.82 2.94 6.81a3.07 3.07 0 0 0 2.43 1.26c.8-.08 1.41-.73 1.5-1.92.14-2.21-1.08-5-2.35-7.26a78.48 78.48 0 0 0-4.17-6.7c-1-1.53-2.16-3.07-2.13-5s1.26-3.88 1.91-6c.92-3 .46-6.57-1.41-8.3a19.52 19.52 0 0 1-2.37-1.9 3.27 3.27 0 0 1 .07-3.69 5.44 5.44 0 0 1 1.51-1.48 6.68 6.68 0 0 1 3.18-1.25c3.33-.31 6.13 2.5 6.17 6.42s-1.87 7.84-1.75 11.5c.32 6.69 6.68 12.27 6.68 19.51.06 3.78-1.44 6.43-1.25 9.66.4 5 5.17 13.18 8.5 13.87a2.06 2.06 0 0 0 .43 0 2 2 0 0 0 1.65-1.49 9.94 9.94 0 0 0 .29-3.95c-.44-5.56-3.61-10.61-4-15.95-.33-4.89 2.39-9.6 1.32-14.55-.78-3.47-3.43-5.55-5-8.44-2.22-4.16-1.57-9.79.09-14.94a9.59 9.59 0 0 1 1.61-3.34 4.77 4.77 0 0 1 3.2-1.66 5.18 5.18 0 0 1 2.25.29c4 1.43 6 7 4.7 11.45-.67 2.44-2.08 4.6-2.31 7.16-.47 6.54 5.81 10.74 6.08 17.3.23 3.7-1.17 7.27-2.08 10.74s-1.34 7.84 0 10.73c.63 1.4 1.46 2 2.34 1.88 1.27-.12 2.63-1.6 3.55-3.84a36.75 36.75 0 0 0 2.31-12.39 38.53 38.53 0 0 0-1.23-12.59c-1.29-4.41-4.21-9.14-3-14 .84-3.27 3.6-5.38 3.92-8.65s-2.16-6.33-4.45-8.81-4.69-6.07-3.21-9.17a7.59 7.59 0 0 1 1.47-.27c4.66-.44 9.49 2.94 11.89 7.53a17.45 17.45 0 0 1 .83 14.9c-2 4.54-5.87 9.45-4.91 14.94.51 3 2.34 5 4.24 4.81 1.9-.18 3.88-2.1 4.86-4.4a18.81 18.81 0 0 0 1-4.88 36.14 36.14 0 0 1 2.71-10.22c1.36-3.09 3.36-5.35 3.51-9.19.42-6.79-6.6-17.9-14.74-21.2a27.08 27.08 0 0 0-13.74-1.77c-3.66.35-7.32 1.12-10.92 1.81-11.74 2.47-23.21 10.23-32.08 23.13a6.46 6.46 0 0 1 4 4.42 3.77 3.77 0 0 1-.21 2.41 2.79 2.79 0 0 1 1.64-.65l-.09 4.79c2.27-.26 3.49 2.35 3.85 4.99z" fill="url(#linear-gradient-5)"/>
        <path d="M48.15 170.79v-.12c-.63.18-.76.19 0 .12zM48.15 170.79h.48zM53.61 167a3.77 3.77 0 0 0 .21-2.41 6.46 6.46 0 0 0-4-4.42.76.76 0 0 0-.08.11c-.28.83-.47 1.6-.68 2.39a24.19 24.19 0 0 0-1 8c1.34-.36 4.55-1.41 5.55-3.67z" fill="#333"/>
        <path d="M74.19 181.68a71.29 71.29 0 0 1-23.47-3.49l1.28-3.78c8.74 3.06 19.81 4 32.88 2.74l1.19-.11c13.92-1.31 24.9-2.35 35.3-9.82l2.34 3.25c-11.28 8.1-23.32 9.24-37.26 10.55l-1.19.12c-3.83.36-7.54.54-11.07.54z" fill="#f04e40"/>
        <path d="M108.48 127.69c-4.88-2.11-10.14-2.82-16.55-2.21-3.44.33-6.79 1-10 1.61l-1.43.28c-13.89 2.91-26.74 12.18-36.28 26.12l-.75 1.08-.47 1.35c-.58 1.72 1 2.31 3.17 3a26.72 26.72 0 0 1 3.67 1.27c8.87-12.9 20.34-20.66 32.08-23.13 3.6-.69 7.26-1.46 10.92-1.81a27.08 27.08 0 0 1 13.75 1.75c8.14 3.3 15.16 14.41 14.74 21.2-.15 3.84-2.15 6.1-3.51 9.19a36.14 36.14 0 0 0-2.71 10.22 18.81 18.81 0 0 1-1 4.88c-1 2.3-3 4.22-4.86 4.4-1.9.15-3.73-1.84-4.24-4.81-1-5.49 2.86-10.4 4.91-14.94a17.45 17.45 0 0 0-.83-14.9c-2.4-4.59-7.23-8-11.89-7.53a7.59 7.59 0 0 0-1.47.27c-1.48 3.1 1 6.68 3.21 9.17s4.78 5.48 4.45 8.81-3.08 5.38-3.92 8.65c-1.23 4.88 1.69 9.61 3 14a38.53 38.53 0 0 1 1.23 12.59 36.75 36.75 0 0 1-2.31 12.39c-.92 2.24-2.28 3.72-3.55 3.84-.88.08-1.71-.48-2.34-1.88-1.3-2.89-.91-7.27 0-10.73s2.31-7 2.08-10.74c-.27-6.56-6.55-10.76-6.08-17.3.23-2.56 1.64-4.72 2.31-7.16 1.26-4.44-.72-10-4.7-11.45a5.18 5.18 0 0 0-2.25-.29 4.77 4.77 0 0 0-3.2 1.66 9.59 9.59 0 0 0-1.66 3.33c-1.66 5.15-2.31 10.78-.09 14.94 1.55 2.89 4.2 5 5 8.44 1.07 4.95-1.65 9.66-1.32 14.55.37 5.34 3.54 10.39 4 15.95a9.94 9.94 0 0 1-.29 3.95 2 2 0 0 1-1.65 1.49 2.06 2.06 0 0 1-.43 0c-3.33-.69-8.1-8.85-8.5-13.87-.19-3.23 1.31-5.88 1.25-9.66 0-7.24-6.36-12.82-6.68-19.51-.12-3.66 1.83-7.58 1.75-11.5s-2.84-6.73-6.17-6.42a6.68 6.68 0 0 0-3.18 1.25 5.44 5.44 0 0 0-1.52 1.52 3.27 3.27 0 0 0-.07 3.69 19.52 19.52 0 0 0 2.37 1.9c1.87 1.73 2.33 5.29 1.41 8.3-.65 2.14-1.88 4.08-1.91 6s1.08 3.48 2.13 5a78.48 78.48 0 0 1 4.17 6.7c1.27 2.27 2.49 5 2.35 7.26-.09 1.19-.7 1.84-1.5 1.92a3.07 3.07 0 0 1-2.43-1.26c-1.94-2-1.47-4.54-2.94-6.81-1.1-1.57-3-2.11-4.44-2.93a7.82 7.82 0 0 1-3.87-5.93c-.4-2.52-.06-5.67-.46-8.68-.34-2.64-1.56-5.25-3.82-5a4.06 4.06 0 0 0-.89.21c-1.43.55-3 2.15-4.2 2.44h-.21c-.85.08-1.32-.7-1.57-1.78a8.54 8.54 0 0 1-.14-1.22c-1.27.13-4.66.45-4.39.39.05 0 3.71 4.42 3.87 5.45 3.13 16.6 8.53 20.44 13.08 23.05.5.28 1 .53 1.54.78a17.64 17.64 0 0 0 4 7.46 10.32 10.32 0 0 0 6.28 3.54c2.4 7.92 8.13 16.16 14 17.36h.46a7.42 7.42 0 0 0 1.63 0c2.82-.27 5.29-2.2 6.81-5.24a7.28 7.28 0 0 0 3.33.46c3.71-.35 7-3.45 9.13-8.52a47.76 47.76 0 0 0 3.11-16.33c0-.84.06-1.76.06-2.76 3.85-.77 7.52-4.15 9.52-8.87a27.64 27.64 0 0 0 1.74-7.42l.06-.45c.36-2.88 1.85-5.08 2.91-7.49 1.21-2.72 1.32-6 2.25-8.85a12 12 0 0 0 .9-2.4c.65-11.97-8.69-28.64-19.96-33.28z" fill="#333"/>
        <path d="M128.63 127.09a649.09 649.09 0 0 0-8.41-33.26q-2.06-7.23-4.09-13.66C101.44 33.76 87.45 17.28 78.8 11.52A12.69 12.69 0 0 0 62.74 13C55.33 20.32 44.68 39.13 39 87.48q-.8 6.7-1.45 14.18a623.74 623.74 0 0 0-2 34.26c-1 28.2 21.81 39.88 49.92 37.38l.6-.06.59-.06c28.04-2.82 48.21-18.56 41.97-46.09z" fill="url(#linear-gradient-6)"/>
        <ellipse cx="84.58" cy="38.87" rx="4.8" ry="7.25" transform="rotate(-17.75 84.6 38.86)" fill="url(#linear-gradient-7)"/>
        <ellipse cx="91.84" cy="26.84" rx="2.84" ry="4.05" transform="rotate(-17.75 91.85 26.84)" fill="url(#linear-gradient-8)"/>
        <ellipse cx="97.65" cy="38.87" rx="4.37" ry="6.22" transform="rotate(-26.59 97.67 38.87)" fill="url(#linear-gradient-9)"/>
        <path d="M139 127.36q-3.28-14.82-6.65-27.48-2.25-8.46-4.52-16C112 31.16 95.68 10.66 83.22 3.47 77.11 0 72.32-.22 69.62.12 66.91.29 62.23 1.36 56.9 6 46 15.37 33.83 38.57 28.18 93.31q-.81 7.84-1.43 16.57-.93 13.11-1.38 28.34a37.6 37.6 0 0 0 16.73 32.13c11.75 8 28.76 8.69 42.88 7.35 15.88-1.5 28.57-2.46 40.66-12.81 9.35-8 14.61-18.72 14-31.15a52.5 52.5 0 0 0-.64-6.38zM86.09 167.6l-.6.06-.6.05c-28.14 2.51-50.4-3.41-49.43-31.65.43-12.65 1.12-24 2-34.29q.66-7.5 1.45-14.2c5.72-48.4 16.38-67.24 23.81-74.52a12.69 12.69 0 0 1 16.07-1.53c8.66 5.76 22.67 22.27 37.37 68.73 1.36 4.3 2.73 8.85 4.09 13.68 2.81 9.9 5.63 21 8.43 33.29 6.32 27.56-14.48 37.56-42.59 40.38z" fill="#333"/>
        <path d="M95.38 133.94a128.17 128.17 0 0 1-18.49 4.51c-4.62.67-10.2 1.21-10.2 1.21 1.47 6.14 8.14 10.24 15.5 9.55.59-.06 1.18-.15 1.76-.26a15.39 15.39 0 0 0 9.29-5.58 11.1 11.1 0 0 0 2.14-9.43zM86.51 151.6a10 10 0 0 1-1 .39 9.9 9.9 0 0 1-7-.34 7.06 7.06 0 0 0 7.49 1.79c.27-.09.54-.19.8-.3a7.42 7.42 0 0 0 3.8-3.57 5.74 5.74 0 0 0 .5-1.94 9.65 9.65 0 0 1-4.59 3.97z" fill="#333"/>
        <path d="M81.09 143a5.18 5.18 0 0 0-.83.63c-.66.62-1.9 2-1.53 2.83a16.41 16.41 0 0 0 4.34-.26 15.34 15.34 0 0 0 5.79-2.46 12.58 12.58 0 0 0-2.64-1.36 7.25 7.25 0 0 0-3.18-.13 5.9 5.9 0 0 0-1.95.75z" fill="#fff"/>
        <circle cx="116.7" cy="120.15" r="18.7" fill="#fff"/>
        <path d="M118.82 142.46A22.42 22.42 0 1 1 139 118a22.44 22.44 0 0 1-20.18 24.46zm-3.61-38a15.79 15.79 0 1 0 17.2 14.23 15.81 15.81 0 0 0-17.2-14.26z" fill="#333"/>
        <path d="M132.94 111.69a8.21 8.21 0 0 1-3.52-.49 25.29 25.29 0 0 1-2.57-1.12 17.84 17.84 0 0 0-2.16-1 4.52 4.52 0 0 0-1.88-.18 14.25 14.25 0 0 0-2.45.54l-.88.29a15 15 0 0 1-3.26.8 6.75 6.75 0 0 1-2.71-.27 9.26 9.26 0 0 1-3.68-2.5l-.41-.39a8.6 8.6 0 0 0-2.56-1.53 2.73 2.73 0 0 0-1.4-.29 3.12 3.12 0 0 1-2.84-1.11 3 3 0 0 1-.55-2.83c.69-2.26 3.08-4.18 4.53-4.92a9.6 9.6 0 0 1 3.47-1 9.7 9.7 0 0 1 4.19.53 16.73 16.73 0 0 1 1.93.87 7.09 7.09 0 0 0 1.79.75 3 3 0 0 0 .92 0 14.52 14.52 0 0 0 2.41-.57 17.66 17.66 0 0 1 3.43-.77h.31c3.37-.22 6.39 1.42 8.37 2.66l.29.18a6.86 6.86 0 0 0 2.06 1 .8.8 0 0 0 .27 0l.22-.06.5-.07a3.12 3.12 0 0 1 2.8 1.26 3 3 0 0 1 .34 3l-.13.29c-.9 2.1-2.13 5-4.75 6.24a6 6 0 0 1-2.08.69z" fill="url(#linear-gradient-10)"/>
        <path d="M110.3 98.23a7.12 7.12 0 0 1 3.1.39c1.39.5 2.62 1.44 4.08 1.73a5.38 5.38 0 0 0 1.65.06c1.94-.18 3.85-1.14 5.83-1.33h.24c2.45-.15 4.8 1 6.87 2.29a9.86 9.86 0 0 0 3.21 1.56 3.64 3.64 0 0 0 1 0 3 3 0 0 0 .6-.11h.12a.57.57 0 0 1 .59.78c-.77 1.79-1.79 4.37-3.66 5.27a3.67 3.67 0 0 1-1.22.32 5.76 5.76 0 0 1-2.45-.36c-1.64-.57-3.11-1.54-4.77-2.09a7 7 0 0 0-2.9-.29 15.75 15.75 0 0 0-2.94.64 20.48 20.48 0 0 1-3.65 1 4.42 4.42 0 0 1-1.73-.16 8.68 8.68 0 0 1-3.12-2.33 11 11 0 0 0-3.25-2 5.26 5.26 0 0 0-2.67-.5h-.13a.58.58 0 0 1-.62-.73 7.38 7.38 0 0 1 3.26-3.37 7.27 7.27 0 0 1 2.56-.74m-.48-5a12.05 12.05 0 0 0-4.38 1.28c-1.68.86-4.8 3.19-5.79 6.41a5.6 5.6 0 0 0 5.9 7.2h.11a.9.9 0 0 0 .17.07 6.45 6.45 0 0 1 1.86 1.06l.38.37a11.76 11.76 0 0 0 4.68 3.1 9.52 9.52 0 0 0 3.71.37 17.27 17.27 0 0 0 3.82-.92l.8-.26a10.84 10.84 0 0 1 2-.45 2.11 2.11 0 0 1 .84.06 17 17 0 0 1 1.86.82 24.09 24.09 0 0 0 2.84 1.24 10.74 10.74 0 0 0 4.59.62 8.38 8.38 0 0 0 2.9-.79c3.48-1.66 5-5.19 6-7.52l.12-.29a5.59 5.59 0 0 0-5.68-7.77H136c-.26-.14-.67-.4-1-.59l-.3-.19c-2.27-1.43-5.77-3.3-9.86-3h-.39a19.9 19.9 0 0 0-3.91.86 13 13 0 0 1-1.92.48 1.05 1.05 0 0 1-.21 0 8.18 8.18 0 0 1-1.13-.52 19.79 19.79 0 0 0-2.21-1 12.29 12.29 0 0 0-5.29-.66z" fill="#333"/>
        <circle cx="43.37" cy="127.09" r="18.7" fill="#fff"/>
        <path d="M21.06 129.2a22.41 22.41 0 1 1 24.43 20.21 22.44 22.44 0 0 1-24.43-20.21zm6.6-.62a15.79 15.79 0 1 0 14.23-17.2 15.8 15.8 0 0 0-14.23 17.2z" fill="#333"/>
        <path d="M25.83 121.84a6 6 0 0 1-2.12-.17c-2.82-.74-4.57-3.34-5.85-5.24l-.18-.26a3.05 3.05 0 0 1-.24-3 3.12 3.12 0 0 1 2.56-1.79h.76a.89.89 0 0 0 .24 0 7.27 7.27 0 0 0 1.83-1.41l.25-.24c1.86-1.73 4.41-3.77 7.72-4.18h.31a17.5 17.5 0 0 1 3.51.11 13.41 13.41 0 0 0 2.47.11 3 3 0 0 0 .91-.21 7.56 7.56 0 0 0 1.61-1.07 15.76 15.76 0 0 1 1.72-1.22 9.62 9.62 0 0 1 4-1.3 9.43 9.43 0 0 1 3.6.33c1.56.46 4.27 1.9 5.38 4a3.08 3.08 0 0 1-2.45 4.5 2.82 2.82 0 0 0-1.46.55 8.7 8.7 0 0 0-2.22 2l-.32.46a9.35 9.35 0 0 1-3.15 3.15 6.83 6.83 0 0 1-2.62.77 14.46 14.46 0 0 1-3.35-.17l-.92-.12a13.74 13.74 0 0 0-2.51-.06 4.38 4.38 0 0 0-1.81.51 20.7 20.7 0 0 0-1.95 1.34 22.54 22.54 0 0 1-2.31 1.59 8.25 8.25 0 0 1-3.41 1.02z" fill="url(#linear-gradient-11)"/>
        <path d="M45.55 104.36a7.15 7.15 0 0 1 2.65.25 7.37 7.37 0 0 1 3.87 2.75.57.57 0 0 1-.47.82h-.15a5.11 5.11 0 0 0-2.52 1 11 11 0 0 0-2.83 2.56 8.59 8.59 0 0 1-2.62 2.87 4.16 4.16 0 0 1-1.67.48 19.65 19.65 0 0 1-3.77-.28 14.45 14.45 0 0 0-3-.07 7.06 7.06 0 0 0-2.8.82c-1.52.86-2.79 2.08-4.29 3a6 6 0 0 1-2.34.81 3.59 3.59 0 0 1-1.26-.1c-2-.52-3.49-2.86-4.58-4.48a.57.57 0 0 1 .44-.88h.12a3.11 3.11 0 0 0 .61 0 3.54 3.54 0 0 0 1-.23 9.79 9.79 0 0 0 2.86-2.14c1.79-1.67 3.88-3.22 6.32-3.53h.24c2-.19 4 .4 6 .22a6.16 6.16 0 0 0 1.62-.38c1.37-.56 2.4-1.71 3.68-2.47a7.27 7.27 0 0 1 3-1m-.47-5A12.17 12.17 0 0 0 40 101a17.49 17.49 0 0 0-2 1.4 8.09 8.09 0 0 1-1 .72 1 1 0 0 1-.2 0 12.5 12.5 0 0 1-2-.11 19.87 19.87 0 0 0-4-.11h-.39c-4.06.52-7.15 3-9.11 4.85l-.26.23c-.25.24-.6.57-.85.77h-.5a5.59 5.59 0 0 0-4.12 8.7l.18.26c1.42 2.1 3.56 5.28 7.29 6.26a8.6 8.6 0 0 0 3 .24 10.74 10.74 0 0 0 4.4-1.48 26.12 26.12 0 0 0 2.56-1.62 14.92 14.92 0 0 1 1.69-1.11 2 2 0 0 1 .82-.21 11.32 11.32 0 0 1 2 .06l.83.11a17.22 17.22 0 0 0 3.92.18 9.32 9.32 0 0 0 3.6-1.14 11.72 11.72 0 0 0 4-3.92l.31-.43a6.23 6.23 0 0 1 1.63-1.39.92.92 0 0 1 .2-.12 5.58 5.58 0 0 0 4.51-8.14c-1.58-3-5.07-4.67-6.89-5.21a11.94 11.94 0 0 0-4.54-.42z" fill="#333"/>
        <path d="M122.14 118h-.06c-1.18.52-2.94 2.9-5.31 2.83-2.34.52-4.53-1.53-5.78-1.79a1 1 0 0 0-.29 0h-.12c-1.14.11-1.93 1.65-1.76 3.44s1.23 3.15 2.37 3a.53.53 0 0 1 .12 0c1.16-.12 3-3 5.64-2.92 2.32-.52 4.5 1.48 5.75 1.78h.06a1.37 1.37 0 0 0 .28 0h.11c1.15-.11 1.93-1.64 1.76-3.44s-1.23-3.15-2.37-3h-.11a1.34 1.34 0 0 0-.29.1zM48.81 124.9h-.05c-1.18.53-2.94 2.91-5.32 2.83-2.33.52-4.53-1.53-5.78-1.79a1 1 0 0 0-.29 0h-.12c-1.14.11-1.93 1.65-1.76 3.44s1.23 3.16 2.37 3h.12c1.17-.11 3-3 5.65-2.92 2.31-.51 4.49 1.49 5.75 1.78a.92.92 0 0 0 .28 0h.12c1.14-.11 1.93-1.65 1.76-3.44s-1.24-3.16-2.38-3h-.11a1.08 1.08 0 0 0-.24.1z" fill="#333"/>
        <path fill="#f04e40" d="M68.74 103.68l15.49-4.75c-.32-1-.63-1.9-1-2.84l-14.55 4.46c.03 1 .04 2.05.06 3.13zM68.83 109l16.94-5.19c-.29-1-.6-1.91-.91-2.86l-16.09 4.93.06 3.12zM69.85 127c7.16 1.7 14.43-.09 20.87-2.77a184.3 184.3 0 0 0-4.32-18.49l-17.53 5.37c.2 8.29.56 15.81.98 15.89zM68.85 91.14c0 .32-.08 1-.11 1.91l12-3.67-.22-.58a14.32 14.32 0 0 0-1.11-2.15l-10.3 3.15a11 11 0 0 0-.26 1.34zM68.69 98.38l13.84-4.24-1.07-2.81-12.76 3.9-.01 3.15zM69.91 87.38l8.14-2.49c-2.89-2.89-6.33-1.52-8.14 2.49z"/>
        <ellipse cx="11.44" cy="152.99" rx="1.92" ry="2.9" transform="rotate(-17.75 11.44 153)" fill="url(#linear-gradient-12)"/>
        <ellipse cx="14.35" cy="148.17" rx="1.14" ry="1.62" transform="rotate(-17.75 14.35 148.18)" fill="url(#linear-gradient-13)"/>
        <ellipse cx="16.68" cy="152.99" rx="1.75" ry="2.49" transform="rotate(-26.59 16.68 153.02)" fill="url(#linear-gradient-14)"/>
        <g fill="#333">
          <ellipse cx="27.42" cy="61.17" rx="3.32" ry="1.98" transform="rotate(-86 27.32 61)"/>
          <ellipse cx="23.5" cy="56.32" rx="1.85" ry="1.17" transform="rotate(-86.12 23.5 56.32)"/>
          <ellipse cx="22.14" cy="62.24" rx="2.83" ry="1.82" transform="rotate(-79.33 22.14 62.24)"/>
        </g>
      </g>
      <g id="bubbles">
        <circle cx="154.84" cy="83.36" r="4.56" fill="#e2e2e2"/>
        <circle cx="166.92" cy="63.69" r="7.43" fill="#e2e2e2"/>
        <circle cx="150.27" cy="32.53" r="4.08" fill="#e2e2e2"/>
        <circle cx="160.51" cy="18.29" r="2.66" fill="#e2e2e2"/>
        <circle cx="169.58" cy="41.1" r="2.66" fill="#e2e2e2"/>
      </g>
    </svg>
  </div>
  <div class="squid-cta-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    <p style="text-align: right; margin: 0 0 -0.75rem 0;">
      <a href="/contact" class="button"><strong>Call to Action</strong></a>
    </p>
  </div>
</div>
              
            
!

CSS

              
                // ---
// Screen sizes
// ---

$screen-xs: 448px;
$screen-sm: 560px;
$screen-md: 832px;
$screen-lg: 960px;
$screen-xl: 1170px;

// ---
// Colors
// ---

$blue: rgba(60, 99, 108, 1);
$dark-blue: #0c4753;
$lighter-green: #eff7f3;
$light-green: #b7d54a;
$green: #89c440;
$yellow: #efc94c;
$orange: #f47a4e;
$red: #ef4d3f;
$white: #fefefe;
$grey: #808080;
$black: #333333;

// Color Gradients
$blue-darkblue: linear-gradient(
  90deg,
  rgba(60, 99, 108, 1) 0%,
  rgba(12, 71, 83, 1) 100%
);
$blue-green: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
$yellow-green: linear-gradient(
  90deg,
  rgba(184, 213, 74, 1) 0%,
  rgba(138, 196, 64, 1) 100%
);
$red-red: linear-gradient(
  90deg,
  rgba(244, 123, 78, 1) 0%,
  rgba(239, 77, 63, 1) 100%
);

$MQs: true;

@mixin bp($point) {
  @if ($MQs) {
    // These screen sized map to the screen variables in _varibles.scss
    $bp-xs: "(min-width: #{$screen-xs})";
    $bp-sm: "(min-width: #{$screen-sm})";
    $bp-md: "(min-width: #{$screen-md})";
    $bp-lg: "(min-width: #{$screen-lg})";
    $bp-xl: "(min-width: #{$screen-xl})";

    @if $point == xs {
      @media #{$bp-xs} {
        @content;
      }
    } @else if $point == sm {
      @media #{$bp-sm} {
        @content;
      }
    } @else if $point == md {
      @media #{$bp-md} {
        @content;
      }
    } @else if $point == lg {
      @media #{$bp-lg} {
        @content;
      }
    } @else if $point == xl {
      @media #{$bp-xl} {
        @content;
      }
    }
  }
}

html {
  height: 100%;
}
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  @include bp(xl) {
    font-size: 1.125rem;
  }
}

.button {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 1.75rem;
  background: $yellow-green;
  border: 1px solid $green;
  border-radius: 2rem;
  text-decoration: none;
  color: $white;
  margin-bottom: 1rem;
  &:hover,
  &:focus {
    background: lighten($green, 10%);
    color: $white;
    text-decoration: none;
    outline: 0;
  }
}

@keyframes floating {
  from {
    transform: translate(0, -10);
  }
  to {
    transform: translate(0, 10px);
  }
}
@keyframes bubbles {
  0% {
    transform: scale(0) translate(-5px, 0);
    fill: #e2e2e2;
  }
  5% {
    transform: scale(1) translate(-4px, -1px);
    fill: #e2e2e2;
  }
  25% {
    transform: scale(1) translate(0px, -10px);
    fill: #e2e2e2;
  }
  50% {
    transform: scale(1.1) translate(-7px, -25px);
    fill: #fff;
  }
  75% {
    transform: scale(1) translate(0px, -55px);
    fill: #fff;
  }
  100% {
    transform: scale(1.1) translate(-5px, -70px);
    fill: #fff;
  }
}

.squid-cta {
  max-width: 600px;
  margin: 2rem auto;
  @include bp(md) {
    display: flex;
    align-items: center;
  }
  padding: 1rem 2rem 0 1rem;
  background: $dark-blue;
  color: white;
  border-radius: 1rem;
  &-squidly {
    margin-top: -4rem;
    @include bp(md) {
      margin-right: 1.5rem;
      margin-bottom: -4rem;
    }
    text-align: center;
    flex: 1;
    svg {
      animation: floating 2.5s infinite ease-in-out alternate;
      #bubbles circle {
        transform-box: fill-box;
        transform-origin: bottom left;
        animation: bubbles 2s infinite linear forwards;
        &:nth-child(2) {
          animation-delay: 0.94s;
        }
        &:nth-child(3) {
          animation-delay: 0.35s;
        }
        &:nth-child(4) {
          animation-delay: 1.42s;
        }
        &:nth-child(5) {
          animation-delay: 0.62s;
        }
      }
    }
  }
  &-text {
    flex: 2;
    font-size: 1.1rem;
    .button {
      margin-bottom: -4rem;
    }
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console