WP Logo Animation

View Project Online
Role: Developer

Wanted to start experimenting a bit more with SVG and animations so I created a Pen to learn.

Animated WordPress logo gif

As my favorite CMS, I decided to go with the WordPress logo. I took a few samples of SVGs of the WordPress logo and then grouped the paths and created the circle for simplicity reasons. Through CSS, I added a fade in and rotation to the group of paths that holds the W, and then the outer circle (a stroke) fill.

The pen I created also has a button to replay the animation, one single animation and having to refresh would be a hassle. The button’s action was implemented using vanilla JavaScript to toggle the animate class from the whole logo element and I also used JS to remove the animate class once the animation on the logo ends.

  • SVG group to manipulate paths as one
  • SVG animation via CSS (Sass/SCSS) animation/keyframes
  • Vanilla JavaScript to reset animation

Simple but fun project to play with.

Link to Pen with experiment and code: https://codepen.io/mae829/pen/jGbMVv