Draw DNA


15 Nov 2016

I read on Richard's excellent blog that there are few high quality images illustrating PCR. He created the images using Inkscape so where highly unoptimised with difficult to understand code. This doesn't really make any difference to the image, but I like trying to optimise SVGs.

I started to manually optimise the code, but after a while realised it would be quicker to start almost from scratch, just using the images of the bases. Then I thought it would be relatively easy to write a program to create the image for me. And then I thought it wouldn't be much harder to write a web page so anyone could generate images. This is my attempt.

I've now realised what would be even better is if you could drag the images on the SVG itself, but that's for another day.

Create SVG image of DNA

Use the Add Sequence button to add sequences and edit their properties.

Image dimensions: (, )
Add sequence
Sequence 1
Position: (, )
Sequence:
Strands:

To do

  • Download image
  • Remove a sequence
  • Add labels
  • Allow overhangs
  • Allow flipping
  • Edit styling