Cirlces

A few experiments with circles

  1. 100 random circles

    Exactly what the title says. Scroll down to see them all.

  2. A few circles

    A few coloured circles on top of each other. Refresh to see a new composition.

  3. 10 circles on top of each other

    10 circles on top of each other with a difference blend mode. Refresh to see a new composition.

  4. 11 circles with one animating from 0 to 100

    11 circles on top of each other with a difference blend mode. One of them animates from 100% to 0% and back. Refresh to see a new composition.

  5. 12 circles with two animating from 0 to 100

    12 circles on top of each other with a difference blend mode. Two of them animate from 100% to 0% and back (well, one of them, the other one goes in reverse, at a different pace). Refresh to see a new composition.

  6. 10 animating circles mix-blend-mode: difference

    10 animating circles on top of each other with a difference blend mode. The animation duration is a different prime number for each circle

  7. 10 animating circles mix-blend-mode: difference

    Same as the previous one, but this one has an animation function of ease-in-out instead of linear

  8. 10 animating circles mix-blend-mode: difference

    Same as the previous one, every second circle has its animation direction reversed

  9. 10 animating circles mix-blend-mode: difference

    Same as the previous one, but here the circles all use different timing functions

  10. 10 animating circles mix-blend-mode: difference

    Same as the previous one, but this time the transform origin animates as well

  11. 10 animating circles mix-blend-mode: difference

    Same as the previous one, but this time the transform origin animates a bit differently

  12. 10 slices of animating circles mix-blend-mode: difference

    This shows a slice of the previous version.

  13. 10 squares to circles to squares

    Ten squares that morph into circles and morph back into squares. Random colours, and each the timing for each animation is based on a different prima number, which creates more chaos.

  14. 10 circles to squares to circles

    Same as the previous one, but here the circles are on the outside, the squares in the middle.

  15. 10 circles to squares to circles

    Same as the previous one, but here the circles are on the outside, the squares in the middle.

  16. 10 rotating circles to squares to circles

    Same as the previous one, but everything rotates as well.

  17. 10 rotating circles to squares to circles

    Same as the previous one, but in this version the small square had a different transform origin that the circle.