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