Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
<div class="main-container">
	<svg id="bubble" width="500px" height="650px" viewBox="0 0 500 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <rect id="path-1" x="0" y="0" width="109" height="52"></rect>
    </defs>
    <g id="girl-blowing-bubble" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M350.723,238.452177 L350.723,804.551911 C318.505,819.749238 283.924,828 247.938,828 C214.798,828 182.859,820.998522 152.843,808.038922 C151.557,807.476058 150.278,806.913194 149,806.336602 L149,238.452177 C149,162.384546 193.693,100.630133 249.006,100.013728 C249.131,100 249.245,100 249.372,100.013728 C249.535,100 249.698,100 249.861,100 C277.715,100 302.936,115.491114 321.177,140.546797 C337.151,162.477899 347.792,191.717995 350.204,224.294089 L350.213,224.425882 C350.493,228.265712 350.665,232.157711 350.703,236.089521 C350.714,236.883022 350.723,237.660049 350.723,238.452177" id="Fill-15" fill="#DA4F5A" fill-rule="nonzero"></path>
        <path d="M276.716,281 C276.686,282.107 276.591,283.205 276.427,284.276 C275.676,289.32 273.552,293.91 270.438,297.664 C265.423,303.727 257.838,307.582 249.362,307.582 C234.502,307.582 222.415,295.747 222,281 L276.716,281" id="Fill-16" fill="#F2F1EE" fill-rule="nonzero"></path>
        <g id="Rectangle" transform="translate(198.000000, 271.000000)">
            <g id="path-1-Clipped">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <g id="path-1"></g>
                <rect id="path-1" stroke-opacity="0" stroke="#979797" stroke-width="2" fill="#D94F5B" fill-rule="nonzero" mask="url(#mask-2)" x="0" y="0" width="109" height="52"></rect>
            </g>
        </g>
        <path d="M198.322184,244.120469 C197.593184,239.639469 192.852184,241.170469 191.522184,244.753469 C190.195184,248.339469 190.321184,264.083469 205.321184,265.941469 C220.322184,267.800469 221.697184,252.216469 221.127184,242.628469 C220.891184,238.676469 212.587184,237.501469 213.692184,251.391469 C214.798184,265.283469 201.534184,260.275469 200.428184,254.810469 C199.608184,250.739469 199.268184,249.915469 198.322184,244.120469" id="Fill-834" fill="#111110" fill-rule="nonzero"></path>
        <path d="M301.351817,244.383515 C302.093817,240.204515 306.046817,240.772515 307.281817,244.121515 C308.516817,247.472515 308.139817,263.184515 294.122817,264.894515 C280.106817,266.606515 278.542817,253.792515 279.090817,244.838515 C279.317817,241.145515 287.294817,236.689515 286.238817,249.662515 C285.181817,262.638515 297.936817,260.204515 298.976817,255.104515 C299.751817,251.303515 300.346817,250.054515 301.351817,244.383515" id="Fill-835" fill="#111110" fill-rule="nonzero"></path>
        <path d="M303.083,276.763 L274.65,276.763 C269.879,276.763 266,272.884 266,268.113 L266,227.102 C266.278,222.584 270.036,219 274.63,219 L277.44,219 L295.022,258.604 C294.272,258.844 293.472,258.976 292.672,258.976 C289.188,258.976 285.691,256.473 286.265,249.429 C286.799,242.87 285.024,240.766 283.109,240.766 C281.237,240.766 279.229,242.779 279.117,244.605 C278.603,253.011 279.949,264.817 291.71,264.816 C292.477,264.816 293.29,264.766 294.149,264.661 C295.324,264.518 296.404,264.276 297.395,263.951 L303.083,276.763" id="Fill-1009" fill="#E47F88" fill-rule="nonzero"></path>
        <path d="M291.683716,265.05 C279.922716,265.051 278.576716,253.245 279.090716,244.839 C279.202716,243.013 281.210716,241 283.082716,241 C284.997716,241 286.772716,243.104 286.238716,249.663 C285.664716,256.707 289.161716,259.21 292.645716,259.21 C293.445716,259.21 294.245716,259.078 294.995716,258.838 L297.368716,264.185 C296.377716,264.51 295.297716,264.752 294.122716,264.895 C293.263716,265 292.450716,265.05 291.683716,265.05" id="Fill-1010" fill="#50504D" fill-rule="nonzero"></path>
        <path d="M324.634,276.744 L299,219 L324.039,219 C328.806,219 332.689,222.884 332.689,227.65 L332.689,268.677 C332.41,272.995 328.949,276.459 324.634,276.744" id="Fill-1011" fill="#E47F88" fill-rule="nonzero"></path>
        <path d="M224.409,276.763 L215.714,276.763 L211.12,265.574 C220.091,262.811 220.964,250.667 220.489,242.682 C220.399,241.163 219.115,240.054 217.632,240.054 C215.258,240.054 212.374,242.895 213.054,251.445 C213.51,257.176 211.52,259.69 208.948,260.283 L192,219 L224.427,219 C229.012,219 232.78,222.584 233.059,227.102 L233.059,268.113 C233.059,272.884 229.178,276.763 224.409,276.763" id="Fill-1012" fill="#E47F88" fill-rule="nonzero"></path>
        <path d="M211.172,265.52 L209,260.229 C211.572,259.636 213.562,257.122 213.106,251.391 C212.426,242.841 215.31,240 217.684,240 C219.167,240 220.451,241.109 220.541,242.628 C221.016,250.613 220.143,262.757 211.172,265.52" id="Fill-1013" fill="#50504D" fill-rule="nonzero"></path>
        <path d="M206.555,276.763 L204.714,276.763 L199.626,264.369 C200.309,264.704 201.042,265 201.829,265.25 L206.555,276.763 M191.545,244.685 L181,219 L182.841,219 L192.661,242.919 C192.202,243.413 191.813,244.011 191.545,244.685" id="Fill-1014" fill="#E47F88" fill-rule="nonzero"></path>
        <path d="M201.284,265.331 C200.497,265.081 199.764,264.785 199.081,264.45 L191,244.766 C191.268,244.092 191.657,243.494 192.116,243 L201.284,265.331" id="Fill-1015" fill="#50504D" fill-rule="nonzero"></path>
        <path d="M200.434,276.763 L174.633,276.763 C170.044,276.763 166.279,273.173 166,268.653 L166,227.65 C166,222.884 169.884,219 174.651,219 L176.72,219 L190.961,253.687 C191.391,255.498 192.095,257.361 193.173,259.078 L200.434,276.763" id="Fill-1016" fill="#E47F88" fill-rule="nonzero"></path>
        <path d="M193.212,259.391 C192.134,257.674 191.43,255.811 191,254 L193.212,259.391" id="Fill-1017" fill="#50504D" fill-rule="nonzero"></path>
        <polygon id="Fill-1018" fill="#79A4A9" fill-rule="nonzero" points="351 246.536 351.202 246.536 351.202 238 351 238"></polygon>
        <path d="M324.186,288.17 L275.04,288.17 C275.397,286.963 275.674,285.721 275.863,284.45 C276.027,283.379 276.122,282.281 276.152,281.174 L260.991,281.174 C259.137,278.53 258.051,275.302 258.051,271.829 L258.051,238.538 C254.741,237.397 251.735,236.994 249.14,236.994 C245.458,236.994 242.604,237.806 240.884,238.471 L240.884,271.829 C240.884,275.302 239.799,278.53 237.934,281.174 L221.436,281.174 C221.504,283.598 221.888,285.943 222.547,288.17 L174.749,288.17 C168.367,288.17 162.832,284.489 160.149,279.147 C159.034,276.944 158.41,274.454 158.41,271.829 L158.41,247.362 L149,247.362 L149,238.826 L158.41,238.826 L158.41,228.339 C158.41,221.862 162.197,216.258 167.665,213.624 L167.675,213.615 C169.818,212.577 172.211,212 174.749,212 L224.545,212 C233.551,212 240.884,219.324 240.884,228.339 L240.884,230.405 C243.125,229.797 245.942,229.309 249.207,229.309 C251.878,229.309 254.85,229.636 258.051,230.492 L258.051,228.339 C258.051,219.324 265.375,212 274.389,212 L324.186,212 C333.192,212 340.525,219.324 340.525,228.339 L340.525,238.826 L350.464,238.826 L350.464,247.362 L340.525,247.362 L340.525,271.829 C340.525,275.359 339.391,278.646 337.469,281.318 C334.508,285.46 329.655,288.17 324.186,288.17 M265.759,227.782 C265.749,227.966 265.739,228.147 265.739,228.33 L265.739,271.822 C265.739,276.598 269.614,280.472 274.389,280.472 L324.186,280.472 C328.953,280.472 332.836,276.598 332.836,271.822 L332.836,269.357 C332.848,269.171 332.854,268.983 332.854,268.793 L332.854,225.3 C332.854,220.529 328.973,216.65 324.204,216.65 L297.802,216.65 L297.777,216.593 L275.829,216.593 L275.854,216.65 L274.409,216.65 C269.638,216.65 265.759,220.529 265.759,225.3 L265.759,227.782 M166.098,269.333 L166.098,271.822 C166.098,276.598 169.982,280.472 174.749,280.472 L224.545,280.472 C229.312,280.472 233.195,276.598 233.195,271.822 L233.195,228.33 C233.195,228.147 233.186,227.966 233.177,227.782 L233.177,225.3 C233.177,220.529 229.296,216.65 224.527,216.65 L190.874,216.65 L190.85,216.592 L181.078,216.592 L181.101,216.65 L179.26,216.65 L179.237,216.592 L175.55,216.592 L175.574,216.65 L174.731,216.65 C169.961,216.65 166.081,220.529 166.081,225.3 L166.081,268.793 C166.081,268.974 166.087,269.155 166.098,269.333" id="Fill-1019" fill="#A0434B" fill-rule="nonzero"></path>
        <path d="M333.077,268.707 L333.077,227.68 C333.077,222.914 329.194,219.03 324.427,219.03 L299.388,219.03 L298.043,216 L324.445,216 C329.214,216 333.095,219.879 333.095,224.65 L333.095,268.143 C333.095,268.333 333.089,268.521 333.077,268.707 M266,227.132 L266,224.65 C266,219.879 269.879,216 274.65,216 L276.095,216 L277.44,219.03 L274.63,219.03 C270.036,219.03 266.278,222.614 266,227.132" id="Fill-1021" fill="#A76468" fill-rule="nonzero"></path>
        <path d="M166.017,268.683 C166.006,268.505 166,268.324 166,268.143 L166,224.65 C166,219.879 169.88,216 174.65,216 L175.493,216 L176.737,219.03 L174.668,219.03 C169.901,219.03 166.017,222.914 166.017,227.68 L166.017,268.683 M233.096,227.132 C232.817,222.614 229.049,219.03 224.464,219.03 L192.037,219.03 L190.793,216 L224.446,216 C229.215,216 233.096,219.879 233.096,224.65 L233.096,227.132 M182.264,219.03 L180.423,219.03 L179.179,216 L181.02,216 L182.264,219.03" id="Fill-1022" fill="#A76468" fill-rule="nonzero"></path>
        <path d="M325.006,277.152 L303.059,277.152 L303,277.019 L324.362,277.019 C324.556,277.019 324.748,277.013 324.939,277 L325.006,277.152" id="Fill-1023" fill="#F0B5B6" fill-rule="nonzero"></path>
        <path d="M324.005,276.763 L302.643,276.763 L296.955,263.951 C307.779,260.403 307.999,246.958 306.868,243.888 C306.238,242.179 304.901,241.195 303.643,241.195 C302.436,241.195 301.302,242.103 300.938,244.15 C299.933,249.821 299.338,251.07 298.563,254.871 C298.217,256.566 296.578,257.966 294.582,258.604 L277,219 L298.948,219 L324.582,276.744 C324.391,276.757 324.199,276.763 324.005,276.763" id="Fill-1024" fill="#F5CCCB" fill-rule="nonzero"></path>
        <path d="M297.373,263.756 L295,258.409 C296.996,257.771 298.635,256.371 298.981,254.676 C299.756,250.875 300.351,249.626 301.356,243.955 C301.72,241.908 302.854,241 304.061,241 C305.319,241 306.656,241.984 307.286,243.693 C308.417,246.763 308.197,260.208 297.373,263.756" id="Fill-1025" fill="#B6B6B2" fill-rule="nonzero"></path>
        <polyline id="Fill-1026" fill="#D7AFAE" fill-rule="nonzero" points="297.973 216.057 276.025 216.057 276 216 297.948 216 297.973 216.057"></polyline>
        <polyline id="Fill-1027" fill="#DABEBB" fill-rule="nonzero" points="299.293 219.03 277.345 219.03 276 216 297.948 216 299.293 219.03"></polyline>
        <polyline id="Fill-1028" fill="#F0B5B6" fill-rule="nonzero" points="215.781 277.02 206.008 277.02 206 277 215.773 277 215.781 277.02"></polyline>
        <path d="M216.487,276.763 L206.714,276.763 L201.988,265.25 C203.044,265.586 204.198,265.839 205.456,265.995 C206.285,266.098 207.075,266.147 207.823,266.147 C209.337,266.147 210.688,265.945 211.893,265.574 L216.487,276.763 M208.423,260.426 C205.002,260.426 201.138,257.707 200.563,254.864 C199.743,250.793 199.403,249.969 198.457,244.174 C198.14,242.225 197.064,241.413 195.84,241.413 C194.818,241.413 193.693,241.978 192.82,242.919 L183,219 L192.773,219 L209.721,260.283 C209.301,260.38 208.866,260.426 208.423,260.426" id="Fill-1029" fill="#F5CCCB" fill-rule="nonzero"></path>
        <path d="M207.003,266.734 C206.255,266.734 205.465,266.685 204.636,266.582 C203.378,266.426 202.224,266.173 201.168,265.837 L192,243.506 C192.873,242.565 193.998,242 195.02,242 C196.244,242 197.32,242.812 197.637,244.761 C198.583,250.556 198.923,251.38 199.743,255.451 C200.318,258.294 204.182,261.013 207.603,261.013 C208.046,261.013 208.481,260.967 208.901,260.87 L211.073,266.161 C209.868,266.532 208.517,266.734 207.003,266.734" id="Fill-1030" fill="#B6B6B2" fill-rule="nonzero"></path>
        <polyline id="Fill-1031" fill="#D7AFAE" fill-rule="nonzero" points="190.796 216.058 181.023 216.058 181 216 190.772 216 190.796 216.058"></polyline>
        <polyline id="Fill-1032" fill="#DABEBB" fill-rule="nonzero" points="192.017 219.03 182.244 219.03 181 216 190.773 216 192.017 219.03"></polyline>
        <polyline id="Fill-1033" fill="#F0B5B6" fill-rule="nonzero" points="204.695 277.02 201.008 277.02 201 277 204.686 277 204.695 277.02"></polyline>
        <path d="M204.4,276.763 L200.714,276.763 L193.453,259.078 C194.778,261.185 196.667,263.072 199.312,264.369 L204.4,276.763 M191.241,253.687 L177,219 L180.686,219 L191.231,244.685 C191.215,244.726 191.199,244.766 191.184,244.807 C190.634,246.295 190.333,249.875 191.241,253.687" id="Fill-1034" fill="#F5CCCB" fill-rule="nonzero"></path>
        <path d="M199.650011,264.684 C197.005011,263.387 195.116011,261.5 193.791011,259.393 L191.579011,254.002 C190.671011,250.19 190.972011,246.61 191.522011,245.122 C191.537011,245.081 191.553011,245.041 191.569011,245 L199.650011,264.684" id="Fill-1035" fill="#B6B6B2" fill-rule="nonzero"></path>
        <polyline id="Fill-1036" fill="#D7AFAE" fill-rule="nonzero" points="179.71 216.058 176.024 216.058 176 216 179.687 216 179.71 216.058"></polyline>
        <polyline id="Fill-1037" fill="#DABEBB" fill-rule="nonzero" points="180.93 219.03 177.244 219.03 176 216 179.686 216 180.93 219.03"></polyline>
        <path d="M224.792,277.481 L174.996,277.481 C174.246,277.481 173.506,277.384 172.814,277.192 C172.535,277.124 172.266,277.038 172.007,276.933 C171.738,276.846 171.478,276.73 171.228,276.606 C170.978,276.481 170.738,276.346 170.497,276.202 C170.353,276.117 170.209,276.02 170.065,275.923 C169.353,275.433 168.72,274.827 168.181,274.155 C167.97,273.886 167.778,273.597 167.605,273.309 C166.807,272.001 166.346,270.464 166.346,268.83 L166.346,225.339 C166.346,220.572 170.229,216.689 174.996,216.689 L224.792,216.689 C226.436,216.689 227.964,217.15 229.271,217.948 C229.415,218.035 229.559,218.131 229.703,218.227 C229.848,218.323 229.982,218.418 230.117,218.524 C230.79,219.062 231.395,219.697 231.886,220.408 C231.982,220.552 232.078,220.697 232.164,220.84 C232.308,221.08 232.443,221.322 232.568,221.572 C232.693,221.822 232.808,222.08 232.895,222.349 C232.952,222.475 233,222.609 233.029,222.743 C233.087,222.878 233.125,223.013 233.154,223.158 C233.346,223.849 233.443,224.588 233.443,225.339 L233.443,268.83 C233.443,273.597 229.559,277.481 224.792,277.481 Z M333.083,268.83 C333.083,270.464 332.622,272.001 331.824,273.309 C331.652,273.597 331.459,273.886 331.247,274.155 C330.709,274.827 330.075,275.433 329.364,275.923 C329.22,276.02 329.075,276.117 328.931,276.202 C328.576,276.423 328.201,276.616 327.817,276.779 C327.692,276.846 327.557,276.893 327.422,276.933 C326.673,277.231 325.875,277.404 325.039,277.461 C324.837,277.471 324.635,277.481 324.433,277.481 L274.636,277.481 C269.86,277.481 265.986,273.597 265.986,268.83 L265.986,225.339 C265.986,224.588 266.083,223.849 266.275,223.158 C266.304,223.013 266.342,222.878 266.4,222.743 C266.428,222.609 266.477,222.475 266.534,222.349 C266.621,222.08 266.737,221.822 266.861,221.572 C266.986,221.322 267.121,221.08 267.265,220.84 C267.351,220.697 267.448,220.552 267.544,220.408 C268.13,219.553 268.869,218.812 269.716,218.227 C269.86,218.131 270.004,218.035 270.158,217.948 C271.455,217.15 272.993,216.689 274.636,216.689 L324.433,216.689 C329.2,216.689 333.083,220.572 333.083,225.339 L333.083,268.83 Z M355.757,235.835 L340.773,235.835 L340.773,225.339 C340.773,216.332 333.439,209 324.433,209 L274.636,209 C265.621,209 258.297,216.332 258.297,225.339 L258.297,227.492 C251.185,225.589 245.207,226.3 241.132,227.406 L241.132,225.339 C241.132,216.332 233.798,209 224.792,209 L174.996,209 C165.99,209 158.657,216.332 158.657,225.339 L158.657,235.835 L143.961,235.835 C143.432,235.835 143,236.257 143,236.796 L143,243.398 C143,243.928 143.432,244.36 143.961,244.36 L158.657,244.36 L158.657,268.83 C158.657,271.425 159.262,273.876 160.348,276.058 C163.011,281.45 168.585,285.17 174.996,285.17 L224.792,285.17 C228.858,285.17 232.597,283.68 235.461,281.191 C238.93,278.202 241.132,273.77 241.132,268.83 L241.132,235.469 C244.063,234.335 250.291,232.778 258.297,235.536 L258.297,268.83 C258.297,273.76 260.489,278.192 263.959,281.191 C266.823,283.67 270.552,285.17 274.636,285.17 L324.433,285.17 C330.075,285.17 335.063,282.296 337.995,277.932 C339.744,275.327 340.773,272.195 340.773,268.83 L340.773,244.36 L355.757,244.36 C356.294,244.36 356.718,243.928 356.718,243.398 L356.718,236.796 C356.718,236.257 356.294,235.835 355.757,235.835 Z" id="Fill-1038" fill="#222321" fill-rule="nonzero"></path>
        <path d="M360.06,182.483 C360.035,121.461 309.404,72 248.376,72 C187.347,72 139.026,121.461 139.001,182.483 L139,182.485 L139,301.737 C139,302.281 139.486,302.723 140.087,302.723 L166.878,302.723 C166.878,302.723 166.894,300.686 165.734,300.28 C160.92,298.602 160.786,279.15 160.786,274.711 L160.786,255.307 L160.916,241.741 C160.916,221.828 162.37,210.455 181.13,210.455 C214.592,210.455 221.319,175.853 221.319,175.853 C221.319,175.853 218.436,210.454 309.922,210.454 C329.058,210.454 335.847,223.987 338.038,231.839 C338.391,232.719 338.51,238.727 338.564,239.689 C338.518,244.668 338.596,245.056 338.596,245.056 L338.596,274.711 C338.596,277.78 336.974,297.85 334.375,299.802 C331.966,301.612 333.352,302.723 333.352,302.723 L358.974,302.723 C359.573,302.723 360.061,302.281 360.061,301.737 L360.061,182.485 L360.06,182.483" id="Fill-1039" fill="#5D468A" fill-rule="nonzero"></path>
        <ellipse class="mouth" id="mouth" stroke-opacity="0" stroke="#979797" fill="#000000" fill-rule="nonzero" cx="235" cy="319" rx="10" ry="14"></ellipse>
        <circle class="bubble" id="bubble" stroke-opacity="0" stroke="#979797" fill-opacity="0.699999988" fill="#F3A8D8" fill-rule="nonzero" cx="248.5" cy="332.5" r="99.5"></circle>
<!--         <path d="M308,395.832031 C308,395.832031 336.625,373.566406 336.625,345" id="Path-2" fill-opacity="0.5" fill="#FFFFFF" fill-rule="nonzero"></path>
        <circle id="Oval-3" fill-opacity="0.5" fill="#FFFFFF" fill-rule="nonzero" cx="340" cy="336" r="3"></circle> -->
        <path d="M307.276154,362.921701 L268.69864,389.328812 C264.300986,392.341719 258.447397,392.111907 254.299487,388.763502 C247.75619,383.467785 239.120597,376.248715 238.444824,376.495632 L212.135181,410.48569 C204.935941,419.793558 191.673816,421.760654 182.082797,414.943189 C171.211956,407.204294 160.107194,396.099532 157.443091,390.524409 L147.209036,347.762304 C145.077754,343.356787 159.918758,336.391132 161.10136,331.647728 L148.917961,303.967046 C147.382413,300.47552 147.616014,296.459139 149.545989,293.169175 C151.475964,289.879212 154.867756,287.715504 158.66468,287.352139 C165.708309,286.702358 172.394558,286.007092 172.440043,285.643214 L154.519075,219.092617 C156.072053,207.435541 189.347351,232.354652 200.939449,234.213027 L230.757912,222.341523 C234.253196,220.969137 238.20629,221.466371 241.252826,223.66161 C244.299361,225.85685 246.022056,229.449415 245.826339,233.199368 C245.118078,245.655675 244.162899,260.399212 244.799685,260.399212 L332.520156,220.190747 C346.633406,220.190747 313.202159,252.159986 308.946092,265.616956 C307.97142,268.709915 315.580359,275.071273 322.987865,280.958291 C325.740261,283.151989 327.079881,286.670312 326.483497,290.139075 C325.887113,293.607838 323.449343,296.476715 320.12233,297.625181 L319.524531,297.833111 C321.1035,300.620673 336.360364,320.439001 336.542303,323.635925 L351.96811,369.770395 C352.254066,370.340414 352.312153,370.997954 352.130555,371.609276 C349.758854,379.133744 317.087851,361.011344 307.276154,362.921701 Z" id="splat" class="splat" fill-opacity="0.7" fill="#F3A8D8" fill-rule="nonzero"></path>
    </g>
</svg>
</div>
<div class="button-container">
	<h1>Pop the Bubble</h1>
	<button class="btn-pop">Pop!</button>
</div>
!

CSS 

              
                // Colors
$bg-color: #a2e5f4;
$dot-color: #9192fb;
// Dimensions
$dot-size: 2px;
$dot-space: 22px;
/* thanks https://codepen.io/edmundojr/pen/xOYJGw */
body {
	background: linear-gradient(
				90deg,
				$bg-color ($dot-space - $dot-size),
				transparent 1%
			)
			center,
		linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
		$dot-color;
	background-size: $dot-space $dot-space;
}
html,
body {
	height: 100%;
}
h1,
button {
	font-family: "Amatic SC", cursive;
}
h1 {
	font-size: 60px;
	color: #fff;
	line-height: 1.5em;
}
svg#bubble,
.button-container {
	float: left;
}
.button-container {
	margin-top: 240px;
}
// .button-container {
// 	display: none;
// }
#splat {
	display: none;
	width: 200px;
}
.bubble, .mouth {
	transform-origin: 50% 50%;
}
.bubble {
	animation: grow-bubble 4s infinite;
}
.mouth {
	animation: grow-mouth 4s infinite;
}
.splat {
	display: none;
	opacity: 0.7;
}
button {
	color: white;
	background: #5d468a;
	opacity: 0.9;
	width: 120px;
	border: none;
	border-radius: 10px;
	text-transform: uppercase;
	padding: 10px 20px;
	margin: 0 10px 0 0;
	font-size: 22px;
}
button:hover {
	cursor: pointer;
}
@keyframes grow-bubble {
	0% {
		transform: scale(0.3);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.3);
	}
}
@keyframes grow-mouth {
	0% {
		transform: scale(0.7);
	}
	50% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(0.7);
	}
}
!

JS 

              
                $(function() {
	$('button.btn-pop').click(function(){
  		$('.bubble').css('display', 'none');
		$('.splat').css('display', 'block');
		$('.mouth').css('animation', 'none');
	});
});
!
999px

Console