Creating a lava lamp in React (Web)

Basic idea

  1. Procedurally generated shapes by using only few generated points
  2. Creating smoothened SVG path from points.
  3. Adding shadow and gradient to the shapes.
  4. Create multiple stages while slightly moving points around (hence creating a morphing shape)
  5. Applying shape morphing
  6. Multiply the same logic and enjoying the result

1. Generating shape

Visualization of selected functions

2. Creating smoothened SVG path

3. Adding shadows and gradients

4. Adding noise

5. Morphing

6. Laying back

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store