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

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="content-wrapper">
  <div class="navbar">
    <div class="money container">
      <svg width="70" height="70" viewBox="0 0 187 187" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M120.383 73.123C120.573 68.1237 116.783 52.4302 94.7547 52.4302C59.9968 52.4303 61.3925 94.8227 94.7547 94.8227C128.117 94.8226 127.363 138.295 94.7547 138.295C68.6106 138.295 64.57 125.604 64.57 116.596" stroke="#DDB347" stroke-width="16" />
        <circle cx="93.5865" cy="93.4945" r="83.8334" stroke="#DD8F47" stroke-width="19" />
        <path d="M94.375 30.0293V49.583" stroke="#DDB347" stroke-width="21" />
        <path d="M94.375 139.947V159.5" stroke="#DDB347" stroke-width="21" />
      </svg>

    </div>
    <div class="bookmark container">
      <svg width="70" height="70" viewBox="0 0 155 185" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M63.154 152.233L9.85348 176.446C9.1914 176.747 8.43988 176.263 8.43988 175.536V43.4761C8.43988 39.6101 11.5739 36.4761 15.4399 36.4761H110.868C114.734 36.4761 117.868 39.6101 117.868 43.4761V175.529C117.868 176.258 117.113 176.742 116.451 176.438L63.7084 152.233" stroke="#73DC91" stroke-width="16" stroke-linecap="round" />
        <path d="M33.3929 8.39453H122.717C135.971 8.39453 146.717 19.1397 146.717 32.3945V157.394" stroke="#47CC6D" stroke-width="16" stroke-linecap="round" />
      </svg>

    </div>
    <div class="favorite container">
      <svg width="70" height="70" viewBox="0 0 171 155" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.4207 20.3395C-15.2615 57.1609 49.0133 118.839 85.2358 145.076C121.458 118.839 185.733 57.1609 153.051 20.3395C130.62 -4.93227 97.7638 15.1648 85.2358 32.5953C72.7077 15.1648 39.8516 -4.93227 17.4207 20.3395Z" stroke="#F15B76" stroke-width="16" stroke-linecap="round" />
      </svg>
    </div>
    <div class="cart container">
      <svg width="70" height="70" viewBox="0 0 135 170" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.55798 50.8779V154.076C8.55798 157.942 11.692 161.076 15.558 161.076H119.012C122.878 161.076 126.012 157.942 126.012 154.076V50.8779C126.012 47.0119 122.878 43.8779 119.012 43.8779H15.558C11.692 43.8779 8.55798 47.0119 8.55798 50.8779Z" stroke="#5397D6" stroke-width="16" stroke-linecap="round" />
        <path d="M41.3837 68.2407C41.3836 39.7745 37.5369 8.74414 66.5158 8.74414C95.4946 8.74414 91.6479 39.7745 91.6478 68.2407" stroke="#7ABDE2" stroke-width="16" stroke-linecap="round" />
      </svg>
    </div>
  </div>
</div>
              
            
!

CSS

              
                .container {
  display: inline-flex;
  background: #292632;
  border-radius: 100%;
  padding: 20px;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  max-width: 70px;
  min-height: 40px;
  max-height: 70px;
  aspect-ratio : 1 / 1;
}

.navbar{
  background: #292632;
  border-radius: 1em;
  padding: 10px 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: 4px 4px 0 #484259bd;
  max-width: 550px;
  min-width: 300px;
  margin: 20px;
}

.content-wrapper{
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

body{
  margin: 0;
  padding: 0;
  background: #f9cfff;
}
              
            
!

JS

              
                let body = document.querySelector('body');
let money = document.querySelector(".money");
let bookmark = document.querySelector(".bookmark");
let favorite = document.querySelector(".favorite");
let cart = document.querySelector(".cart");

// active item
let currentActive = null;

const changeBackground = target => {
  let color;
  
  switch(target){
    case '.money':
      color = '#f9e6c3';
      break;
    case '.bookmark':
      color = '#c3f9c9';
      break;
    case '.favorite':
      color = '#f9c3c3';
      break;
    case '.cart':
      color = '#c3ecf9';
      break;
    default:
      color = '#f9cfff';
      break;
  }
  
  anime({
    targets: 'body',
    backgroundColor: color,
    duration: 800,
    easing: 'easeOutSine'
  })
}

const animate = target => {
  const animation = anime({
  targets: `${target}>svg>path, ${target}>svg>circle`,
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  delay: function(el, i) { return i * 200 },
  duration: 500,
  direction: 'linear'  
});
}

// returns if the animation moved
const moveUp = target => {
  // lower active item and make this the current active
  if (currentActive != null){
    moveDown(currentActive);
  }
  currentActive = target;
  
  const animation = anime({
    targets: target,
    translateY: -55,
    duration: 400,
    direction: "linear"
  });
  
  // change background color
  changeBackground(target);

  //   return true if the animation played
  return animation.animations[0].currentValue != "-55px";
};

// returns if the animation moved
const moveDown = target => {
  const animation = anime({
    targets: target,
    translateY: 0,
    duration: 400,
    direction: "linear"
  });
  
  // empty current active item
  currentActive = null;
  
  // change background
  changeBackground();

  //   return true if the animation played
  return animation.animations[0].currentValue != "0px";
};

const handleAnimation = target => {
  moveUp(target) || moveDown(target);
  animate(target);
}


// Event Listeners

money.addEventListener("click", () => {
  handleAnimation(".money")
});

bookmark.addEventListener("click", () => {
  handleAnimation(".bookmark")
});

favorite.addEventListener("click", () => {
  handleAnimation(".favorite")
});

cart.addEventListener("click", () => {
  handleAnimation(".cart")
});
              
            
!
999px

Console