Reproducing Gmail’s Google Gemini Animation

I’ve noticed the Google Gemini button in Gmail, featuring a neat animation where a four-pointed star spins and the outer shape morphs into different spinning shapes.

I decided to recreate the button using the CSS shape() function combined with animation. Here’s how I did it.

Drawing the Shapes

We need five shapes:

1. Four-pointed star
2. Flower-like shape
3. Cylinder-like shape
4. Rounded hexagon
5. Circle

I drew these shapes in Affinity Designer, exported them as SVGs, and converted the paths to CSS shape() syntax using a tool.

Before exporting, I ensured all shapes had the same number of anchor points to allow for smooth morphing. I used twelve anchor points per shape.

Some shapes were contorted during animation due to interpolation issues, but adjusting starting points and adding slight curvature fixed this.

After defining the shape() values, I created CSS variables for each shape to make the code more readable and maintainable.

:root {
  --hexagon: shape(...);
  --flower: shape(...);
  --cylinder: shape(...);
  --star: shape(...);
  --circle: shape(...);
}

Let’s break down the animation phases:

1. Star spins right and changes color.
2. Blue shape spreads out from under the star.
3. Blue shape morphs and spins.
4. Purple color wipes across the blue shape.
5. Blue shape contracts.
6. Star spins left and returns to initial color.

The HTML

The animation requires two divs: one for the star and another for the fancy shape.

The Basic CSS Styling

Each shape is defined within a box with the same dimensions.

#geminianimation {
  width: 200px;
  aspect-ratio: 1/1;
  margin: 50px auto;
  position: relative;
}

We use a pseudo-element to clip the box to a star shape and set a background color:

#geminianimation::before {
  content: "";
  clip-path: var(--star);
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #494949;
}

The child div establishes the animation’s starting shape:

#geminianimation div {
  width: 100%;
  height: 100%;
  clip-path: var(--flower);
  background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
}

To animate color wipes, we move the