How to create a DNA model in CSS(CSS DNA)?

“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.