Skip to content

A react tool to accompany CSS-Tricks article on creating clouds with SVG Filters

Notifications You must be signed in to change notification settings

beauhaus/Nephele

Repository files navigation

Nephele

A tool to make clouds and explore the effects of CSS & a couple of SVG Filters

User will be able to experiment and observe effects of adjustments to several relevant values affecting cloud image

Feature-set

Feature

Notes

Status

React 16.4.2
Normalization Safari, Moz, Chrome
Layout CSS Grid/Flexbox
Styling Styled-Components

Third page screenshot

custom slider thumbs as svg images. woohoo.

Fourth page screenshot

Fifth page screenshot

Zeus codes beside what will be a text display of resulting code (using copy-to-clipboard library);

Sixth page screenshot

Experimenting with randomized mosaic theme

Seventh page screenshot

Further experimentation

Eighth page screenshot

Ninth page screenshot

Tenth page screenshot

Eleventh page screenshot

Day/Night Slider works

Twelfth page screenshot

Added Cloud Model

Thirteenth page screenshot

Removed Decorative Tiles with significant gains in FirstMeaningfulPaint (while still substantial, improves things a great deal). This detail shows the first proof of this tool's utility. Inputs from sliders are delivered into the SVGFilter component & then changes are rendered in the CloudDisplay>CloudModel component.

Fourteenth page screenshot

Every slider works, now. There are decisions to make about ranges. Considering 5 or six buttons at bottom to call each setState to a pre-configured type of cloud configuration.

Fifteenth page screenshot

Sixteenth page screenshot

Final Draft

Please feel free to contact me for comments, complaints, suggestions, or HELP! :)

@_beauhaus on twitter

Attributions

React scaffolding using the recommendations Brian Holt's excellent react course on FrontEndMasters

Sliders built in styled-components based on this tutorial (with thanks to Brice Ayers)

About

A react tool to accompany CSS-Tricks article on creating clouds with SVG Filters

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages