Deoxyribonucleic acid. It was in the ’50s that Watson and Crick (and Rosalind) uncovered the shape of the nucleic acid double helix, giving form to what researchers wrote about since Mendelian heredity. Its biological code is what makes (and unmakes) us. ’50 years later we can make it with our code (sorta).

I’ve always liked the elegance of the shape, and we can use some clever CSS to simulate a simple animation of the nucleotide pairs bonding into the double-staircase formation:

doublehelix

First, let’s illustrate the nucleotide base-pairs as dots using the HTML entity for the bullet-point ‘•’. Classify i.d. (or class) names (Named A & T and C & G respectively (with numbers added for each subsequent pair) here for the base-pairs Adenine and Thymine, and Cytosine and Guanine) and put them in divs so you can edit each element with CSS. You can make your DNA strand as long or short as you want. Just make sure it’s an even number so that each dot has a partner to line up with (unless you want a frameshift mutation to happen, you monster). So 10 base-pairs = 20 HTML divs.

nucleotides

I changed half of the dots’ colors so that the base pairs on each side are differentiated.

nucleotides2

Right now you should have something like static bullet points:

nucleotidesn

Next up is positioning. Center and align the HTML,

nucleotide3

and set the HTML elements to absolute so that you can set the coordinates of precisely where each dot will go.

nucleotides3

Set each nucleotide pair’s position from the top to the bottom of the DNA chain, spacing them out 5% vertically apart.

nucleotides4

For the animation, the trick is to change the timing of each base-pair’s animation (the delay property) to circle around faster and slower, so that some are wider apart than others at different time intervals, their different timings macroscopically forming the double-helix silhouette when viewed as a gestalt whole.

There are two sets of webkit animations, titled one and onex, are basically the same, sending the nucleotides in and out at different keyframes, but each animation variant having different z-indexes, to create the illusion of each nucleotide alternating ‘in’ and ‘out’ in a (semi-3D) vortex (I haven’t included them, but make sure to include browser prefixes for compatibility reasons (i.e. -moz-,- o-, etc.)).

nucleotides6

The right nucleotide always moves with a 2 second delay, at one animation variant, in relation to the partner on its left, at the other animation variant, so that the two are discernibly separate. Furthermore, as the DNA molecule is vertically traversed, the animation delay time differs by 2 seconds from the pair above it. This is repeated for about eight pairs and then the cycle resets in order to create the widening and narrowing of the double-helix. Therefore, we can pair the first base-pair with the ninth, and the second with the tenth, etc. in our CSS selectors.

nucleotides5

With that, our virtual double-helix is a go (and you didn’t even have to buy one of those expensive DNA sequencers). Pretty sweet, right?