My small circles won't pulse correctly (Hacking the Firefox Glitch)

I set badge * { transform-origin: 180px 180px } because I wanted to circumvent the Firefox glitch. It looks like I have to further set up a unique transform-origin rule for each individual circle inside the <g> element if I wish to use pure css. Since I'm not a css purist, I will probably use JavaScript to set the transform-origin rule for my future projects.

In the following, using Chrome's Inspector, I found all the origin points of the small circles and added a unique transform-origin rule for each:

.star circle  {
  animation: pulse 0.7s 1.5s;
   transform-origin: 180px 107.8px;
}

.star circle:nth-of-type(2){
  animation-delay: 1.6s;
   transform-origin: 233.7px 244.2px;
}

.star circle:nth-of-type(3){
  animation-delay: 1.7s;
   transform-origin: 135.5px 244.2px;
}

.star circle:nth-of-type(4){
  animation-delay: 1.8s;
   transform-origin: 108.3px 160.4px;
}

.star circle:nth-of-type(5){
  animation-delay: 1.9s;
   transform-origin: 251.7px 160.4px;
}

(If no one objects to this answer, I'm marking it as Best Answer. (Even though marking my own answer as 'best answer' is equivalent to giving myself a high-five.))

The small circles do pulse, but by moving out and back instead of expanding and contracting.

This is because you have set set transform origin to a specific point, instead of the relative position used in the video:

.badge * {
  transform-origin: 50% 50%;
}

Firstly, I would thank James Anwyl and Dusan Zivanovic on their valued input. I would like to make the following observations:

1. By effecting the grow CSS codes on the SVG image, which was given the class 'badge' & the universal selector(*). I see that the elements with the classes outer, inner & inline are responsive. Yet the class 'star' elements do not. The responsive classes in the HTML have common cx & cy values of '180'. While in the 'star' class they vary, and as such behaviours independently. The transform-origin property pivots responsive elements at the center (50%,50%), but the 'star' class elements are pivoted at the bottom-right point of the star observed on rotation. Thus, does it mean CSS or the browser like chrome effects changes on elements with a common pattern?
2. By treating the star class elements as independent from the badge class, we are able to see that by applying transform-origin of (40%,40%) we get a perfect star 360 deg rotation similar to that shown in the video. Likewise, if we do the same with the smaller circles, by allocating them their independent transform-origin cx & cy (px) values they remain rooted or pivoted to the center.

Why does the star pivot at 40% not 50%, is it mathematical, CSS or the browser?

Some svg shape elements doesn't have a defined center x and y values, like on the next challenge. There's a clarification of the problem and semi-solution here:

http://stackoverflow.com/questions/40896007/svg-transform-origin-problems-in-firefox

Read the 12/1/16 post by 'myf'

I say semi-solution, although the current release of Firefox (1/5/17) doesn't have the 'svg.transform-box.enabled' set to true in about:config; On Firefox Dev Edition, it's enabled by default. So, this might be enabled by default on future Firefox mainline releases, and possibly only require the transform-box: fill-box; property and value for the svg element.

Great answers! I tried using explicit locations for each circle first, but I love the simplicity of setting the transform-origin and transform-box properties to "center" and "fill-box" respectively. Both worked. Thanks!

2022 here and Steven Parker's badge amendment worked for me.