Playful Design

Soft Cloud Pattern

Programmatic puffy sky marks with blurred lobes, watercolor grain, and drifting cloud clusters.

Installation

@playfuldesign/templates/react#soft-cloud-pattern

Code preset

import { SvgPatternTemplate } from "@playfuldesign/templates/react";

<SvgPatternTemplate
  preset="soft-cloud-pattern"
  color="#7EDCFF"
  density={7}
  scale={30}
  grain={34}
  contrast={58}
  shape={64}
/>
Drag for cloud opacity

Soft Cloud Pattern

Programmatic puffy sky marks with blurred lobes, watercolor grain, and drifting cloud clusters.