Nephele

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #llm #android #deep-learning #macos #nodejs #windows #awesome #vue #ios #open-source

(★ 21)

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

Nephele Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

| <h3>Feature</h3>  | <h3>Notes</h3>      | <h3>Status</h3> |
| :---------------- | :------------------ | :-------------- |
| **React**         | 16.4.2              | ***√***         |
| **Normalization** | Safari, Moz, Chrome | ***√***         |
| **Layout**        | CSS Grid/Flexbox    | ***√***         |
| **Styling**       | Styled-Components   | ***√***         |

![Third page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot3.jpg?raw=true "Third page screenshot")
#### custom slider thumbs as svg images. woohoo.

![Fourth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot4.jpg?raw=true "Fourth page screenshot")

![Fifth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot5.jpg?raw=true "Fifth page screenshot")
#### Zeus codes beside what will be a text display of resulting code (using copy-to-clipboard library);

![Sixth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot6.jpg?raw=true "Sixth page screenshot")
#### Experimenting with randomized mosaic theme

![Seventh page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot7.jpg?raw=true "Seventh page screenshot")
#### Further experimentation

![Eighth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot8.jpg?raw=true "Eighth page screenshot")

![Ninth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot9.jpg?raw=true "Ninth page screenshot")

![Tenth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot10.jpg?raw=true "Tenth page screenshot")

![Eleventh page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot11.jpg?raw=true "Eleventh page screenshot")
#### Day/Night Slider works

![Twelfth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot12.jpg?raw=true "Twelfth page screenshot")
#### Added Cloud Model

![Thirteenth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot13.jpg?raw=true "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](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot14.jpg?raw=true "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](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot15.jpg?raw=true "Fifteenth page screenshot")

![Sixteenth page screenshot](https://github.com/beauhaus/Nephele/blob/master/readmeRefImg/scrnshot16.jpg?raw=true "Fifteenth page screenshot")
#### Final Draft

#### Please feel free to contact me for comments, complaints, suggestions, or HELP! :) 
<a href="https://twitter.com/_beauhaus">@_beauhaus on twitter</a>

## Attributions

React scaffolding using the recommendations Brian Holt's excellent react <a href="https://frontendmasters.com/teachers/brian-holt/" target="_blank" title="Click to visit this class">course on FrontEndMasters</a>

Sliders built in styled-components based on <a href="https://www.youtube.com/watch?v=U16seM2a8OY" target="_blank" title="click to watch">this tutorial</a> (with thanks to <a href="https://github.com/MyNameIsURL" target="_blank" title="Twitter">Brice Ayers</a>)

Nephele

Nephele Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Nephele

Nephele Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README