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 

              
                <div class="container">
  <div class="title">
    Circle
    <div class="tooltip">
      <div class="tooltip-spacing">
        <div class="tooltip-bg1"></div>
        <div class="tooltip-bg2"></div>
        <div class="tooltip-text">?</div>
        <div class="bubble">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
          </svg>
          <div class="bubble-text">Hovering circle</div>
        </div>
      </div>
    </div>
  </div>
  <div class="body">
    A circle is a shape consisting of all points in a plane that are at a
    given distance from a given point, the centre; equivalently it is the
    curve traced out by a point that moves in a plane so that its distance
    from a given point is constant.
  </div>
  <div class="title title--spacing">
    Triangle
    <div class="tooltip">
      <div class="tooltip-spacing">
        <div class="tooltip-bg1"></div>
        <div class="tooltip-bg2"></div>
        <div class="tooltip-text">?</div>
        <div class="bubble bubble-triangles">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
          </svg>
          <div class="bubble-text bubble-text-triangles">
            Hovering triangle
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="body">
    In Euclidean geometry, any three points, when non-collinear, determine a
    unique triangle and simultaneously, a unique plane (i.e. a
    two-dimensional Euclidean space).
  </div>
  <div class="title title--spacing">
    Square
    <div class="tooltip">
      <div class="tooltip-spacing">
        <div class="tooltip-bg1"></div>
        <div class="tooltip-bg2"></div>
        <div class="tooltip-text">?</div>
      </div>
      <div class="bubble bubble-rects">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
          <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
        </svg>
        <div class="bubble-text bubble-text-rects">Hovering square</div>
      </div>
    </div>
  </div>
  <div class="body">Don't be a ...</div>
</div>
!

CSS 

              
                @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
body {
  align-items: center;
  background-color: #5f9a74;
  display: flex;
  font-family: "Source Sans Pro", sans-serif;
  height: 100vh;
  justify-content: center;
}
.container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 3.6px rgba(0, 0, 0, 0.023),
    0 5.6px 10px rgba(0, 0, 0, 0.028), 0 13.6px 24.1px rgba(0, 0, 0, 0.034),
    0 45px 80px rgba(0, 0, 0, 0.06);
  margin: 0 20px;
  max-width: 500px;
  padding: 20px 16px;
}
.title {
  display: flex;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}
.title--spacing {
  margin-top: 16px;
}
.tooltip {
  font-size: 16px;
  font-weight: normal;
  margin-top: 2px;
  position: relative;
}
.tooltip:hover {
  cursor: help;
}
.tooltip-spacing {
  height: 20px;
  margin: 8px;
  position: relative;
  width: 20px;
}
.tooltip-bg1 {
  background-color: #000;
  border-radius: 10px;
  content: " ";
  display: flex;
  height: 20px;
  position: absolute;
  top: 0;
  width: 20px;
}
.tooltip-bg2 {
  background-color: #fff;
  border-radius: 8px;
  content: " ";
  display: flex;
  height: 16px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 16px;
}
.tooltip-text {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 20px;
}
.bubble {
  clip-path: path(
    "M 201.23862,50.748829 A 0.006,0.006 0 0 1 201.23262,50.754829 0.006,0.006 0 0 1 201.22662,50.748829 0.006,0.006 0 0 1 201.23262,50.742829 0.006,0.006 0 0 1 201.23862,50.748829 M 191.85968,17.069946 A 0.006,0.006 0 0 1 191.85368,17.075946 0.006,0.006 0 0 1 191.84768,17.069946 0.006,0.006 0 0 1 191.85368,17.063946 0.006,0.006 0 0 1 191.85968,17.069946 M 161.59133,52.880402 A 0.006,0.006 0 0 1 161.58533,52.886402 0.006,0.006 0 0 1 161.57933,52.880402 0.006,0.006 0 0 1 161.58533,52.874402 0.006,0.006 0 0 1 161.59133,52.880402 M 138.57033,11.101538 A 0.006,0.006 0 0 1 138.56433,11.107538 0.006,0.006 0 0 1 138.55833,11.101538 0.006,0.006 0 0 1 138.56433,11.095538 0.006,0.006 0 0 1 138.57033,11.101538 M 113.84406,50.322514 A 0.006,0.006 0 0 1 113.83806,50.328514 0.006,0.006 0 0 1 113.83206,50.322514 0.006,0.006 0 0 1 113.83806,50.316514 0.006,0.006 0 0 1 113.84406,50.322514 M 102.33355,21.333096 A 0.006,0.006 0 0 1 102.32755,21.339096 0.006,0.006 0 0 1 102.32155,21.333096 0.006,0.006 0 0 1 102.32755,21.327096 0.006,0.006 0 0 1 102.33355,21.333096 M 64.391521,55.864605 A 0.006,0.006 0 0 1 64.385521,55.870605 0.006,0.006 0 0 1 64.379521,55.864605 0.006,0.006 0 0 1 64.385521,55.858605 0.006,0.006 0 0 1 64.391521,55.864605 M 63.112575,17.496262 A 0.006,0.006 0 0 1 63.106575,17.502262 0.006,0.006 0 0 1 63.100575,17.496262 0.006,0.006 0 0 1 63.106575,17.490262 0.006,0.006 0 0 1 63.112575,17.496262 M 27.198234,49.857197 A 0.006,0.006 0 0 1 27.192234,49.863197 0.006,0.006 0 0 1 27.186234,49.857197 0.006,0.006 0 0 1 27.192234,49.851197 0.006,0.006 0 0 1 27.198234,49.857197 M 14.309602,18.772854 A 0.006,0.006 0 0 1 14.303602,18.778854 0.006,0.006 0 0 1 14.297602,18.772854 0.006,0.006 0 0 1 28.303602,18.766854 0.006,0.006 0 0 1 14.309602,18.772854"
  );
  filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 3px 6px)
    drop-shadow(rgba(0, 0, 0, 0.23) 0px 3px 6px);
  left: 28px;
  opacity: 0.5;
  position: absolute;
  top: -30px;
  transition: transform 400ms, clip-path 400ms, opacity 400ms;
  transform: rotate(10deg);
  transform-origin: -10% 50%;
}
.bubble-triangles {
  clip-path: path(
    "M 203.0404,15.981094 H 203.05405 L 203.04722,15.99297 Z M 179.0404,21.981094 H 179.05405 L 179.04722,21.99297 Z M 137.0404,17.981094 H 137.05405 L 137.04722,17.99297 Z M 193.39923,31.578348 H 193.38558 L 193.39241,31.566472 Z M 153.39923,35.578348 H 153.38558 L 153.39241,35.566472 Z M 113.39923,35.578348 H 113.38558 L 113.39241,35.566472 Z M 69.399234,35.578348 H 69.385576 L 69.392405,35.566472 Z M 97.040397,23.981094 H 97.054055 L 97.047226,23.99297 Z M 15.399233,37.578349 H 15.385575 L 15.392404,37.566472 Z M 40.248519,26.488708 H 40.262177 L 40.255348,26.500584 Z M 14.248519,26.488708 H 14.262177 L 14.255348,26.500584 Z"
  );
}
.bubble-rects {
  clip-path: path(
    "M 220.41818,50.596475 H 220.42935 C 220.43075,50.596475 220.43188,50.597602 220.43188,50.599002 V 50.607633 C 220.43188,50.609033 220.43075,50.61016 220.42935,50.61016 H 220.41818 C 220.41678,50.61016 220.41565,50.609033 220.41565,50.607633 V 50.599002 C 220.41565,50.597602 220.41678,50.596475 220.41818,50.596475 Z M 207.09587,16.57393 H 207.10704 C 207.10844,16.57393 207.10957,16.575057 207.10957,16.576457 V 16.585088 C 207.10957,16.586488 207.10844,16.587615 207.10704,16.587615 H 207.09587 C 207.09447,16.587615 207.09334,16.586488 207.09334,16.585088 V 16.576457 C 207.09334,16.575057 207.09447,16.57393 207.09587,16.57393 Z M 171.9734,53.513078 H 171.98457 C 171.98597,53.513078 171.9871,53.514205 171.9871,53.515605 V 53.524236 C 171.9871,53.525636 171.98597,53.526763 171.98457,53.526763 H 171.9734 C 171.972,53.526763 171.97087,53.525636 171.97087,53.524236 V 53.515605 C 171.97087,53.514205 171.972,53.513078 171.9734,53.513078 Z M 168.9456,2.0404937 H 168.95677 C 168.95817,2.0404937 168.9593,2.0416208 168.9593,2.0430209 V 2.0516521 C 168.9593,2.0530522 168.95817,2.0541793 168.95677,2.0541793 H 168.9456 C 168.9442,2.0541793 168.94307,2.0530522 168.94307,2.0516521 V 2.0430209 C 168.94307,2.0416208 168.9442,2.0404937 168.9456,2.0404937 Z M 126.55641,48.063039 H 126.56758 C 126.56898,48.063039 126.57011,48.064166 126.57011,48.065566 V 48.074197 C 126.57011,48.075597 126.56898,48.076724 126.56758,48.076724 H 126.55641 C 126.55501,48.076724 126.55388,48.075597 126.55388,48.074197 V 48.065566 C 126.55388,48.064166 126.55501,48.063039 126.55641,48.063039 Z M 112.02298,11.012696 H 112.03415 C 112.03555,11.012696 112.03668,11.013823 112.03668,11.015223 V 11.023854 C 112.03668,11.025254 112.03555,11.026381 112.03415,11.026381 H 112.02298 C 112.02158,11.026381 112.02045,11.025254 112.02045,11.023854 V 11.015223 C 112.02045,11.013823 112.02158,11.012696 112.02298,11.012696 Z M 68.828384,53.513078 H 68.839559 C 68.840959,53.513078 68.842086,53.514205 68.842086,53.515605 V 53.524236 C 68.842086,53.525636 68.840959,53.526763 68.839559,53.526763 H 68.828384 C 68.826984,53.526763 68.825857,53.525636 68.825857,53.524236 V 53.515605 C 68.825857,53.514205 68.826984,53.513078 68.828384,53.513078 Z M 56.917034,3.7459782 H 56.928208 C 56.929608,3.7459782 56.930736,3.7471053 56.930736,3.7485054 V 3.7571366 C 56.930736,3.7585367 56.929608,3.7596638 56.928208,3.7596638 H 56.917034 C 56.915634,3.7596638 56.914506,3.7585367 56.914506,3.7571366 V 3.7485054 C 56.914506,3.7471053 56.915634,3.7459782 56.917034,3.7459782 Z M 6.0334827,41.474006 H 6.0446573 C 6.0460574,41.474006 6.0471845,41.475133 6.0471845,41.476533 V 41.485164 C 6.0471845,41.486564 6.0460574,41.487691 6.0446573,41.487691 H 6.0334827 C 6.0320826,41.487691 6.0309555,41.486564 6.0309555,41.485164 V 41.476533 C 6.0309555,41.475133 6.0320826,41.474006 6.0334827,41.474006 Z M -9.6945443,5.1404177 H -9.6833697 C -9.6819696,5.1404177 -9.6808425,5.1415448 -9.6808425,5.1429449 V 5.1515761 C -9.6808425,5.1529762 -9.6819696,5.1541033 -9.6833697,5.1541033 H -9.6945443 C -9.6959444,5.1541033 -9.6970715,5.1529762 -9.6970715,5.1515761 V 5.1429449 C -9.6970715,5.1415448 -9.6959444,5.1404177 -9.6945443,5.1404177 Z"
  );
  left: 37px;
  top: -22px;
}
.bubble-text {
  color: white;
  left: 68px;
  position: absolute;
  top: 28px;
}
.bubble-text-triangles {
  left: 62px;
}
.bubble-text-rects {
  left: 68px;
}
.tooltip:hover .bubble {
  clip-path: path(
    "M 231.23262,50.748829 A 30,30 0 0 1 201.23262,80.748829 30,30 0 0 1 171.23262,50.748829 30,30 0 0 1 201.23262,20.748829 30,30 0 0 1 231.23262,50.748829 M 221.85368,17.069946 A 30,30 0 0 1 191.85368,47.069946 30,30 0 0 1 161.85368,17.069946 30,30 0 0 1 191.85368,-12.930054 30,30 0 0 1 221.85368,17.069946 M 191.58533,52.880402 A 30,30 0 0 1 161.58533,82.880402 30,30 0 0 1 131.58533,52.880402 30,30 0 0 1 161.58533,22.880402 30,30 0 0 1 191.58533,52.880402 M 168.56433,11.101538 A 30,30 0 0 1 138.56433,41.101538 30,30 0 0 1 108.56433,11.101538 30,30 0 0 1 138.56433,-18.898462 30,30 0 0 1 168.56433,11.101538 M 143.83806,50.322514 A 30,30 0 0 1 113.83806,80.322514 30,30 0 0 1 83.838058,50.322514 30,30 0 0 1 113.83806,20.322514 30,30 0 0 1 143.83806,50.322514 M 132.32755,21.333096 A 30,30 0 0 1 102.32755,51.333096 30,30 0 0 1 72.327553,21.333096 30,30 0 0 1 102.32755,-8.6669044 30,30 0 0 1 132.32755,21.333096 M 94.385521,55.864605 A 30,30 0 0 1 64.385521,85.864605 30,30 0 0 1 34.385521,55.864605 30,30 0 0 1 64.385521,25.864605 30,30 0 0 1 94.385521,55.864605 M 93.106575,17.496262 A 30,30 0 0 1 63.106575,47.496262 30,30 0 0 1 33.106575,17.496262 30,30 0 0 1 63.106575,-12.503738 30,30 0 0 1 93.106575,17.496262 M 57.192234,49.857197 A 30,30 0 0 1 27.192234,79.857197 30,30 0 0 1 -2.807766,49.857197 30,30 0 0 1 27.192234,19.857197 30,30 0 0 1 57.192234,49.857197 M 44.303602,18.772854 A 30,30 0 0 1 14.303602,48.772854 30,30 0 0 1 -15.696398,18.772854 30,30 0 0 1 14.303602,-11.227146 30,30 0 0 1 44.303602,18.772854"
  );
  opacity: 1;
  transform: rotate(0deg);
}
.tooltip:hover .bubble-triangles {
  clip-path: path(
    "M 180.95134,-20.140107 H 262.90149 L 221.92642,51.116808 Z M 152.15134,-14.940107 H 234.10149 L 193.12642,56.316808 Z M 101.75134,-19.740107 H 183.70149 L 142.72642,51.516808 Z M 251.3157,68.499549 H 169.36555 L 210.34062,-2.7573658 Z M 203.3157,73.299549 H 121.36555 L 162.34062,2.0426342 Z M 155.3157,73.299549 H 73.365555 L 114.34062,2.0426342 Z M 100.5157,73.299549 H 18.565555 L 59.540627,2.0426342 Z M 47.751341,-12.540106 H 129.70149 L 88.726414,58.716808 Z M 37.7157,75.699549 H -44.234445 L -3.2593726,4.4426344 Z M -14.398913,-9.5309691 H 67.551233 L 26.57616,61.725945 Z M -45.598913,-9.5309691 H 36.351233 L -4.6238398,61.725945 Z"
  );
}
.tooltip:hover .bubble-rects {
  clip-path: path(
    "M 192.48716,16.389187 H 248.36037 C 255.36066,16.389187 260.99627,22.024798 260.99627,29.025086 V 72.181548 C 260.99627,79.181836 255.36066,84.817448 248.36037,84.817448 H 192.48716 C 185.48687,84.817448 179.85126,79.181836 179.85126,72.181548 V 29.025086 C 179.85126,22.024798 185.48687,16.389187 192.48716,16.389187 Z M 179.16485,-17.633358 H 235.03806 C 242.03835,-17.633358 247.67396,-11.997747 247.67396,-4.9974585 V 38.159003 C 247.67396,45.159292 242.03835,50.794903 235.03806,50.794903 H 179.16485 C 172.16456,50.794903 166.52895,45.159292 166.52895,38.159003 V -4.9974585 C 166.52895,-11.997747 172.16456,-17.633358 179.16485,-17.633358 Z M 144.04238,19.30579 H 199.91559 C 206.91588,19.30579 212.55149,24.941401 212.55149,31.941689 V 75.098151 C 212.55149,82.09844 206.91588,87.734051 199.91559,87.734051 H 144.04238 C 137.04209,87.734051 131.40648,82.09844 131.40648,75.098151 V 31.941689 C 131.40648,24.941401 137.04209,19.30579 144.04238,19.30579 Z M 141.01458,-32.166794 H 196.88779 C 203.88808,-32.166794 209.52369,-26.531183 209.52369,-19.530894 V 23.625567 C 209.52369,30.625856 203.88808,36.261467 196.88779,36.261467 H 141.01458 C 134.01429,36.261467 128.37868,30.625856 128.37868,23.625567 V -19.530894 C 128.37868,-26.531183 134.01429,-32.166794 141.01458,-32.166794 Z M 98.625386,13.855751 H 154.4986 C 161.49889,13.855751 167.1345,19.491362 167.1345,26.491651 V 69.648112 C 167.1345,76.648401 161.49889,82.284012 154.4986,82.284012 H 98.625386 C 91.625098,82.284012 85.989487,76.648401 85.989487,69.648112 V 26.491651 C 85.989487,19.491362 91.625098,13.855751 98.625386,13.855751 Z M 84.091954,-23.194592 H 139.96517 C 146.96546,-23.194592 152.60107,-17.55898 152.60107,-10.558692 V 32.59777 C 152.60107,39.598058 146.96546,45.233669 139.96517,45.233669 H 84.091954 C 77.091666,45.233669 71.456055,39.598058 71.456055,32.59777 V -10.558692 C 71.456055,-17.55898 77.091666,-23.194592 84.091954,-23.194592 Z M 40.897363,19.30579 H 96.770576 C 103.77086,19.30579 109.40648,24.941401 109.40648,31.941689 V 75.098151 C 109.40648,82.09844 103.77086,87.734051 96.770576,87.734051 H 40.897363 C 33.897074,87.734051 28.261463,82.09844 28.261463,75.098151 V 31.941689 C 28.261463,24.941401 33.897074,19.30579 40.897363,19.30579 Z M 28.986014,-30.461309 H 84.859227 C 91.859516,-30.461309 97.495127,-24.825698 97.495127,-17.82541 V 25.331052 C 97.495127,32.33134 91.859516,37.966951 84.859227,37.966951 H 28.986014 C 21.985726,37.966951 16.350115,32.33134 16.350115,25.331052 V -17.82541 C 16.350115,-24.825698 21.985726,-30.461309 28.986014,-30.461309 Z M -21.897536,7.2667179 H 33.975677 C 40.975965,7.2667179 46.611576,12.902329 46.611576,19.902617 V 63.059079 C 46.611576,70.059368 40.975965,75.694979 33.975677,75.694979 H -21.897536 C -28.897825,75.694979 -34.533436,70.059368 -34.533436,63.059079 V 19.902617 C -34.533436,12.902329 -28.897825,7.2667179 -21.897536,7.2667179 Z M -37.625564,-29.06687 H 18.247649 C 25.247938,-29.06687 30.883549,-23.431259 30.883549,-16.43097 V 26.725492 C 30.883549,33.72578 25.247938,39.361391 18.247649,39.361391 H -37.625564 C -44.625852,39.361391 -50.261463,33.72578 -50.261463,26.725492 V -16.43097 C -50.261463,-23.431259 -44.625852,-29.06687 -37.625564,-29.06687 Z"
  );
}
!

JS
!
999px

Console