HacktoberFest: Return to Animation

This is a submission for the 2025 Hacktoberfest Writing Challenge: Contribution Chronicles

Another HacktoberFest has ended. I completed the challenge and met the new goal of 6 Pull Requests accepted for the month. I've done 6 PRs a couple times so was ready to do it again.

Animation Nation

Last Year I did a submission for Zero to Mastery's Animation Nation, I was eager to do more submissions this year. Animation Nation is a gallery for CSS Animations. Contributors build a animation using only HTML and CSS.

Last year's blog is linked below.

Hacktoberfest: Animation.

Chris Jarvis ・ Nov 3 '24

#devchallenge #hacktoberfestchallenge #hacktoberfest #opensource

The rules were as follows.

• Use only CSS and HTML.
• Enter username and title in a JSON file so your piece can be added to the gallery.
• Include at least one animated element.
• The animation must repeat.
• The animation must be automatic, no user interaction needed.

Their gallery is at Animation Nation.. Visit it to see creative use of CSS. DEV member Laureline Paris is a maintainer and has posted their experience with the project.

Hacktoberfest 2025 - Automating repetitive tasks

Laureline Paris ・ Oct 31

#devchallenge #hacktoberfest #opensource

My Contribution

I made a Jack O'Latern with flickering lights. The body is an oval. The lines are a series of transparent circles, all the screen shows is the black border. The cut out pieces are altered squares.

Since this was an animation challenge, I'll share that part of the code. The animation is named "carveItem". I initially wanted to animated the pumpkin being carved but couldn't time it to do one at a time. I tried to delay so one eye appeared after the other and then nose and mouth. But one section would restart before another finished and it was too hurtful on viewer's eyes.

.eyes {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: yellow;
  animation: carvePumpkin 6s infinite;
  animation-fill-mode: forwards;

  border: 2px solid orange;
}

.nose {
  width: 70px;
  height: 70px;
  transform: rotate(45deg);
  border-radius: 20%;

  background: yellow;
  animation: carveNose 6s infinite;
  animation-delay: 2s;
  animation-fill-mode: both;
  border: 2px solid orange;
}

@keyframes carvePumpkin {
  from {
    background-image: linear-gradient(to top, yellow, orange);
  }
  to {
    background-image: linear-gradient(to bottom, yellow, red);
  }
}

@keyframes carveNose {
  from {
    background-image: linear-gradient(to top, yellow, orange);
  }
  to {
    background-image: linear-gradient(to bottom, yellow, red);
  }
}

@keyframes carveMouth {
  from {
    background-image: linear-gradient(to left, orange, red);
  }
  to {
    background-image: linear-gradient(to right, yellow, red);
  }
}

Changing the gradients makes the interior of the Jack O'Lateran flicker. The eyes, nose, and mouth have slightly different gradients and timing to make them look more animated.

zero-to-mastery.github.io

I didn't think this was enough so I added the moon and made it move across the sky. The moon is made of two overlapping circles. Yellow for the moon and a second smaller circle on top set to the background color so the moon is in the crescent phase.

The Moon moves across the X-axis from screen left to right.

.moon-path {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: flex-start;
}

.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: yellow;
  animation: move-moon 10s linear 0s infinite;
  margin-top: 20px;
  left: -25%;
}

.shadow {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: var(--night);
  margin-left: 46px;
  margin-top: 11px;
}

@keyframes move-moon {
  from {
    transform: translateX(-200px);
  }
  to {
    transform: translateX(900px);
  }
}

Final Thoughts

It always fun to work with animated elements. I enjoyed working on this project and would love to make others.

As for HacktoberFest It was fun too. I'm glad they brought the shirts back. They shipped fast this year. Ordered it on Tuesday and it arrived Friday on Halloween. Won't spoil the design in case you're waiting on your shirt. Tree-Nation planting the tree, a Calocedrus decurrens is cool.

I understand why they increased the threshold for earning a shirt and being a "Super Contributor." Not sure about the title thou just sounds like creating tiers of contributors. I’d understand if there was "Classic Goal" badge for hit the old goal of four PRs and a "Super Contributor" for the new goal. I don’t know maybe i’s just the name. 
That said it was fun to work on open source. Now to look for something else to help build.

Cover Image

Cover image is my Toy Photography of a LEGO Minifigure. It's not meant to be a fig of me cause I have a beard that would hide the tee shirt. This happens in real life too.

The shirt has binary code. Know what it says? Scroll for answer.

A: The binary on the shirt stands for LEGO.