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 :

from Srinivas Dasari's production