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 id="root"></div>
!

CSS 

              
                @import url("https://fonts.googleapis.com/css2?family=Assistant:wght@500;800&display=swap");

body {
  margin: 0;
}

.App {
  align-items: center;
  background-color: #3b4969;
  display: flex;
  font-family: "Assistant";
  justify-content: center;
  height: 100vh;
}

.container {
  background-color: #fed5d5;
  border-radius: 16px;
  box-shadow: 0 0.4px 3.6px rgba(0, 0, 0, 0.004),
    0 1px 8.5px rgba(0, 0, 0, 0.01), 0 1.9px 15.7px rgba(0, 0, 0, 0.019),
    0 3.4px 28.2px rgba(0, 0, 0, 0.03), 0 6.3px 54.4px rgba(0, 0, 0, 0.047),
    0 15px 137px rgba(0, 0, 0, 0.07);
  height: 440px;
  overflow: hidden;
  position: relative;
  width: 256px;
}

.title {
  margin-top: 36px;
  position: absolute;
  text-align: center;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.title1 {
  font-size: 36px;
  font-weight: 700;
}

.title2 {
  color: #3b4969;
  font-size: 16px;
}

.blob {
  left: 28px;
  position: absolute;
  top: 96px;
}

.person {
  position: absolute;
  transform-origin: 50% 1000px;
  top: 94px;
  left: 30px;
}

.person1 {
  transform: rotate(0);
}

.person2 {
  transform: rotate(20deg);
}

.person3 {
  transform: rotate(40deg);
}

.person4 {
  transform: rotate(60deg);
}

.text {
  bottom: 48px;
  font-size: 12px;
  line-height: 18px;
  padding: 24px;
  position: absolute;
  text-align: center;
}

.navDots {
  bottom: 40px;
  display: flex;
  justify-content: space-between;
  left: 50%;
  margin: auto;
  position: absolute;
  transform: translateX(-50%);
  width: 72px;
}

.navDot {
  background: black;
  border-radius: 3px;
  height: 6px;
  width: 6px;
}
!

JS 

              
                const { useState, useEffect,  } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

function P1() {
  return (
    <svg viewBox="0 0 100 120" height="240" width="200">
      <path
        d="M58.918 76.63l1.208-2.097c.63-1.094 1.51-2.026 2.567-2.718l1.86-1.22c.442-.29 1.04-.112 1.25.372.18.41.093.886-.22 1.205l-1.65 1.686 8.886-2.546c.38-.117.778.126.846.52l.046.262c.055.31-.118.616-.41.73l-5.216 1.673 6.257-1.093c.386-.092.766.174.81.57l.023.195c.037.33-.178.64-.503.717l-6.476 1.33 5.37-.11c.422-.018.753.36.68.775l-.014.084c-.05.286-.28.505-.568.543l-5.59.72 3.432.002c.488 0 .808.51.596.95-.1.208-.304.35-.535.37L59.07 80.71l-.152-4.08"
        fill="#f79467"
      />
      <path
        d="M78.19 31.872s1.237 7.694 4.008 12.015c.52.81.243 1.917-.56 2.435-3.128 2.022-11.934 5.857-23.18 1.466-.744-.29-1.2-1.065-1.108-1.88.23-2.08 2.035-6.163 4.688-9.826l16.152-4.21"
        fill="#f25b36"
      />
      <path
        d="M62.595 39.01c-.416 1.373-1.868 2.15-3.242 1.733-1.374-.416-2.15-1.868-1.734-3.242.415-1.373 1.867-2.15 3.24-1.733 1.375.416 2.15 1.868 1.735 3.242"
        fill="#f79368"
      />
      <path
        d="M65.63 44.292l.25 10.526 8.2-.958-1.554-15.474-6.897 5.906"
        fill="#f89f77"
      />
      <path
        d="M65.725 48.198s3.73-.19 3.89-4.43l-3.952 2.092.062 2.338"
        fill="#25101f"
      />
      <path
        d="M60.756 28.977c-.656.555-1.074 1.333-1.242 2.172-.497 2.486-1.474 7.66-.594 10.3 1.146 3.433 3.933 5.604 8.44 4.747 0 0 5.22-.238 6.51-7.91 1.826-10.887-7.5-14.056-13.114-9.31"
        fill="#f89f77"
      />
      <path
        d="M60.464 36.942c-.083.318-.408.508-.726.424-.318-.083-.508-.408-.424-.726.083-.318.41-.508.726-.424.318.083.508.41.424.726M65.492 37.043c-.084.318-.41.508-.727.424-.318-.083-.507-.41-.424-.726.085-.317.41-.507.728-.423.317.083.507.408.424.726M61.354 38.218l-.588 1.417c-.014.034-.013.072.004.105.016.033.046.057.08.067l.954.257c.07.018.14-.022.157-.09.02-.07-.02-.14-.09-.157l-.81-.22.53-1.28c.028-.066-.003-.14-.068-.168-.066-.028-.14.003-.168.068"
        fill="#25101f"
      />
      <path
        d="M65.51 33.424s-1.845-.326-1.943.522c0 0-.053.575 1.56.825s2.257.21 2.456-.32c.2-.527-1.202-.948-2.074-1.026M59.215 33.454s1.607-.35 1.837.46c0 0 .146.556-1.267.824-1.028.195-1.412.018-1.516-.354-.125-.44.337-.848.945-.93"
        fill="#f25b36"
      />
      <path
        d="M61.407 41.03l3.313.056s.007 1.334-1.68 1.317c-1.69-.017-1.633-1.372-1.633-1.372"
        fill="#fff"
      />
      <path
        d="M71.893 37.477s-2.726-2.413-2.184-7.106c0 0-4.632.823-10.128.414 0 0 1.227-7.255 11.68-5.515 10.86 1.807 6.855 14.368 2.818 18.047l-2.187-5.84"
        fill="#f25b36"
      />
      <path
        d="M77.147 39.59c-.506 1.666-2.267 2.61-3.934 2.103-1.668-.505-2.61-2.267-2.105-3.934.506-1.67 2.267-2.61 3.935-2.105 1.667.505 2.61 2.267 2.104 3.934"
        fill="#f89f77"
      />
      <path
        d="M75.586 37.63c-.008-.003-.29-.084-.69-.084-.382 0-.875.075-1.33.374-.455.298-.86.822-1.068 1.683-.016.07.026.138.095.155.068.016.137-.026.154-.095.197-.81.562-1.267.96-1.53.398-.262.84-.33 1.19-.33.182 0 .338.018.45.036.054.01.097.018.126.025l.033.008.01.002c.067.02.138-.02.158-.087.02-.068-.02-.14-.088-.16"
        fill="#25101f"
      />
      <path
        d="M67.303 25.028c.014-.013-9.085.155-10.223 7.385l14.398.322.862-4.812-5.037-2.895"
        fill="#f25b36"
      />
      <path
        d="M55.62 72.507l1 13.62-5.62 17.14h6.237l9.725-9.396-1.045-20.49-10.298-.873"
        fill="#f89f77"
      />
      <path
        d="M58.093 56.14s-7.11 5.133-5.016 21.608H64.71l-6.617-21.61"
        fill="#fff"
      />
      <path
        d="M60.993 85.95l-3.913 17.216c14.604 4.126 28.18 0 28.18 0s-.76-6.61-5.836-17.332l-18.43.117"
        fill="#25101f"
      />
      <path
        d="M77.72 53.032l-14.29.24s-3.13 1.05-5.337 2.867l.447 12.047 2.453 17.764 18.43-.116L83.05 58.23l-5.33-5.198"
        fill="#fff"
      />
      <path
        d="M69.928 50.953s3.647.346 7.79 2.08c0 0-1.19 4.636-8.046 4.657-1.147.003-2.297-.17-3.36-.6-1.425-.577-3.09-1.71-2.88-3.82l6.496-2.317"
        fill="#f89f77"
      />
      <path
        d="M59.836 77.42l-1.33-9.723c-.018-.14-.147-.238-.287-.22-.142.02-.24.15-.22.29l1.328 9.722c.02.14.148.238.29.22.14-.02.237-.15.218-.29"
        fill="#d5d5d3"
      />
      <path
        d="M87.764 86.594c.032-.364-.652-17.102-.652-17.102h-7.905l-.124 12.472 8.68 4.63"
        fill="#f89f77"
      />
      <path
        d="M77.72 53.032s9.812 2.723 11.006 8.82C89.92 67.946 92.81 78.12 92.81 78.12l-15.09.044 1.134-20.474-1.135-4.658"
        fill="#fff"
      />
      <path
        d="M78.52 79.19l-1.276-9.054c-.02-.14-.15-.238-.29-.218-.14.02-.237.15-.217.29l1.276 9.053c.02.14.15.24.29.22.14-.02.237-.15.217-.29"
        fill="#d5d5d3"
      />
      <path
        d="M66.808 69.504l-1.88 3.65 16.03 16.094c2.063 1.716 5.187 1.066 6.395-1.33 1.005-1.993.264-4.424-1.68-5.518l-2.25-1.537-3.948-2.7-12.667-8.66"
        fill="#f89f77"
      />
      <path
        d="M68.015 70.413l-.01-2.42c-.003-1.265-.304-2.51-.878-3.635l-1.01-1.982c-.24-.47-.846-.613-1.27-.298-.36.266-.52.723-.407 1.155l.597 2.284-5.778-6.27c-.274-.29-.915-.24-1.17.068-.2.242-.274.68-.076.924l3.1 3.77-4.24-3.74c-.29-.27-.86-.195-1.096.125-.197.27-.162.778.08 1.007l4.904 4.315-4.608-2.76c-.358-.225-.832-.062-.975.336l-.03.08c-.1.272-.008.577.223.752l4.494 3.4-2.98-1.7c-.423-.243-.954.04-.988.528-.017.23.09.454.28.587l9.68 6.938 2.155-3.465"
        fill="#f89f77"
      />
      <path
        d="M79.64 78.56l4.567 3.123c.107.073.253.045.326-.06.073-.108.045-.254-.06-.327l-4.568-3.123c-.107-.073-.253-.045-.326.06-.075.108-.047.254.06.327"
        fill="#f68b5c"
      />
    </svg>
  );
}

function P2() {
  return (
    <svg viewBox="0 0 100 120" height="240" width="200">
      <defs>
        <clipPath id="a">
          <path d="M5537.66 2888.01l141.95-5.38s-3.12-61.44-72.86-61.44c-69.35 0-69.09 66.82-69.09 66.82" />
        </clipPath>
      </defs>
      <path
        d="M39.888 39.78c.335 1.483 1.808 2.414 3.29 2.08 1.483-.336 2.413-1.81 2.08-3.292-.336-1.483-1.81-2.413-3.292-2.078-1.483.335-2.413 1.808-2.078 3.29"
        fill="#8e3c3a"
      />
      <path
        d="M37.074 45.836l-.248 10.82-9.855-.705 2.003-17.585 8.1 7.47"
        fill="#9d4c45"
      />
      <path
        d="M36.973 50.37s-5.357-.445-5.615-6.85l5.716 2.624-.1 4.226"
        fill="#190f0d"
      />
      <path
        d="M39.162 27.35c2.472.977 4.135 3.318 4.41 5.962.317 3.044.6 7.76-.347 10.072-1.463 3.573-4.57 5.667-9.266 4.394 0 0-5.5-.67-6.296-8.962-.94-9.812 5.946-13.657 11.498-11.465"
        fill="#9d4c45"
      />
      <path
        d="M41.953 37.498c.064.34.393.567.735.503.342-.063.567-.392.503-.734-.063-.342-.392-.567-.734-.503-.34.064-.567.393-.503.735M36.637 37.22c.065.342.393.567.735.503.342-.064.568-.392.503-.734-.064-.343-.393-.568-.734-.504-.34.063-.566.392-.503.734"
        fill="#190f0d"
      />
      <path
        d="M40.92 37.886l.445 1.815c.01.04.014.08.014.117 0 .228-.16.43-.395.477l-.665.128c-.074.014-.146-.034-.16-.108-.014-.074.034-.146.108-.16l.665-.13c.103-.018.173-.108.173-.207l-.006-.05-.447-1.815c-.018-.074.027-.148.1-.166.074-.018.148.027.166.1"
        fill="#25101f"
      />
      <path
        d="M36.068 33.133s1.97-.41 2.076.653c0 0 .056.72-1.667 1.033-1.724.312-2.412.26-2.625-.4-.212-.663 1.284-1.19 2.216-1.287M43.388 33.23s-1.806-.51-2.037.52c0 0-.142.704 1.444 1.1 1.155.29 1.577.08 1.68-.393.125-.56-.405-1.1-1.086-1.227M41.105 41.556l-3.835.145s.084 1.66 1.968 1.66c1.874 0 1.867-1.804 1.867-1.804"
        fill="#190f0d"
      />
      <g
        clip-path="url(#a)"
        transform="matrix(-.02702 0 0 -.02702 190.712 119.58)"
      >
        <path
          d="M5683.65 2782.45c-12.23-26.64-43.75-38.33-70.39-26.1-26.64 12.23-38.32 43.75-26.09 70.39s43.75 38.32 70.39 26.09 38.32-43.74 26.09-70.38"
          fill="#e057b3"
        />
      </g>
      <path
        d="M30.213 38.807s2.225-4.19 1.418-8.75c0 0 6.797 1.14 10.727-.112 0 0-.923-5.605-10.063-4.88-12.517.992-8.86 14.33-2.89 16.613l.81-2.87"
        fill="#190f0d"
      />
      <path
        d="M24.084 40.172c.406 1.8 2.194 2.928 3.993 2.522 1.8-.407 2.928-2.195 2.522-3.994-.407-1.8-2.195-2.928-3.995-2.522-1.8.407-2.927 2.195-2.52 3.994"
        fill="#9d4c45"
      />
      <path
        d="M25.88 38.22c.008 0 .208-.043.508-.043.39 0 .95.07 1.466.406s.97.94 1.138 1.958c.012.076-.038.146-.112.16-.075.01-.145-.04-.158-.114-.16-.958-.568-1.478-1.017-1.774-.45-.295-.96-.362-1.317-.36-.137 0-.25.008-.33.018l-.092.013-.023.004h-.005c-.074.017-.147-.03-.163-.105-.015-.073.032-.146.106-.16"
        fill="#25101f"
      />
      <path
        d="M50.443 73.544v16.042l7.524 13.18-7.394-.872-8.964-8.66.962-18.885 7.87-.806"
        fill="#9d4c45"
      />
      <path
        d="M45.325 57.798s5.835 3.407 6.77 11.83v11.976l-9.523-.326 2.753-23.48"
        fill="#2c5aa0"
      />
      <path
        d="M38.144 55.065s4.78.912 7.18 2.733l.71 43.015c-15.352 9.26-32.905.27-32.905.27l4.76-43.062s.622-2.427 7.293-2.947l12.96-.008"
        fill="#2c5aa0"
      />
      <path
        d="M25.183 55.073s5.507-1.215 12.96-.008c0 0 .71 4.432-5.278 4.618-6.484.203-7.682-4.61-7.682-4.61"
        fill="#9d4c45"
      />
      <path
        d="M45.478 81.603l.057-15.087c0-.127.103-.23.23-.23s.23.104.23.23l-.058 15.09c0 .126-.103.228-.23.228s-.23-.104-.23-.23"
        fill="#162d50"
      />
      <path
        d="M32.593 80.43s1.064-3.07 4.86-3.86l2.67-2.622c.415-.407 1.066-.447 1.526-.093.498.384.602 1.094.234 1.604l-1.314 1.826.72-.31c1.146-.494 2.09-1.36 2.683-2.457l1.685-3.124c.192-.355.562-.578.965-.58.78-.007 1.322.776 1.04 1.504l-1.686 4.373c-.654 1.695-2.007 3.025-3.713 3.65l-8.528 3.794-1.143-3.707"
        fill="#9d4c45"
      />
      <path
        d="M32.593 80.43L8.877 89.505c-2.05.887-3.044 4.378-2.128 6.416 1.018 2.268 3.835 3.07 5.895 1.678l21.09-13.46-1.142-3.708"
        fill="#9d4c45"
      />
      <path
        d="M6.436 93.562l2.48-19.168 11.503-.85-4.032 17.08-9.952 2.938"
        fill="#9d4c45"
      />
      <path
        d="M20.78 55.9S6.406 58.267 4.71 81.603h17.677l1.162-15.1-2.77-10.605"
        fill="#2c5aa0"
      />
      <path
        d="M18.517 81.375h3.136l2.035-11.86c.02-.124.14-.208.265-.187.125.022.21.14.187.266l-2.067 12.05c-.02.11-.115.19-.227.19h-3.33c-.126 0-.23-.103-.23-.23s.104-.23.23-.23"
        fill="#162d50"
      />
    </svg>
  );
}

function P3() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 120"
      height="240"
      width="200"
    >
      <defs>
        <clipPath id="a">
          <path d="M3498.05 2734.47l-159.3-1.82s3.29-68.84 77.04-68.84c73.32 0 82.26 70.66 82.26 70.66" />
        </clipPath>
      </defs>
      <path
        d="M81.136 39.23s-.675 4.144.416 5.235c2.08 2.08 8.47 3.05 5.098 11.953H57.253s-1.455-3.545 1.83-5.606c0 0 1.142-.798.44-3.202-.7-2.403 1.047-4.11 3.19-6.678l4.218-6.853 14.206 5.15"
        fill="#a40"
      />
      <path
        d="M81.178 38.62c0 5.292-4.496 9.583-10.042 9.583-5.546 0-10.042-4.29-10.042-9.584s4.496-9.585 10.042-9.585c5.546 0 10.042 4.29 10.042 9.584"
        fill="#a40"
      />
      <path
        d="M64.61 42.97c-.416 1.373-1.867 2.15-3.24 1.733-1.374-.417-2.15-1.868-1.733-3.24.416-1.375 1.867-2.15 3.24-1.734 1.374.415 2.15 1.866 1.733 3.24"
        fill="#f68351"
      />
      <path
        d="M67.643 48.25l.25 11.522 8.348-.466-1.703-16.96-6.894 5.904"
        fill="#f79467"
      />
      <path
        d="M67.744 51.775s3.723-.384 3.884-4.622l-3.95 2.09.066 2.532"
        fill="#25101f"
      />
      <path
        d="M62.772 32.942c-.656.554-1.073 1.332-1.24 2.17-.498 2.487-1.474 6.867-.595 9.506 1.145 3.432 3.932 5.866 8.435 5.01 0 0 5.397-.546 6.507-7.38 1.768-10.893-7.495-14.05-13.108-9.306"
        fill="#f79467"
      />
      <path
        d="M62.48 40.39c-.083.318-.408.508-.726.424-.317-.083-.507-.408-.423-.726.084-.317.41-.507.727-.424.317.084.507.41.424.727M67.506 40.49c-.084.32-.41.51-.726.425-.318-.083-.508-.408-.424-.726.083-.32.408-.508.726-.425.318.084.508.41.424.726M63.752 41.862l-.414 1.13-.12-.044.125.027-.004.03c0 .065.042.123.106.14l-.034.123.024-.125.64.118c.07.014.116.08.103.15-.014.07-.08.116-.15.103l-.64-.12h-.01c-.18-.05-.297-.21-.297-.387 0-.028.003-.057.01-.086l.004-.016.416-1.13c.024-.066.097-.1.164-.076.066.025.1.098.075.164M67.953 35.72s-1.843-.327-1.94.52c0 0-.054.576 1.558.825 1.613.25 2.257.21 2.456-.32.2-.527-1.2-.948-2.073-1.026M61.232 35.75s1.606-.35 1.837.46c0 0 .143.555-1.268.822-1.028.195-1.41.018-1.516-.354-.124-.44.34-.848.946-.93"
        fill="#25101f"
      />
      <path
        d="M62.744 44.302l4.56.052s-.094 1.97-2.205 1.97c-2.1 0-2.356-2.022-2.356-2.022"
        fill="#190f0d"
      />
      <g
        clip-path="url(#a)"
        transform="rotate(179.387 81.446 61.295) scale(.02863)"
      >
        <path
          d="M3332.91 2619.58c12.93-28.16 46.25-40.52 74.42-27.59 28.17 12.94 40.53 46.26 27.59 74.43-12.93 28.17-46.25 40.52-74.42 27.59-28.17-12.94-40.52-46.26-27.59-74.43"
          fill="#e057b3"
        />
        <path
          d="M3508.8 2713.02l-180.81.27v30.57l180.81 6.63v-37.47"
          fill="#fff"
        />
      </g>
      <path
        d="M67.924 43.42h.036c1.743-.02 3.14-1.48 3.118-3.26-.015-1.335-.822-2.47-1.96-2.948h-.1c-.36 0-.834-.052-1.447-.147-.08-.012-.155-.025-.228-.04-1.48.28-2.593 1.616-2.575 3.208.02 1.77 1.43 3.188 3.157 3.188m-.994-3.675c.05 0 .1.007.152.02.318.084.508.41.424.726-.07.268-.31.445-.575.445-.05 0-.1-.006-.15-.02-.318-.083-.508-.408-.424-.726.07-.268.31-.445.574-.445"
        fill="#f89e75"
      />
      <path
        d="M66.93 40.935c.265 0 .506-.177.576-.444.084-.316-.106-.64-.424-.725-.05-.013-.102-.02-.152-.02-.263 0-.504.177-.574.444-.084.317.106.642.424.725.05.014.1.02.15.02M69.02 37.213h.098c-.37-.156-.773-.24-1.196-.24h-.036c-.186 0-.367.02-.544.053.073.014.15.027.23.04.612.094 1.085.147 1.447.147"
        fill="#3c2537"
      />
      <path
        d="M59.742 43.257c-.24-.547-.292-1.18-.105-1.795.183-.604.566-1.093 1.055-1.415.1-.952.253-1.903.414-2.78-.222-.07-.456-.105-.697-.105h-.03c-1.493.017-2.688 1.418-2.668 3.128.016 1.43.876 2.624 2.03 2.967"
        fill="#f9b0ad"
      />
      <path
        d="M60.424 43.356h.028c.07 0 .14-.005.21-.012-.127-1.012-.088-2.154.03-3.297-.49.322-.872.81-1.055 1.415-.187.616-.134 1.248.105 1.795.218.065.447.1.682.1"
        fill="#f78e5f"
      />
      <path
        d="M60.66 43.344c1.396-.138 2.48-1.486 2.46-3.116-.016-1.423-.868-2.612-2.014-2.962-.16.878-.315 1.83-.414 2.78-.118 1.144-.157 2.286-.03 3.298m1.243-3.7c.05 0 .1.007.152.02.317.084.507.41.424.727-.07.267-.31.444-.574.444-.05 0-.1-.006-.152-.02-.317-.083-.507-.408-.423-.726.07-.267.312-.443.575-.443"
        fill="#f89e75"
      />
      <path
        d="M61.906 40.834c.264 0 .504-.177.575-.443.084-.317-.106-.642-.423-.726-.05-.013-.102-.02-.152-.02-.263 0-.504.177-.574.444-.083.318.107.643.424.726.05.014.102.02.152.02"
        fill="#3c2537"
      />
      <path
        d="M64.767 40.233l.18-.002c.02 1.673 1.352 3.012 2.977 3.01h.034c1.628-.017 2.94-1.374 2.94-3.04v-.038c-.02-1.672-1.352-3.01-2.976-3.01h-.034c-1.628.018-2.94 1.375-2.94 3.042v.037l-.18.003-.18.002-.002-.04c0-1.86 1.466-3.382 3.298-3.404h.038c1.828 0 3.316 1.503 3.337 3.368v.04c0 1.86-1.466 3.382-3.298 3.404h-.038c-1.83 0-3.316-1.502-3.337-3.367l.18-.002M57.712 40.29l.18-.002c.01.808.303 1.533.763 2.053.462.522 1.085.836 1.77.836h.025c.684-.01 1.302-.33 1.756-.853.452-.524.735-1.25.735-2.053v-.04c-.01-.807-.302-1.532-.762-2.053-.462-.52-1.086-.834-1.77-.834h-.025c-.684.008-1.302.328-1.756.853-.452.523-.735 1.25-.735 2.053v.04-.002l-.18.002-.18.002v-.043c0-.89.31-1.698.822-2.29.51-.592 1.228-.97 2.025-.978h.03c.796 0 1.518.37 2.038.956.52.588.843 1.396.853 2.288l.002.044c0 .888-.312 1.696-.823 2.29-.512.59-1.23.967-2.026.976h-.03c-.797 0-1.52-.368-2.04-.956s-.842-1.395-.852-2.288l.18-.002"
        fill="#483737"
      />
      <path
        d="M64.632 40.353l.052-.046-.05.046h-.002l.052-.046-.05.046c-.003-.002-.075-.08-.194-.153-.12-.074-.284-.143-.478-.143-.2 0-.438.07-.725.31-.076.063-.19.053-.254-.023s-.055-.19.02-.254c.34-.286.672-.394.96-.394.29 0 .523.105.682.206.16.102.25.203.257.21.066.076.06.19-.015.256s-.19.06-.255-.015M71.143 39.992l2.82 1.072c.093.036.14.14.105.233-.036.093-.14.14-.233.104l-2.82-1.07c-.094-.037-.14-.14-.105-.234.035-.093.14-.14.233-.104"
        fill="#483737"
      />
      <path
        d="M75.224 40.507c-.428.18-8.293-4.553-4.303-9.704 0 0 5.983 1.405 5.64 9.7l-1.336.004"
        fill="#a40"
      />
      <path
        d="M70.28 32.697s-5.294-1.29-8.374 1.347c0 0 1.492-4.766 8.772-5.01l2.74 6.095-3.138-2.433M82.838 29.035c0 2.227-1.806 4.034-4.034 4.034-2.23 0-4.035-1.808-4.035-4.035 0-2.23 1.805-4.035 4.034-4.035 2.228 0 4.034 1.806 4.034 4.035M73.574 37.8l.514 5.437 1.876-4.978z"
        fill="#a40"
      />
      <path
        d="M79.747 43.78c-.505 1.668-2.266 2.61-3.933 2.104-1.667-.505-2.608-2.266-2.103-3.932.506-1.667 2.266-2.61 3.934-2.104 1.666.505 2.608 2.266 2.103 3.933"
        fill="#f79467"
      />
      <path
        d="M78.116 42.068l-.01-.003c-.05-.013-.29-.07-.61-.07-.35 0-.79.07-1.188.33-.397.264-.762.72-.96 1.53-.016.07-.085.11-.154.094-.068-.017-.11-.086-.094-.155.207-.86.613-1.384 1.067-1.683.455-.3.948-.373 1.33-.373.4 0 .682.08.69.082.067.02.107.09.087.158-.02.068-.09.107-.158.088"
        fill="#25101f"
      />
      <path
        d="M60.266 61.224s-4.506 2.67-4.506 9.61V90.73c0 2.47 1.793 4.576 4.232 4.972 3.05.493 5.82-1.85 5.84-4.938l.18-26.212-5.746-3.328"
        fill="#d40055"
      />
      <path
        d="M62.975 101.138l-4.213-.014-1-6.357c2.112 1.552 6.025.83 7.062-1.578.862-2.003-.144-3.813-2.104-4.764l.255 12.712"
        fill="#f79467"
      />
      <path
        d="M79.883 58.31s8.232 1.79 11.384 9.456c3.153 7.666.964 34.012.964 34.012s-15.588 7.66-29.255-.64l-2.71-39.914s3.057-2.197 5.55-3.608l14.068.695"
        fill="#d40055"
      />
      <path
        d="M73.574 55.863s2.307.515 6.31 2.448c0 0-5.985 4.65-10.715 10.243 0 0-3.68-3.78-3.356-10.937l4.673-1.753h3.087"
        fill="#f79467"
      />
      <path
        d="M61.128 70.506l1.136 17.04c.01.134-.092.25-.227.258-.134.01-.25-.092-.258-.226l-1.137-17.04c-.01-.134.092-.25.227-.26.134-.008.25.094.258.228"
        fill="#800033"
      />
      <path
        d="M72.12 82.846l-13.966-10.11s-.398-3.637-1.332-4.787c-1.255-1.544-4.213-3.685-4.876-3.577-.664.108-.77.44-.65 1.075.482.91 1.282 1.655 2.537 2.226 0 0-.42.514-2.267-.43-1.848-.942-6.465-3.918-6.88-3.582-.256.207-.595.63-.057 1.185-.88-.292-1.053-.118-1.236.325-.136.33 0 .775.64 1.113-.453.094-.53.318-.445.8.1.564 1.248 1.076 1.52 1.402-.555-.01-.4.62-.278.76 1.195 1.36 4.692 4.473 6.616 5.298 1.924.824 4.105 1.392 4.105 1.392L68.22 88.932s1.99-1.214 2.835-2.87c.843-1.654 1.064-3.216 1.064-3.216"
        fill="#f79467"
      />
    </svg>
  );
}

function P4() {
  return (
    <svg viewBox="0 0 100 120" height="240" width="200">
      <path
        d="M19.074 99.06s9.547 1.922 17.355-1.887l2.6-32.767-9.286-9.448-9.188-1.952-5.06 18.422 3.578 27.63"
        fill="#f9fafc"
      />
      <path
        d="M20.556 53.006s1.33 32.712.98 48.907l-7.07-.84c-3.753-.445-6.544-3.68-6.434-7.458l.73-25.188.803-10.89c.07-.94.666-1.764 1.543-2.116 1.868-.75 5.38-1.966 9.448-2.414"
        fill="#f78f28"
      />
      <path
        d="M-3.662 88.948l-2.53 4.436s-4.97.312-9.547 2.473c-.246.117-.385.387-.343.657.058.37.43.602.787.494l3.412-1.03s-3.36 1.36-5.927 2.866c-.347.202-.487.632-.32.995.173.37.602.543.982.395l5.516-2.142-5.15 2.845c-.404.222-.558.725-.35 1.136.212.413.715.583 1.134.38l4.987-2.406-3.888 2.73c-.507.357-.565 1.085-.122 1.518.333.325.848.372 1.236.115 1.53-1.008 5.384-3.368 7.886-3.3 0 0-.608.957-1.65 1.963-.503.486-.457 1.305.11 1.715.383.278.9.283 1.288.014l2.938-2.03c.56-.386.963-.957 1.144-1.612l.976-3.548 4.26-4.03-6.83-4.634"
        fill="#f57e4a"
      />
      <path
        d="M11.484 55.273s-1.364-.078-5.83 5.65c-4.6 5.895-12.59 32.212-12.59 32.212L1.09 99.23l13.628-29.664-3.234-14.293"
        fill="#f78f28"
      />
      <path
        d="M8.685 83.247l4.747-10.332c.052-.115.002-.25-.113-.303-.116-.053-.252-.003-.304.112L8.27 83.056c-.054.114-.003.25.112.303.114.052.25 0 .303-.113"
        fill="#e4691a"
      />
      <path
        d="M36.683 55.74s7.038 2.195 9.687 28.16l-5.717 4.05-3.97-32.21"
        fill="#f78f28"
      />
      <path
        d="M60.573 74.698s-2.57-1.98-.18-5.29l3.584-5.166c.327-.452.976-.516 1.385-.137.278.258.37.658.236 1.012l-1.105 3.06 6.797-4.603c.498-.368 1.208-.203 1.493.347.22.428.11.95-.265 1.25l-4.377 3.397.086.268 5.024-2.862c.556-.255 1.206.06 1.348.656.108.45-.117.91-.536 1.105l-4.852 3.11.07.34 4.735-2.028c1.172-.562 1.537-.012 1.653.422.107.404-.774.955-1.172 1.087L69.6 73.143l.052.316 4.54-1.744c.443-.06.828.3.795.745-.024.32-.26.58-.574.637l-5.18 2.207s-4.733 3.23-6.878 1.407L60.573 74.7"
        fill="#f57e4a"
      />
      <path
        d="M64.31 68.278l.005.01c.055.1.547 1.058.546 2.267 0 .788-.202 1.68-.863 2.54-.07.092-.053.223.04.293.09.07.222.054.292-.038.722-.94.95-1.936.95-2.795-.003-1.41-.596-2.464-.604-2.48-.057-.102-.184-.138-.285-.082-.1.057-.136.184-.08.285"
        fill="#f3672e"
      />
      <path
        d="M37.784 79.907l19.712-7.97 3.945 8.54-17.204 11.366c-2.695 1.622-6.185.883-7.992-1.69-2.07-2.95-1.64-8.557 1.54-10.246"
        fill="#f78f28"
      />
      <path
        d="M45.235 76.647l-2.394.968c-.116.047-.172.18-.125.298.047.117.18.173.298.126l2.393-.97c.118-.046.174-.18.127-.296-.048-.118-.18-.174-.298-.127"
        fill="#e4691a"
      />
      <path
        d="M29.744 54.958s2.28 2.672 3.21 14.21c.933 11.537 1.245 31.263 1.245 31.263 4.02-.822 6.867-4.417 6.742-8.52-.26-8.543-.875-22.465-2.218-28.352l-1.253-6.39c-.068-.304-.362-1.213-.362-1.213s-1.01-.92-7.28-2.357l-.084 1.36"
        fill="#f78f28"
      />
      <path
        d="M41.158 92.702v-.164c0-1.738-.053-16.922-1.903-28.17-.02-.124-.138-.208-.263-.188-.125.02-.21.138-.188.263 1.842 11.19 1.897 26.37 1.896 28.095v.163c0 .127.102.23.228.23s.23-.102.23-.228"
        fill="#e4691a"
      />
      <path
        d="M19.876 41.703s-2.246 3.63 1.052 3.52c0 0 1.376-1.134 1.066-3.262l-2.118-.257M39.48 31.583c-.072-.69-.28-1.415-.685-2.163-4.748-8.777-15.075-1.772-15.075-1.772l1.81 6.15c4.304-2.604 9.426-3.667 13.95-2.215"
        fill="#7d2923"
      />
      <path
        d="M25.53 33.8l2.017 7.978s12.627-3.626 11.934-10.195c-4.524-1.452-9.005-2.07-13.95 2.216"
        fill="#6e1e1c"
      />
      <path
        d="M31.542 40.84c.36 1.384 1.774 2.213 3.158 1.852 1.383-.36 2.213-1.775 1.852-3.158-.36-1.384-1.775-2.213-3.16-1.852-1.382.36-2.21 1.775-1.85 3.158"
        fill="#f46d34"
      />
      <path
        d="M29.324 46.357l.477 7.692c-.195 3.112-4.01 4.492-6.153 2.226l-3.09-3.27.918-13.422 7.85 6.773"
        fill="#f57e4a"
      />
      <path
        d="M29.56 50.152s-5.034-.215-5.41-5.29l5.174 1.495.235 3.795"
        fill="#25101f"
      />
      <path
        d="M34.614 29.707s1.65 10.5.36 13.806c-1.29 3.306-4.157 5.33-8.595 4.35 0 0-5.177-.403-6.115-7.92-1.412-11.313 9.24-16.388 14.35-10.236"
        fill="#f57e4a"
      />
      <path
        d="M33.752 38.367c.07.32.387.52.707.45.318-.07.52-.387.45-.706-.072-.318-.388-.52-.708-.45-.32.07-.52.387-.45.707M28.746 38.27c.07.32.387.522.706.45.32-.07.52-.386.45-.705-.07-.32-.387-.52-.706-.45-.32.07-.52.387-.45.706"
        fill="#0e0e0e"
      />
      <path
        d="M32.544 38.834l.54 1.922-.863.43c-.062.032-.088.11-.056.173.03.062.11.088.172.057l.96-.478c.054-.03.08-.092.065-.15l-.568-2.025c-.02-.07-.09-.11-.16-.09-.067.02-.107.09-.088.16"
        fill="#25101f"
      />
      <path
        d="M28.354 34.044s1.84-.446 1.972.55c0 0 .075.676-1.536 1.024-1.61.347-2.26.32-2.48-.296-.22-.615 1.17-1.157 2.044-1.278M35.24 33.91s-1.715-.425-1.9.55c0 0-.113.667 1.39.992 1.096.236 1.486.024 1.57-.423.098-.53-.416-1.022-1.06-1.12"
        fill="#190f0d"
      />
      <path
        d="M29.432 42.17l3.434.252s-.034 1.342-1.784 1.223c-1.75-.118-1.65-1.476-1.65-1.476"
        fill="#fff"
      />
      <path
        d="M22.862 39.273l.505-3.822s3.027-.962 3.75-6.682c0 0-1.27-2.632-5.15-1.428-3.88 1.204-7.25 4.01-2.995 11.056l3.89.877"
        fill="#7d2923"
      />
      <path
        d="M16.78 40.858c.44 1.68 2.155 2.685 3.834 2.247 1.68-.437 2.685-2.154 2.248-3.832-.438-1.68-2.154-2.686-3.833-2.248-1.68.438-2.686 2.154-2.25 3.833"
        fill="#f57e4a"
      />
      <path
        d="M18.472 39.218l.008-.002c.04-.01.236-.05.505-.05.345 0 .805.067 1.215.337.41.27.782.743.956 1.6.014.07.082.116.15.102.07-.014.116-.082.102-.152-.18-.91-.597-1.457-1.067-1.765-.468-.308-.98-.378-1.355-.378-.336 0-.567.056-.574.058-.068.017-.11.086-.093.155.016.07.086.11.155.095"
        fill="#25101f"
      />
      <path
        d="M27.117 28.768s3.83-.62 7.643 1.806l-.803-3.396-5.026-.696-4.795 1.806 1.183.112 1.8.368"
        fill="#7d2923"
      />
      <path
        d="M34.76 30.574s5.79.015 5.812 4.232c0 .09.13.1.145.013.27-1.568-.02-5.855-6.41-5.355l.453 1.11"
        fill="#7d2923"
      />
      <path
        d="M58.042 73.383l1.55-1.033 3.688 3.91-2.582 2.877z"
        fill="#f57e4a"
      />
    </svg>
  );
}

function App() {
  const [{ x }, set] = useSpring(() => ({
    x: 0,
  }));
  const bind = useDrag(
    ({ movement: [x], down }) => {
      if (!down) {
        if (x > -100) {
          set({ x: 0 });
        } else if (x < -500) {
          set({ x: -600 });
        } else if (x < -300) {
          set({ x: -400 });
        } else {
          set({ x: -200 });
        }
        return;
      }
      set({ x });
    },
    {
      initial: () => [x.get(), 0],
      bounds: { left: -600, right: 0, top: 0, bottom: 476 },
      rubberband: true,
    }
  );
  return (
    <div className="App">
      <div className="container" {...bind()}>
        <div className="title">
          <div className="title1">Triolingo</div>
          <div className="title2">Learn a third language</div>
        </div>
        <animated.div
          className="person person1"
          style={{ transform: x.to((x) => `rotate(${x / 10}deg)`) }}
        >
          <P1 />
        </animated.div>
        <animated.div
          className="person person2"
          style={{ transform: x.to((x) => `rotate(${x / 10 + 20}deg)`) }}
        >
          <P2 />
        </animated.div>
        <animated.div
          className="person person3"
          style={{ transform: x.to((x) => `rotate(${x / 10 + 40}deg)`) }}
        >
          <P3 />
        </animated.div>
        <animated.div
          className="person person4"
          style={{ transform: x.to((x) => `rotate(${x / 10 + 60}deg)`) }}
        >
          <P4 />
        </animated.div>
        <svg className="blob" width="200" height="240" viewBox="0 0 100 120">
          <animated.path
            d={x.to({
              range: [-600, -400, -200, 0],
              output: [
                "M 89.342,41.688263 C 89.298065,42.432878 88.795,43.97439 88.795,43.97439 88.795,43.97439 87.49838,51.9557 81.067808,54.882258 74.637236,57.808816 66.495088,58.13999 59.0423,55.087995 51.589513,52.036001 49.365228,44.695751 49.365228,44.695751 49.365228,44.695751 46.224355,46.82198 41.475286,42.907631 47.226432,43.829996 50.003497,40.465068 50.003497,40.465068 50.003497,40.465068 50.053136,34.214128 56.562615,28.752824 63.072094,23.29152 77.556849,22.589238 83.593873,28.388761 89.630897,34.188284 89.094,39.577982 89.094,39.577982 89.094,39.577982 89.385935,40.943648 89.342,41.688263 Z",
                "M 54.557103,44.075882 C 49.786507,47.162129 45.463,42.945 45.463,42.945 45.463,42.945 44.243534,47.047254 38.416835,51.163964 32.590136,55.280674 19.757038,56.317344 15.0518,51.624911 10.346562,46.932478 10.692,40.944 10.692,40.944 10.692,40.944 10.860409,38.301127 11.092,36.948936 11.323591,35.596745 12.092,32.853 12.092,32.853 12.092,32.853 13.041401,26.705916 20.143693,24.2394 27.245986,21.772883 36.167733,22.230324 41.34052,27.83646 46.513307,33.442596 46.562,37.748282 46.562,37.748282 46.562,37.748282 48.620255,42.521322 54.557103,44.075882 Z",
                "M 95.831,41.999926 C 95.782425,42.733378 95.584,44.286053 95.584,44.286053 95.584,44.286053 96.578109,53.540644 88.819549,56.773 81.060989,60.005356 68.81591,60.045536 62.61403,56.790117 56.41215,53.534699 55.637317,46.053 55.637317,46.053 55.637317,46.053 52.903897,48.644501 46.81368,43.265233 53.190207,44.734054 55.431,41.445133 55.431,41.445133 55.431,41.445133 55.367885,32.257856 61.612783,29.110426 67.857681,25.962996 83.778709,26.611268 89.729,29.573221 95.679291,32.535174 95.883,39.889645 95.883,39.889645 95.883,39.889645 95.879575,41.266474 95.831,41.999926 Z",
                "M 53.623408,41.586029 C 47.75092,46.616849 44.763419,42.445 44.763419,42.445 44.763419,42.445 44.403966,47.987178 38.571906,51.958007 32.739846,55.928836 17.256116,55.562 12.595934,50.935871 7.9357524,46.309742 7.892,41.061909 7.892,41.061909 7.892,41.061909 7.3963523,38.202196 7.292,36.667135 7.1876477,35.132074 7.2916991,31.871054 7.2916991,31.871054 7.2916991,31.871054 7.4698218,27.067216 13.588895,22.962 19.707968,18.856784 36.789652,18.952925 41.962439,24.559061 47.135226,30.165197 45.162,37.748282 45.162,37.748282 45.162,37.748282 47.535567,42.803005 53.623408,41.586029 Z",
              ],
            })}
            style={{
              fill: x.to({
                range: [-400, -200, 0],
                output: ["#fff", "#fff", "#fff"],
              }),
            }}
          />
        </svg>
        <animated.svg
          style={{
            opacity: x.to({
              range: [-600, -30, 0],
              output: [0, 0, 1],
            }),
            x: x.to({
              range: [-600, -200, 0],
              output: [100, 100, 0],
            }),
            y: x.to({
              range: [-600, -200, 0],
              output: [12, 12, 0],
            }),
          }}
          viewBox="0 0 100 120"
          height="240"
          width="200"
          className="blob"
        >
          <path d="M16.342 31.918c-.667 1.893-1.827 3.786-3.027 4.986.267.387.707 1.254.854 1.654.292-.32.6-.68.892-1.08v6.813h1.52V35.12c.493-.88.92-1.814 1.267-2.734zm2.467 5.88c-.308 1.48-.868 2.986-1.628 3.92.387.2 1.053.6 1.36.853.747-1.08 1.427-2.76 1.813-4.452zm5.545-2.08c-.066.586-.146 1.146-.213 1.56l1.347.226c.185-.773.412-2.013.572-3.093l-1.12-.212-.253.053H20.1c.24-.652.453-1.306.627-1.986l-1.548-.346c-.453 1.826-1.253 3.666-2.267 4.8.36.24 1 .76 1.28 1.04.44-.56.88-1.267 1.254-2.04h1.545v6.8c0 .173-.066.226-.24.226-.186 0-.746 0-1.306-.013.24.428.48 1.134.545 1.6.854 0 1.494-.066 1.96-.32.48-.266.614-.706.614-1.466v-6.826zm-1.306 2.426c.64 1.374 1.2 3.2 1.345 4.387l1.52-.52c-.186-1.2-.76-2.972-1.453-4.346zM30.782 35.958c-.16 1.293-.467 2.44-.88 3.426l-1.08-.84c.213-.786.427-1.68.6-2.586zm.68-1.494l-.28.04h-1.467c.16-.866.294-1.706.4-2.493l-1.573-.12c-.08.814-.2 1.708-.36 2.614h-1.227v1.454h.947c-.24 1.186-.52 2.293-.8 3.16.667.493 1.387 1.093 2.067 1.693-.64 1-1.455 1.748-2.44 2.24.332.294.772.868.985 1.254 1.04-.613 1.907-1.4 2.614-2.413.492.494.932.988 1.225 1.414l1.04-1.36c-.346-.453-.853-.973-1.466-1.52.68-1.506 1.105-3.4 1.305-5.746zm7.92 2.88h-2.667v-1c.947-.88 1.827-2 2.454-2.973L38.1 32.6l-.373.08H32.78v1.44h3.907c-.468.706-1.055 1.453-1.628 1.96v1.266H32.25v1.507h2.812v3.72c0 .2-.067.254-.293.254-.215 0-.988 0-1.668-.013.227.414.467 1.068.547 1.508 1.04.013 1.8-.027 2.332-.254.56-.253.733-.653.733-1.466V38.85h2.667z" />
        </animated.svg>
        <animated.svg
          style={{
            opacity: x.to({
              range: [-600, -230, -200, -170],
              output: [0, 0, 1, 0],
            }),
            x: x.to({
              range: [-600, -400, -200, 0],
              output: [-95, -95, 0, -95],
            }),
            y: x.to({
              range: [-600, -400, -200, 0],
              output: [-8, -8, 0, -8],
            }),
          }}
          viewBox="0 0 100 120"
          height="240"
          width="200"
          className="blob"
        >
          <path d="M 60.564004,48.866998 H 62.316004 L 62.184004,42.854998 H 60.696004 Z M 61.440004,40.310998 C 60.864004,40.310998 60.420004,40.766998 60.420004,41.318998 60.420004,41.882998 60.864004,42.350998 61.440004,42.350998 62.016004,42.350998 62.460004,41.882998 62.460004,41.318998 62.460004,40.766998 62.016004,40.310998 61.440004,40.310998 Z" />
          <path d="M 64.007629,47.030998 H 65.699629 V 43.562998 H 69.191629 V 47.030998 H 70.883629 V 38.630998 H 69.191629 V 42.038998 H 65.699629 V 38.630998 H 64.007629 Z" />
          <path d="M 71.988004,43.910998 C 71.988004,45.806998 73.404004,47.186998 75.360004,47.186998 77.328004,47.186998 78.744004,45.806998 78.744004,43.910998 78.744004,42.014998 77.280004,40.598998 75.360004,40.598998 73.452004,40.598998 71.988004,42.002998 71.988004,43.910998 Z M 73.644004,43.910998 C 73.644004,42.830998 74.364004,42.062998 75.360004,42.062998 76.356004,42.062998 77.088004,42.842998 77.088004,43.910998 77.088004,44.978998 76.356004,45.722998 75.360004,45.722998 74.376004,45.722998 73.644004,44.978998 73.644004,43.910998 Z" />
          <path d="M 79.695379,47.030998 H 81.351379 V 38.354998 H 79.695379 Z" />
          <path d="M 82.288504,45.086998 C 82.288504,46.406998 83.368504,47.186998 84.640504,47.186998 85.360504,47.186998 85.840504,46.970998 86.164504,46.622998 L 86.272504,47.030998 H 87.736504 V 43.058998 C 87.736504,41.654998 87.136504,40.598998 85.120504,40.598998 84.160504,40.598998 83.212504,40.958998 82.648504,41.342998 L 83.272504,42.470998 C 83.740504,42.230998 84.316504,42.026998 84.940504,42.026998 85.672504,42.026998 86.080504,42.398998 86.080504,42.950998 V 43.358998 C 85.852504,43.202998 85.360504,43.010998 84.724504,43.010998 83.260504,43.010998 82.288504,43.850998 82.288504,45.086998 Z M 83.944504,45.038998 C 83.944504,44.522998 84.388504,44.162998 85.024504,44.162998 85.660504,44.162998 86.116504,44.486998 86.116504,45.038998 86.116504,45.566998 85.660504,45.902998 85.036504,45.902998 84.412504,45.902998 83.944504,45.554998 83.944504,45.038998 Z" />
          <path d="M 89.313191,44.642998 H 90.801191 L 90.933191,38.630998 H 89.181191 Z M 90.057191,47.186998 C 90.633191,47.186998 91.077191,46.730998 91.077191,46.178998 91.077191,45.614998 90.633191,45.146998 90.057191,45.146998 89.481191,45.146998 89.037191,45.614998 89.037191,46.178998 89.037191,46.730998 89.481191,47.186998 90.057191,47.186998 Z" />
        </animated.svg>
        <animated.svg
          style={{
            opacity: x.to({
              range: [-600, -430, -400, -370],
              output: [0, 0, 1, 0],
            }),
            x: x.to({
              range: [-600, -400, -200, 0],
              output: [84, 0, 90, 0],
            }),
            y: x.to({
              range: [-600, -400, -200, 0],
              output: [5, 0, 5, 0],
            }),
          }}
          viewBox="0 0 100 120"
          height="240"
          width="200"
          className="blob"
        >
          <path d="M 20.394954,43.881969 H 22.274949 V 40.028646 H 26.154939 V 43.881969 H 28.034934 V 34.54866 H 26.154939 V 38.335317 H 22.274949 V 34.54866 H 20.394954 Z" />
          <path d="M 29.64868,43.881969 H 31.488675 V 36.908654 H 29.64868 Z M 29.48868,35.228658 C 29.48868,35.828656 29.955346,36.281989 30.555344,36.281989 31.168676,36.281989 31.635342,35.828656 31.635342,35.228658 31.635342,34.62866 31.168676,34.175327 30.555344,34.175327 29.955346,34.175327 29.48868,34.62866 29.48868,35.228658 Z" />
          <path d="M 33.32992,41.228643 H 34.983249 L 35.129916,34.54866 H 33.183254 Z M 34.156585,44.055302 C 34.796583,44.055302 35.289915,43.548637 35.289915,42.935305 35.289915,42.30864 34.796583,41.788641 34.156585,41.788641 33.516586,41.788641 33.023254,42.30864 33.023254,42.935305 33.023254,43.548637 33.516586,44.055302 34.156585,44.055302 Z" />{" "}
        </animated.svg>
        <animated.svg
          style={{
            opacity: x.to({
              range: [-600, -570],
              output: [1, 0],
            }),
            x: x.to({
              range: [-600, -400, -200],
              output: [0, -90, 0],
            }),
            y: x.to({
              range: [-600, -400, -200],
              output: [0, -5, 0],
            }),
          }}
          viewBox="0 0 100 120"
          height="240"
          width="200"
          className="blob"
        >
          <path d="M 58.541997,45.641666 H 60.421993 V 41.788343 H 64.301983 V 45.641666 H 66.181978 V 36.308357 H 64.301983 V 40.095014 H 60.421993 V 36.308357 H 58.541997 Z" />
          <path d="M 67.422391,42.175009 C 67.422391,44.268337 68.849054,45.814999 71.089049,45.814999 72.822378,45.814999 73.755709,44.775002 74.022375,44.28167 L 72.809044,43.361672 C 72.609045,43.655005 72.06238,44.215003 71.115715,44.215003 70.089051,44.215003 69.342386,43.548338 69.302386,42.615007 H 74.209041 C 74.222374,42.481674 74.222374,42.348341 74.222374,42.215008 74.222374,39.935014 72.99571,38.495018 70.835716,38.495018 68.849054,38.495018 67.422391,40.068347 67.422391,42.175009 Z M 69.35572,41.41501 C 69.435719,40.615012 69.995718,40.001681 70.862383,40.001681 71.70238,40.001681 72.315712,40.561679 72.355712,41.41501 Z" />
          <path d="M 75.243622,45.655 C 75.243622,46.281665 74.95029,46.628331 74.283625,46.628331 74.150292,46.628331 73.963626,46.601664 73.963626,46.601664 V 48.16166 C 73.963626,48.16166 74.203625,48.188327 74.416958,48.188327 75.923621,48.188327 77.083618,47.574995 77.083618,45.735 V 38.668351 H 75.243622 Z M 75.083623,36.988355 C 75.083623,37.588353 75.550288,38.041686 76.150287,38.041686 76.763619,38.041686 77.230284,37.588353 77.230284,36.988355 77.230284,36.388356 76.763619,35.935024 76.150287,35.935024 75.550288,35.935024 75.083623,36.388356 75.083623,36.988355 Z" />
          <path d="M 78.924862,42.98834 H 80.578191 L 80.724857,36.308357 H 78.778196 Z M 79.751527,45.814999 C 80.391525,45.814999 80.884857,45.308334 80.884857,44.695002 80.884857,44.068337 80.391525,43.548338 79.751527,43.548338 79.111528,43.548338 78.618196,44.068337 78.618196,44.695002 78.618196,45.308334 79.111528,45.814999 79.751527,45.814999 Z" />
        </animated.svg>

        <div className="text">
          Demo of morphing talking bubble. Swipe sideways through illustrations
          above.
        </div>
        <div className="navDots">
          <animated.div
            className="navDot"
            style={{
              backgroundColor: x.to({
                range: [-600, -400, -200, 0],
                output: ["#fff", "#fff", "#fff", "#25101f"],
              }),
              transform: x.to({
                range: [-600, -400, -200, 0],
                output: ["scale(1)", "scale(1)", "scale(1)", "scale(1.4)"],
              }),
            }}
          ></animated.div>
          <animated.div
            className="navDot"
            style={{
              backgroundColor: x.to({
                range: [-600, -400, -200, 0],
                output: ["#fff", "#fff", "#2f5c9e", "#fff"],
              }),
              transform: x.to({
                range: [-600, -400, -200, 0],
                output: ["scale(1)", "scale(1)", "scale(1.4)", "scale(1)"],
              }),
            }}
          ></animated.div>
          <animated.div
            className="navDot"
            style={{
              backgroundColor: x.to({
                range: [-600, -400, -200, 0],
                output: ["#fff", "#d20d57", "#fff", "#fff"],
              }),
              transform: x.to({
                range: [-600, -400, -200, 0],
                output: ["scale(1)", "scale(1.4)", "scale(1)", "scale(1)"],
              }),
            }}
          ></animated.div>
          <animated.div
            className="navDot"
            style={{
              backgroundColor: x.to({
                range: [-600, -400, -200, 0],
                output: ["#f58f37", "#fff", "#fff", "#fff"],
              }),
              transform: x.to({
                range: [-600, -400, -200, 0],
                output: ["scale(1.4)", "scale(1)", "scale(1)", "scale(1)"],
              }),
            }}
          ></animated.div>
        </div>
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
!
999px

Console