nephele's Introduction

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	√

custom slider thumbs as svg images. woohoo.

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

Experimenting with randomized mosaic theme

Further experimentation

Day/Night Slider works

Added Cloud Model

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.

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.

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)

nephele's People

Contributors

Stargazers

Watchers

nephele's Issues

for background tiles

var colors= ["#22f","#883", "#28f", "#2fb", "#80d", "#dab", "#59c", "#74c", "#a4c", "#76a"];

var rando0to9 =()=> (Math.floor(Math.random() * 9)+1);

const genArr= new Array(100).fill("").map((val, idx)=>colors[rando0to9()]);
console.log("genArr: ", genArr)

range of 10 hex colors delivered 100x randomly

LICENSE file missing

Hi @beauhaus.

Would you please consider to add a LICENSE file to your Github repositories? (at least, this one in particular).
Hopefully, the MIT license? 🙏

Thank you very much for all these inspiring and instructive CSS/SVG/JS projects.

debossing effect

redo shadows of tracks to mirror tool-frame shadow to enhance debossing effect.

-recolor background of tracks

night/day sky slider

at side of apps "jumbotron" viewport – provide a night day slider that changes color values of background sky-gradient.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

web

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Google

Google ❤️ Open Source for everyone.

Alibaba

Alibaba Open Source for everyone

D3

Data-Driven Documents codes.

Tencent

China tencent open source team.

beauhaus / nephele Goto Github PK