// Read the full story on dev.to
// https://dev.to/rossangus/simple-wave-pattern-with-css-gradients-29g4

// The width of the tile which repeats
$wave-width:  200px;
// The height of the tile or the vertical space between peaks
$wave-height: 100px;
// Colour of the lighter blue wiggly lines
$line-color: blue;
// Colour of the background
$wave-background: navy;
// Thickness of the wiggly line
$line-thickness: 10px;
// This is just used for the demo
$para-count: 6;
// This is the radius of the circle found outside the light blue line
$radius: ($wave-width + $line-thickness + $line-thickness) / 4;

// Simple repeating radial gradient from red to blue,
// locked to the middle of the bottom
.step1 {
	background-image: radial-gradient(
    circle at top center,
    red,
    green
  ); 
	background-size: $wave-width $wave-height;
}

// Adding in some stops, to make a hard change of colour
// This creates a half-circle of 100px diameter.
// Note that pixels give a more predictable size of each curve.
// Percentages seem to be tied to the aspect ratio of the
// background-size in a way I don't fully understand.
.step2 {
	background-image: radial-gradient(
    circle at top center,
    red,
    red $radius,
    green $radius,
    green
  ); 
	background-size: $wave-width $wave-height;
}

// Adding in a new colour, to form a curve
// The width of the $line-color half-circle is 100px;
.step3 {
	background-image: radial-gradient(
    circle at top center,
    red,
    red $radius - $line-thickness,
    $line-color $radius - $line-thickness,
    $line-color $radius,
    green $radius,
    green
  ); 
	background-size: $wave-width $wave-height;
}

// Making the other colours transparent
.step4 {
	background-image: radial-gradient(
    circle at top center,
    transparent,
    transparent $radius - $line-thickness,
    $line-color $radius - $line-thickness,
    $line-color $radius,
    transparent $radius,
    transparent
  ); 
	background-size: $wave-width $wave-height;
}

// Adding a second gradient which is exactly the same,
// but locked to the bottom right, rather than the top
.step5 {
	background-image:
    radial-gradient(
      circle at center top,
      transparent,
      transparent $radius - $line-thickness,
      $line-color $radius - $line-thickness,
      $line-color $radius,
      transparent $radius,
      transparent
    ),
    radial-gradient(
      circle at right bottom,
      transparent,
      transparent $radius - $line-thickness,
      $line-color $radius - $line-thickness,
      $line-color $radius,
      transparent $radius,
      transparent
    );
  background-size: $wave-width $wave-height;
}

// Adding a third gradient locked to the bottom left
.step6 {
	background-image:
    radial-gradient(
      circle at center top,
      transparent,
      transparent $radius - $line-thickness,
      $line-color $radius - $line-thickness,
      $line-color $radius,
      transparent $radius,
      transparent
    ),
    radial-gradient(
      circle at right bottom,
      transparent,
      transparent $radius - $line-thickness,
      $line-color $radius - $line-thickness,
      $line-color $radius,
      transparent $radius,
      transparent
    ),
    radial-gradient(
      circle at left bottom,
      transparent,
      transparent $radius - $line-thickness,
      $line-color $radius - $line-thickness,
      $line-color $radius,
      transparent $radius,
      transparent
    );
  background-size: $wave-width $wave-height;
}

body {
  background: $wave-background;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
  text-align: center;
}

p {
  border: solid 2px white;
  font-size: 10vw;
  height: 100vh / $para-count;
  line-height: 100vh / $para-count;
  margin: 0;
  text-shadow: .5vw .5vw 2vw #000;
}

body, p {
  box-sizing: border-box;
}