Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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">
  <svg viewBox="0 0 374 374" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
      <path d="M318.084 132.622C311.339 101.37 287.642 82 256.652 82C238.423 82 217.459 89.3248 197.954 102.509C191.574 106.904 182.642 106.904 176.079 102.672C155.298 88.9992 135.246 82 116.652 82C85.6626 82 61.9647 101.533 55.2199 133.111C44.2824 183.896 80.923 252.26 187.017 291C292.746 251.446 329.204 183.082 318.084 132.622Z" />
      <path d="M187.466 0C187.366 0 187.166 0 186.866 0C85.666 0 3.36603 82.3 3.36603 183.5C3.36603 224.8 17.466 264.9 43.266 297.2L16.566 359.3C14.366 364.4 16.766 370.3 21.766 372.4C23.566 373.2 25.566 373.4 27.466 373.1L125.366 355.9C144.966 363 165.566 366.6 186.366 366.5C287.566 366.5 369.866 284.2 369.866 183C370.066 82.1 288.366 0.1 187.466 0ZM192.966 269.8C188.966 271.3 184.666 271.3 180.666 269.8C149.066 257.1 124.466 238.3 109.466 215.4C95.966 194.7 90.766 171.4 94.866 149.9C100.466 121.4 121.866 102.3 148.266 102.3C160.966 102.3 173.866 106.5 186.766 114.7C199.366 106.5 212.466 102.3 225.066 102.3C251.866 102.3 272.866 120.9 278.466 149.6C286.066 188.8 262.666 241.3 192.966 269.8Z" />
    </g>
    <defs>
      <clipPath id="clip0">
        <rect width="373.232" height="373.232" fill="white" />
      </clipPath>
    </defs>
  </svg>

  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>

  <div class="message">
    <marquee>
      Honey we need to talk...
    </marquee>
  </div>
</div>

<div class="credits">
  <p>
    Inspired by
    <a target="_blank" href="https://dribbble.com/shots/6242469-Notification-Badge-III">Dribbble Shot</a>
  </p>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  line-height: 1.7;
  position: relative;
  height: 100vh;
  background-color: #ffc107;
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 40px;
  background-color: #ffffff;
  display: flex;
  transform-origin: left;
  box-shadow: 0px 5px 15px 2px #ffa000;

  svg {
    height: 90px;
    width: 90px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    fill: #1e88e5;
  }

  .dots {
    display: flex;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    .dot {
      width: 10px;
      height: 10px;
      background-color: rgb(255, 255, 255);
      border-radius: 1000px;
      margin-right: 6px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .message {
    width: 120px;
    height: 36px;
    background-color: #f44336;
    overflow: hidden;
    position: absolute;
    right: -10px;
    top: -10px;
    border-radius: 50px;
    display: flex;
    padding: 5px 0;
    flex-wrap: nowrap;
    box-shadow: 0px 5px 15px 2px #d32f2f62;
    marquee {
      color: white;
    }
  }
}

.credits {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: #423d36;
  font-weight: 500;

  p {
    a {
      font-weight: 600;
      text-decoration: none;
      color: #1f1d1a;
    }
  }
}

              
            
!

JS

              
                // Get all the dots from the document
      let dots = document.querySelectorAll(".dot");

      // We will be adding a delay of 0.2 between animation associated with each dot
      let delay = 0.2;

      // Function that will animate our dots. It takes the element and the delay.
      const animate = (el, delay) => {
        gsap.to(
          el,
          {
            ease: Linear.ease,
            translateY: -10, // Move the dot -30px on Y axis
            yoyo: true, // If true, playback will alternate forwards and backwards on each repeat
            repeat: -1, // how many times the animation should repeat (-1 is infinite)
            duration: 0.5, // the speed of the animation
            delay: delay, // time after which the animation starts
          },
          0
        );
      };

      // Iterate over each dot and run the animate method, and also increment the delay by '.2s'.
      dots.forEach((dot) => {
        animate(dot, delay);
        delay += 0.2;
      });
              
            
!
999px

Console