SodhanaLibrary

In this article I am going to explain how to arrange given set of elements on Sin or Cos With CSS3 and SASS. 

Lets see Math formula for Sin wave.

X = X -coordinate

Y = Y -coordinate

A = Amplitude 

P = Period

Y = A sinθ

X = P ( increment X periodically)

Lets see Math formula for Cos wave.

Y = A cosθ

In this example total 43 elements will be there. We are going to align these 43 elements in Sin wave by using SASS trigonometric function.

HTML markup of 43 div elements :

<div></div>
<div></div>
<div></div>
......40 more divs

SASS code :

This below code will apply Left and Top positions based on nth-child property.

$class: div !default

$amp: 100

$period: 20

$angle: 30deg

@for $i from 1 through 43
  #{$class}:nth-child( #{$i} )
    left: #{$amp  + ( $period * ($i - 1) ) }px
    top: #{$amp + ($amp*sin( ($i - 1) * $angle)) }px

      
div
  width : 5px
  height : 5px
  border : 1px solid #ccc
  position : absolute 
  background-color : #ff0000

Demo :