# 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:

### Beams

We can draw multiple 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}$$.

### Resolution

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

### Alpha

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

### Color

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

### Animation

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

### Flower

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

### Spirals

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

### Ellipse

Different parameters create different patterns:

### YY

And overlaying them over each other can create familiar patterns:

### Bubbles

Changing the animation parameters leads to some fun outcomes:

### Phoenix

We can also create asymmetrical animation:

### Shell

And generally have fun with the results: