pure CSS DNA

In this example below you will see how to do a pure CSS DNA with some HTML / CSS and Javascript

My interpretation of a DNA double-helix Inspired by http://codepen.io/Pesca/pen/xKcAo

Thumbnail
This awesome code was written by pixelass, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pixelass ©
  • HTML
  • CSS
  • JavaScript
    
mixin cylinder(n)
  .cylinder
    while n--
      .slice
        if n%20==0
          .base-pair
            - slicy = 36
            while slicy--
              .slicy
        if n%20==10
          .base-pair._2
            - slicy = 36 
            while slicy--
              .slicy
      .slice

.wrapper
  .plate 
    .pane        
      +cylinder(120) 



/*Downloaded from https://www.codeseek.co/pixelass/pure-css-dna-iFzft */
    @mixin clip-path($value) {
    -webkit-clip-path: $value; 
    clip-path: $value; 
}
@mixin filter($value) {
    -webkit-filter: $value; 
    filter: $value; 
}
$parts: 120;
$slices: 60;  
$size: 300px;
$height: $size/4;
$spacing: 50%;
$offset: 6%;
$hue-depth: 180deg;
$shading-factor: 4;
$duration: 10s;
$slicy: 36;
body {
 // overflow: hidden;
  background: #333;

}

.wrapper {
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 250px;
  perspective-origin: 0 50%;
  perspective: 700px;
  &, *, *:before, *:after {
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
}

 .plate {
   height: $size;
   width: $size;
   visibility: visible;
   animation: rotate $duration linear infinite;
  
   
   @at-root {
     @keyframes rotate {
       0% {
         transform: 
           rotatey(70deg)
           rotatex(45deg) 
           rotate(0deg);
       }
       100% {
         transform: 
           rotatey(70deg)
           rotatex(45deg) 
           rotate(360deg);
       }
     }
   }
   
 }

.pane {

  position: absolute;
  top: 0;
  left: 0;
  height: $size; width: $size;
  transform: rotatex(-90deg);
  pointer-events: none;
  //@include filter(contrast(1.2));
  



  
  .cylinder {
    position: absolute;
    top: 0; right: 0;  bottom: 0; left: 0;
    transform: translate3d($size/2,0,0);
  }
  .base-pair {
    height: $size - 20px;
    width: $height/2;
    border-radius: $height; 
    background: linear-gradient(to top, blue, blue 50%, orange 50%); 
    visibility: hidden;
    transform-origin: 50% 100%; 
    transform: 
      translatey($size*-1 + $height/2) 
      rotatex(90deg) 
      translatey(-10px);
        
    .slicy {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: ceil($height*pi()/$slicy/2);
      background: inherit;
      visibility: visible;
      backface-visibility: hidden; 
      
      @for $i from 0 to $slicy { 
        &:nth-child(#{$i + 1}) {
        transform: 
          
         rotatey(360deg/$slicy*$i) 
          translatez($height/4);
        }
      }
    }
    
    &._2 {
      background: linear-gradient(to top, green, green 50%, red 50%); 
    }
  }
  .slice {
    position: absolute;
    top: 0; left: 0;
    width: ceil($size*pi()/$slices);
    height: $height;
    visibility: visible;
    @include clip-path(polygon(0 0, 0 100% - $spacing - $offset, 100% 100% - $spacing, 100% $offset, 0 0));
    &, &:before, &:after {
      backface-visibility: hidden;
    } 
    &:after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
    }
    
/*    &:before {
      background: rgba(255,0,0,0.6);
      background-color: inherit;
      @include clip-path(polygon(0 0, 0 100% - $spacing - $offset, 100% 100% - $spacing, 100% $offset, 0 0));
      
    }*/
    &:after {
      background-color: inherit;
      background-image: linear-gradient(to top, rgba(0,0,0,0.4),rgba(0,0,0,0.4));
      transform: rotatey(180deg);
      @include clip-path(polygon(0 $offset, 0% 100% - $spacing, 100% 100% - $spacing - $offset, 100% 0, 0 $offset));
    }
    
    @for $i from 0 to $parts {
      &:nth-child(#{($i+1)*2}) {
        
        $h: $hue-depth;
        $s: 100%;
        $l: 40%;
        $a: 0.99;
        
        
        background-color: 
            hsla($h,$s,$l,$a);
        

        transform: 
          translatey($i*$height/(100%/$offset))
          rotatey(360deg/$slices*$i) 
          translatez($size/2);
      }
    &:nth-child(#{$i*2 + 1}) {
        
        $h: $hue-depth+180;
        $s: 100%;
        $l: 40%;
        $a: 0.99;
        
    
        
        background-color: 
            hsla($h,$s,$l,$a);
        

        transform: 
          translatey($i*$height/(100%/$offset))
          rotatey(360deg/$slices*$i + 180) 
          translatez($size/2); 
      }
    }
  }
}


/*Downloaded from https://www.codeseek.co/pixelass/pure-css-dna-iFzft */
    

Comments