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

### Orbits

And adding another radius to the animation generates interesting orbits:

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