Creating the Gallifrey website
I created the "gallifrey" website not only to show off my skills with Scalable Vector Graphics (SVG), but to also challenge my knowledge of SVG and to challenge my creativity.
Being a fan of the BBC series Doctor Who, I noticed that the season 8 intro had an interesting circular/spiraling shape that consisted of large and small circles with prongs protruding from them.
This inspired me to recreate these circles with SVG, instead of just creating them in an image editing program.
The intro for Doctor Who, showing the spiraling circles.
To create the effect that there were bits and pieces coming off of the main circle, I first started with many circles of various sizes. This was the easiest part,
as all I needed to do was tell the web browser to draw some circles, the size of the circles and where they sit on the page.
cx and cy stand for the coordinates of the circles. The r stands for the radius (size) of the circles.
The circles as they appeared unedited.
The next step was to cut away at the circles until I had the desired shapes. To do this, I had to create "clipping paths". I was clipping away at the unwanted areas, making them invisible.
To do this, I had to get the X and Y locations of the screen to make very weird shapes in order to cut out the unwanted areas.
Basically, each X,Y is a corner of the shape. it looks like (x,y x,y x,y) repeated until I have a whole shape.
The results of all the X,Y code. Coloured to show you what shapes they make.
Once the right code has been applied, the coloured shapes become invisible, taking with them any parts of the light blue circles that they are attached to.
Each shape gets applied to one circle only, leaving the other circles unaffected by the coloured shape.
And here is the final result, with the clipping paths in effect.