Animated Curved Header using SVG And CSS

This code creates a visually appealing animated curved header for your webpage. It utilizes SVG and CSS to achieve this effect. As you scroll down the page, the header’s curve changes dynamically, giving your website an engaging visual element. This code is helpful for enhancing your website’s aesthetics and making it more engaging to users.

It adds a unique design element that can captivate visitors. You can use this code on your website’s homepage or landing page to create an eye-catching and interactive header.

How to Create Animated Curved Header Using Svg And CSS

1. Start by creating the basic HTML structure for your webpage. Here’s a simplified example:

Inside the <div class="svg-container">, insert an SVG element with a curved path. You can adjust the path’s shape and color as needed.

<div class="svg-container">
    <svg viewbox="0 0 800 400" class="svg">
      <path id="curve" fill="#4e5ea6" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
      </path>
    </svg>
  </div>

  <header class="curved-header">
    <h1>Animated Curved Header</h1>
    <h3>Here you are, scroll down.</h3>
  </header>

  <main>
    <p>And the main section.</p>
  </main>

2. Now, let’s style our webpage using CSS. You can either link an external CSS file or include it internally in your HTML. Here’s a sample CSS code:

@import 'https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700';
*, *:after, *:before {
  margin: 0;
  padding: 0;
}
.cd__main{
  position: relative;
  display: block !important;
}
.svg-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

svg path {
  transition: 0.1s;
}
svg:hover path {
  d: path("M 800 300 Q 400 250 0 300 L 0 0 L 800 0 L 800 300 Z");
}

body {
  background: #fff;
  color: #333;
  font-family: "Ubuntu", sans-serif;
  position: relative;
}

h3 {
  font-weight: 400;
}

.curved-header{
  color: #fff;
  padding-top: 10vw;
  padding-bottom: 30vw;
  text-align: center;
  position: relative;
  z-index: 2;
}

main {
  background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10vh 0 80vh;
  position: relative;
  text-align: center;
  overflow: hidden;
}
main::after {
  border-right: 2px dashed #eee;
  content: "";
  position: absolute;
  top: calc(10vh + 1.618em);
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

footer {
  background: #dddee1;
  padding: 5vh 0;
  text-align: center;
  position: relative;
}

small {
  opacity: 0.5;
  font-weight: 300;
}
small a {
  color: inherit;
}

3. To animate the header curve on scroll, include the JavaScript code provided in your HTML, preferably just before the closing </body> tag. This code listens to scroll events and adjusts the curve accordingly.

(function() {
  // Variables
  var $curve = document.getElementById("curve");
  var last_known_scroll_position = 0;
  var defaultCurveValue = 350;
  var curveRate = 3;
  var ticking = false;
  var curveValue;

  // Handle the functionality
  function scrollEvent(scrollPos) {
    if (scrollPos >= 0 && scrollPos < defaultCurveValue) {
      curveValue = defaultCurveValue - parseFloat(scrollPos / curveRate);
      $curve.setAttribute(
        "d",
        "M 800 300 Q 400 " + curveValue + " 0 300 L 0 0 L 800 0 L 800 300 Z"
      );
    }
  }

  // Scroll Listener
  // https://developer.mozilla.org/en-US/docs/Web/Events/scroll
  window.addEventListener("scroll", function(e) {
    last_known_scroll_position = window.scrollY;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        scrollEvent(last_known_scroll_position);
        ticking = false;
      });
    }

    ticking = true;
  });
})();

Feel free to customize the content inside the header, main section, and footer to match your website’s needs. You can also fine-tune the CSS styles to achieve your desired look and feel.

That’s all! hopefully, you have successfully created an Animated Curved Header using SVG and CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.