Scroll Animation Using Html,Css,Js

I am trying to output the letter H using the SVG Line Animation and I am stuck at one part, I am not sure where to edit/modify the elements so it outputs the Letter H. I want to output this image by SVG Drawing On Scroll:

enter image description here

It seems a bit too complicated and my attempt at first was to modify the <path elements but I got a different unexpected output. I used the SVG Drawing On Scroll template from codepen, and I would like to modify to output the image above on scroll. I was wondering if I could get some assistance on this. Any suggestions?

Code of the template:

// Get a reference to the <path>
var path = document.querySelector('#star-path');

// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();

// Make very long dashes (the length of the path itself) = pathLength + ' ' + pathLength;

// Offset the dashes so the it appears hidden entirely = pathLength;

// Jake Archibald says so

// When the page scrolls...
window.addEventListener("scroll", function(e) {
  // What % down is it? 
  // Had to try three or four differnet methods here. Kind of a cross-browser nightmare.
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Length to offset the dashes
  var drawLength = pathLength * scrollPercentage;
  // Draw in reverse = pathLength - drawLength;
  // When complete, remove the dash array, otherwise shape isn't quite sharp
 // Accounts for fuzzy math
  if (scrollPercentage >= 0.99) { = "none";
  } else { = pathLength + ' ' + pathLength;
body {
  /* feel free to change height */
  height: 5000px;
  background: linear-gradient(
    to bottom,

h1 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: 100;
  padding: 25px 15px;
  text-shadow: 1px 1px 1px #333;

#star-svg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;


<svg xmlns="" viewBox="0 0 100.6 107.6" id="star-svg">
  <path fill="none" stroke="white" stroke-width="2" id="star-path" d="M43.7,65.8L19.9,83.3c-2.9,1.9-5.1,3.2-7.9,3.2c-5.7,0-10.5-5.1-10.5-10.8

77 thoughts on “Scroll Animation Using Html,Css,Js”

Leave a Comment