Now that we have the MishMash “bubble” illustration as an editable SVG image, it is time to start playing around with how it can be modified dynamically. The first experiment was to try to make it blink. Here, I describe two approaches, using CSS and a GIF.

The CSS version is based on this code:

.blink-eye-thumb {
  display: block;
  transform-origin: center;
  will-change: transform;
}

a:hover .blink-eye-thumb,
a:focus-visible .blink-eye-thumb,
.blink-eye-thumb:hover,
.mishmash-bubbles:hover .blink-eye-thumb {
  animation: bubble-eye-blink 850ms ease-in-out 2;
}

@keyframes bubble-eye-blink {
  0%,
  12%,
  40%,
  100% {
    transform: scaleY(1);
  }
  20%,
  26% {
    transform: scaleY(0.08);
  }
  48%,
  54% {
    transform: scaleY(0.14);
  }
}

The animation compresses the image vertically on hover/focus. To ensure it works everywhere, it targets:

  • .blink-eye-thumb:hover
  • .mishmash-bubbles:hover .blink-eye-thumb

This covers both linked thumbnails and standalone images. Check it out on the MishMash web page.

Animated GIF from SVG

The CSS above works well on a website, but I thought it would be good to have a GIF version available for presentations as well. This was made by first generating various blinking frames using Inkscape:

inkscape --export-type=png --export-filename="mishmash_bubbles_notext_open.png" --export-background-opacity=0 --export-width=1000 "mishmash_bubbles_notext.svg"
W=$(identify -format "%w" mishmash_bubbles_notext_open.png)
H=$(identify -format "%h" mishmash_bubbles_notext_open.png)
HALF_H=$((H * 35 / 100))
CLOSED_H=$((H * 10 / 100))
convert mishmash_bubbles_notext_open.png -resize "${W}x${HALF_H}!" -background none -gravity center -extent "${W}x${H}" mishmash_bubbles_notext_halfblink.png
convert mishmash_bubbles_notext_open.png -resize "${W}x${CLOSED_H}!" -background none -gravity center -extent "${W}x${H}" mishmash_bubbles_notext_closed.png
convert -dispose previous \
  -delay 120 mishmash_bubbles_notext_open.png \
  -delay 8 mishmash_bubbles_notext_halfblink.png \
  -delay 6 mishmash_bubbles_notext_closed.png \
  -delay 8 mishmash_bubbles_notext_halfblink.png \
  -delay 220 mishmash_bubbles_notext_open.png \
  -loop 0 mishmash_bubbles_notext_blink.gif
identify mishmash_bubbles_notext_blink.gif

These were then assembled into a GIF:

convert -dispose previous \
  -delay 120 mishmash_bubbles_notext_open.png \
  -delay 8 mishmash_bubbles_notext_halfblink.png \
  -delay 6 mishmash_bubbles_notext_closed.png \
  -delay 8 mishmash_bubbles_notext_halfblink.png \
  -delay 220 mishmash_bubbles_notext_open.png \
  -loop 0 mishmash_bubbles_notext_blink.gif

blinking bubbles

Now, I have both a CSS version to use on web pages and a GIF to use in presentations.