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

Share Your Love

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

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 429

Newsletter Updates

Enter your email address below to subscribe to our newsletter