Circles in beams

Introduction

I draw vector graphics circles inscribed in a beam.
Implementing those in self executing SVGs is surprisingly straight forward.

Beam

A beam is a set of circles inscribed between two lines. The radii of these circles can be calculated using the following formula: $$R(n) = ({1+\sin{\theta \over2} \over 1-\sin{\theta \over2}})R(n-1)$$

For instance when \(\theta = {\pi \over 16}\), our beam will look as follows:

Beam

Beams

We can draw multiple beams.

Beams

Grid

If the angle is a fraction of pi, we can create a grid.
If we choose to have \(N\) beams, our angle would be \(\theta = {\pi \over N}\).
In the case below, \(N=8\) and \(\theta = {\pi \over 8}\).

Grid

Resolution

If we decrease the angle of drawing we will have smaller circles and finer beams, doing so increases the resolution of our grid.

Resolution

Alpha

We can set the alpha channel of each circle's fill color according to their distance from the center.

Alpha

Color

We can also set the each circle's fill color according to their distance from the center.

Color

Animation

We can now use SVG SMIL animations to make circles animate on a path.

Animation

Flower

Tweaking the parameters of this technique allows the generation of some interesting patterns:

Flower

Spirals

Choosing which beams to draw allows you to create other patterns:

Spirals

Orbits

And adding another radius to the animation generates interesting orbits:

Orbits

Ellipse

Different parameters create different patterns:

Ellipse

YY

And overlaying them over each other can create familiar patterns:

YY

Bubbles

Changing the animation parameters leads to some fun outcomes:

Bubbles

Phoenix

We can also create asymmetrical animation:

Phoenix

Shell

And generally have fun with the results:

Shell