Starburst images with rotation

Place your image inside a Starburst shape with a cool rotation 🤩

• No extra element (only the <img> tag)
• Powered by clip-path

Get the code in no time using an Online Generator for Starburst Shape

img {
  aspect-ratio: 1;
  animation: spike1 .8s linear infinite;
}
/* The below are generated using: https://css-generators.com/starburst-shape/
   Define the number of spikes then: 
   - Place the rotation at min and copy the value on the 0% state
   - Place the rotation at max and copy the value on the to state
   That's all!
*/
@keyframes spike1 {
  0% {
    clip-path: /* from the generator */;
  }
  to {
    clip-path: /* from the generator */;
  }
}

See the Pen Starburst rotating images by Temani Afif (@t_afif) on CodePen.

• Previous CSS Tip
• Next CSS Tip