Senoidal curve made with pure CSS.

CSS-Sine-Waves.markdown

CSS Sine Waves

Senoidal curve with SASS + HAML. Pure CSS(3).

Available on CodePen

index.haml

%link{:type => "text/css", :rel => "stylesheet", :href => "http://fonts.googleapis.com/css?family=Allerta"}

%h1  CSS3 SINE WAVES
    
%h2 [linear && alternate movement]
%section.curve.linear
  - (1..10).each do
    .increase
    .peak
    .decrease
    .valley
%h2 [static]
%section.curve
  - (1..6).each do
    .increase
    .peak
    .decrease
    .valley
%h2 [wave perspective]
%section.curve.perspective
  - (1..15).each do
    .increase
    .peak
    .decrease
    .valley
%h2 [showing the wave]
%section.curve
  .showing
  - (1..10).each do
    .increase
    .peak
    .decrease
    .valley

style.sass

@import "compass"
// visual variables
$bodybg: #1E1717
$wavecolor: darken($bodybg, 7%)
$showingtime: 4s // 2s is fun, try :D
$titlecolor: #753222
  
// relevant variables
$angle: 38.43deg
$increasemargin: -89.75px
$thick: 5.7px
  
// relevant
div
  display: inline-block
 
.curve
  margin-bottom: 110px
 
.linear
  animation: linearmov 8s linear infinite alternate 
.perspective 
  transform: perspective(600px) rotateY(26deg)
.showing
  
.increase, .decrease
  height: 5.4px
  background: $wavecolor
  width: 150px
  margin-left: $increasemargin
  position: relative
  z-index: 1
.increase
  transform: rotate(-$angle)
.decrease
  transform: rotate($angle)
  margin-left: $increasemargin + 1.5
  
.peak, .valley
  border: $thick solid $bodybg
  border-top: $thick solid $wavecolor
  border-radius: 50%
  width: 106px
  height: 105px
.peak 
  transform: translate(-44px, 51.8px)
.valley
  transform: rotate(180deg) translate(45px, -58px)
  
// page + movements + extra transforms
body
  background: $bodybg
  white-space: nowrap
  overflow-x: hidden
  font-family: 'Allerta'
  text-align: center
h1, h2
  color: $titlecolor
  margin-bottom: 0
h2
  font-weight: normal
  margin: 0
  
.showing
  float: right
  background: $bodybg
  width: 100%
  height: 200px
  animation: showing $showingtime linear infinite alternate
  position: relative
  z-index: 2
    
@keyframes linearmov
  from
    transform: translateX(0)
    perspective: 300px
  to
    transform: translateX(-1030px)

@keyframes showing
  from
    transform: translateX(0%)
  to
    transform: translateX(105%)