“The infinite double-helix loop is created by adding a slight delay on every div element in the DNA container. The deoxyribose sugar is painted in white as two circles. Also, nitrogenous bases are shown as coloured lines that join the sugar circles.” From Shadow Scientist.
In HTML:
- var n = 0; - var iteration = 24; .wrapper .dna while n < iteration div(style="--i: "+n)= n++
In CSS:
:root{ --rotate: -26deg; /* to make it responsive */ --unit: 1vmin; --zoom: 160; --workspace-min: 768; /* device screen height = 768px */ --upx: calc(var(--zoom) * (var(--unit) / var(--workspace-min))); /* upx = units per pixel */ /* DNA Helix loop */ --animation-speed: 1; --helix-duration: 0.5s; --helix-iteration-factor: 0.05s; /* DNA model */ --dna-max-height: calc(140 * var(--upx)); --dna-nitrogenous-base-width: calc(6 * var(--upx)); --dna-nitrogenous-base-margin: calc(8 * var(--upx)); --dna-sugar-diameter: calc(15 * var(--upx)); --dna-sugar-border-size: calc(6 * var(--upx)); /* colors */ --color-background: #151515; --color-sugar: #f2f1d5; --color-A: #ffba36; --color-T: #26f826; --color-C: #439AD9; --color-G: #E96451; } /* rotate the dna container for smart mobile devices */ @media (orientation: portrait){ :root{ --rotate: -58deg; } } /* to make things look pretty */ html, body{ padding: 0; margin: 0; width: 100%; height: 100%; display: block; } body{ background: var(--color-background); overflow: auto; } html{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.4) rgba(0,0,0,0); } /* align the DNA to middle */ .wrapper{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--rotate)); transform-origin: 50% 50%; } /* DNA is a flex container with n-double helix */ .dna{ display: flex; align-items: center; position: relative; height: var(--dna-max-height); } /* helix (nitrogenous base) */ .dna > div{ font-size: 0; position: relative; width: var(--dna-nitrogenous-base-width); height: 0; background: linear-gradient(0deg, var(--color-G) 50%, var(--color-C) 50%); display: inline-block; margin: 0 var(--dna-nitrogenous-base-margin); animation: double-helix ease calc(var(--helix-duration) / var(--animation-speed)) calc((var(--i) * var(--helix-iteration-factor)) / var(--animation-speed)) alternate infinite; } .dna > div:nth-child(2n){ background: linear-gradient(0deg, var(--color-A) 50%, var(--color-T) 50%); } @keyframes double-helix{ to{ height: var(--dna-max-height); } } /* sugar */ .dna > div::before, .dna > div::after{ content: ""; position: absolute; left: 50%; width: var(--dna-sugar-diameter); height: var(--dna-sugar-diameter); display: block; border-radius: 50%; background: var(--color-sugar); border: var(--dna-sugar-border-size) solid var(--color-background); box-sizing: content-box; } .dna > div::before{ top: 0; transform: translate(-50%, -50%); } .dna > div::after{ bottom: 0; transform: translate(-50%, 50%); }
Inside Codepen:
See the Pen CSS DNA 🧬 by Shadow Scientist (@shadow-scientist) on CodePen.