Tachyon Template

Building webpages has been a major challenge, thanks to the complex interaction of html tags, the CSS syntax and the underlying tech barrier. webpage design no longer needs to be an arcane art. Especially when it comes to CSS, all the mist has been blown away. Icing on the cake is, abstraction layer is established.

Now that is no longer the case, thanks to Tachyons. The style sheet mayhem has been finally conquered. You can observe how the Template is having a rythm to the fonts, the headings and the layouts. It is created through mathematical rythm created by the Tachyons css.

Pseudo Code

Data flows from the moment it is created and flows into the containers with a sole purpose of giving insights.Steps below show how the insights are gleaned out of the data

Steps Taken

Create the svg element to start the rendering
Build the rect element with starting and ending coordinates
Second rectangle is built on top of the 1st rect. With a fill color of red
Circles can be easier since the center along with radius does the trick
Rect can be of any width and start from any coordinates. Creating another rect
Circle is copied and the center coordinate is shifted
Other two rectangles are similarly copied and moved

Chart

Data Format

Data to make the shape is randomly imagined. It is formatted into X, Y and width, height or radius in case of circle.There is data involved in the fills too. The location of the mid rectangle is colored "Red" and the bottom circle is colored green

Code


                            <svg width="500" height="300">
                                <rect width="100" height="100" x="0" y="0" />
                                <rect width="100" height="100" x="50" y="50" fill="red" />
                                <circle cx="150" cy="150" r="50" fill="green" />
                                <circle cx="300" cy="150" r="50" fill="green" />
                                <rect width="150" height="20" x="150" y="140" fill="red" />
                                <rect width="100" height="100" x="350" y="0" />
                                <rect width="100" height="100" x="300" y="50" fill="red" />
                            </svg>