cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              $background-color-main: #330f53;
$button-color-main : #c58cc4;
$button-color-secondary: #8b1a89;

*{
	box-sizing:border-box;
}
.color-picker-container{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: $background-color-main;
}

.svg-sliders{
	display: block;
	position: absolute;
	width:100%; 
	height:100%;
	.slider{
		transform-origin: center center;
		transform: translatey(-100%);
		//fill: pink;
		//transition: transform 0.4s ease-in-out;
	}
}
.btn-container{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	
}

.btn{
	position: relative;
	width: 60px;
	height: 60px;
	background-color: $button-color-secondary;
	border: 3px solid;
	border-color: $button-color-main;
	border-radius: 50%;
	z-index: 2;
	transform: scale(1.25);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
	transition:
			box-shadow 0.2s ease-in-out,
			transform 0.2s ease-in-out,
			border-color 0.2s ease-in-out;
	&:hover{
		cursor:pointer;
	}
	&:active{
		box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
		transition: 
			box-shadow 0.1s ease-in-out;
	}
	.small-dot{
		content: " ";
		position: absolute;
		width: 4px;
		height: 4px;
		background-color: $button-color-secondary;
		bottom:4px;
		left:-2px;
		border-radius: 50%;
		//border: 1px solid $button-color-main;
		//box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
		transform: translate(0px, 0px);
		transition: transform 0.5s;
		transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		z-index: 1;
	}
	.big-dot{
		content: " ";
		position: absolute;
		width: 6px;
		height: 6px;
		background-color: $button-color-secondary;
		//border: 1px solid $button-color-main;
		//box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
		bottom:-2px;
		right:-0px;
		border-radius: 50%;
		transform: translate(0px, 0px);
		transition: transform 0.5s;
		transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		transition-delay:0.2s;
		z-index: 1;
	}
	&.active{
		border-color: #dd52c9;
		box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
		transform: scale(1);
		transition:
			box-shadow 0.2s ease-in-out,
			transform 0.2s ease-in-out,
			border-color 0.2s ease-in-out;
		
		.small-dot{
			transform: translate(30px, -30px);
			transition: transform 0.5s;
			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
			z-index: 1;
		}
		.big-dot{
			transform: translate(-30px, -30px);
			transition: transform 0.5s;
			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
			transition-delay:0.2s;
			z-index: 1;
		}
	}
}

.selector-container{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	
	.selectors{
		width: 200px;
		height:200px;
		//background-color: blue;
		position: relative;
		
		.selector{
			width: 40px;
			height: 40px;
			position: absolute;
			top: 80px;
			left: 80px;
			background-color: green;
			border-radius: 50%;
			border: 3px solid $button-color-main;
			z-index: 1;
			transition: transform 0.5s;
			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
			&:hover{
				cursor:pointer;
			}
		}
	}
}
            
          
!
            
              /*
 * Created by Emmanuel Lainas 02/07/2017
 */
class ColorPicker extends React.Component{
	constructor(props) {
    super(props);
    this.togglePickers = this.togglePickers.bind(this);
		this.setBackgroundColor = this.setBackgroundColor.bind(this);
    this.state = {
			active: false,
			bgColor: "#f44195",
			//add another color to the array
			pickerColors : ["#4286f4", "#f44195", "#330f53", "#f4be41", "#4545ad", "#f44141", "#82e276", "#ff8f2d"],
			timeout: null,
			sliders: [],
			slideDuration: 500
		};
  }

	setBackgroundColor(bgColor){
		//handling repetitive clicking by adding 1 slider
		//per click in the array of sliders
		var sliders = this.state.sliders;
		sliders.push(<Slider bgColor={bgColor} transitionDuration={this.state.slideDuration}/>);
		//clearing the timeout set from previous clicking
		var timeout = this.state.timeout;
		clearTimeout(timeout);
		//keep dom light!
		//a timeout to set the color to the container 
		//and remove all sliders from the slider array
		timeout = setTimeout(()=>{
			this.setState({bgColor: bgColor,	sliders: []});
		},this.state.slideDuration);
		this.setState({
			sliders: sliders,
			timeout: timeout
		});
	}
	
	componentDidMount(){
		window.addEventListener('load', ()=>{
			this.setState({active: true});
			this.selectors.style.transform = "rotate(360deg)";
			const delay = 0.2;
			let duration = delay * (this.state.pickerColors.length);
			this.selectors.style.transition = "transform " + duration + "s" + " ease-in-out";
			setTimeout(()=>{
				this.setState({active: false});
				this.selectors.style.transform = "none";
				this.selectors.style.transition = "none";
			}, duration*1000);
		});
	}
	
	togglePickers(){
		this.setState({active: !this.state.active});
	}
	
	render(){
		const pickerColors = this.state.pickerColors;
		const len = pickerColors.length;
		const degIncrement = 360 / len;
		const pickers = [];
		const radius = 100;
		const pickerAnimationDelay = 0.1;
		let i=0;
		let delay;
		for(i=0; i<len; i+=1){
			const degrees = i*degIncrement;
			const rad = degrees * Math.PI / 180;
			delay = pickerAnimationDelay * i;
			let coordinateObject = {};
			let x = radius * Math.cos(rad);
			let y = radius * Math.sin(rad);
			coordinateObject.x = x;
			coordinateObject.y = y;
						
			pickers.push(
				<Picker 
					transformCoordinates={coordinateObject}
					pickerIsActive={this.state.active}
					pickerClicked={this.setBackgroundColor}
					pickerColor={pickerColors[i]}
					delay={delay}
				/>);
			
		}
		return(
			<div 
				style={{backgroundColor: this.state.bgColor}} 
				className="color-picker-container">
				<svg 
					viewBox="0 0 100 100"
					preserveAspectRatio="none"
					className="svg-sliders"
					>
					{this.state.sliders}
				</svg>
				<div className="btn-container">
					<div className={"btn"+ (this.state.active===true ? " active" : "")} onClick={this.togglePickers}>
						<div className="small-dot" style={{transitionDelay: (this.state.active!==true ? delay+"s" : "0s")}}></div>
						<div className="big-dot" style={{transitionDelay: (this.state.active!==true ? delay-0.2+"s" : "0.2s")}}></div>
						
					</div>
				</div>
				<div className="selector-container">
					<div 
						ref={(selectors) => { this.selectors = selectors; }}
						className="selectors">
							{pickers}
					</div>
				</div>
			</div>
		)
	}
}

class Picker extends React.Component{
	constructor(props) {
    super(props);
    this.pickerClicked = this.pickerClicked.bind(this);
    this.state = {
			active: false
		};
  }
	pickerClicked(){
		this.props.pickerClicked(this.props.pickerColor);
	}
	render(){
		return(
			<span 
				style={
					(this.props.pickerIsActive ? 
					 {
						backgroundColor: this.props.pickerColor,
						transform: "translate("+ this.props.transformCoordinates.x +"px, "+ this.props.transformCoordinates.y +"px)",
						transitionDelay: this.props.delay +"s"
					 } : 
					 {
						backgroundColor: this.props.pickerColor,
						transform: "translate(0px,0px)",
					 	transitionDelay: this.props.delay + "s"
					 }
					)
				}
				className="selector" 
				onClick={this.pickerClicked}>
			</span>
		);
	}
}

class Slider extends React.Component{
	constructor(props) {
    super(props);
		this.getRandomIntInclusive = this.getRandomIntInclusive.bind(this);
    this.bounceCurve = this.bounceCurve.bind(this);
		//this.smoothCurve = this.smoothCurve.bind(this);
    this.state = {
			curvePointCoordinates: {
				x:0,
				y:140
			},
			startX: this.getRandomIntInclusive(35, 65),
			startY: 140,
			then : performance.now(),
			start: performance.now()
		};
  }
	componentDidMount(){
		const transitionDuration = this.props.transitionDuration;
		this.slider.style.transition = "none";
		this.slider.style.transform = "translatey(-100%)";
		this.slider.clientHeight;
		this.slider.style.transition = "transform "+transitionDuration+"ms ease-in-out";
		this.slider.style.fill = this.props.bgColor;
		this.slider.style.transform = "translatey(0%)";
		this.bounceCurve();
	}
	getRandomIntInclusive(min, max) {
		min = Math.ceil(min);
		max = Math.floor(max);
		return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
	}

	bounceCurve(){
		
		const now = performance.now();
		const elapsedTime = now - this.state.start;
		const delta = now - this.state.then;
		let spacetoCover = this.state.startY - 100;
		let duration = this.props.transitionDuration;
		//calculate displacement for the time passed
		let currentDisplacement = (spacetoCover/duration) * delta;
		let coordinateY = this.state.curvePointCoordinates.y - currentDisplacement;
		let curvePointCoordinates = {x: this.state.startX, y: coordinateY};
		this.setState({curvePointCoordinates: curvePointCoordinates, then: now});
		if(elapsedTime<this.props.transitionDuration){
			requestAnimationFrame(this.bounceCurve);
		} else{
			const curvePointCoordinates = {x:50, y:100};
			this.setState({curvePointCoordinates: curvePointCoordinates});
		}
	}
	
	render(){
		return(
			<path 
				style={{fill: this.props.bgColor}}
				ref={(slider) => { this.slider = slider; }} 
				d={"M0 0 H100 V100 Q" + this.state.curvePointCoordinates.x + " " + this.state.curvePointCoordinates.y + " 0 100 L 0 0"}/>
		);
	}
}

ReactDOM.render(
  <ColorPicker />,
  document.getElementById('color-picker-root')
);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console