Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                

<button id="ccw">CounterClockwise</button>
<button id="cw">Clockwise</button>

<div id="wrapper">
  <div class="chart-demo">
  <canvas id="radarChart" width="640" height="400"></canvas>
  </div>
  
    <div class="ball-container" id="ball1-container">
      <p>Currency</p>
      <div class="ball"></div>
     </div>
    
    
    <div class="ball-container" id="ball2-container">
      <p>Risk</p>
      <div class="ball"></div>
     </div>
   

  <div class="ball-container" id="ball3-container">
        <p>Concentration</p>
        <div class="ball"></div>
       </div>


  <div class="ball-container" id="ball4-container">
        <p>Review</p>
        <div class="ball"></div>
       </div>

  <div class="ball-container" id="ball5-container">
        <p>Allocation</p>
        <div class="ball"></div>
       </div>
</div> 

    
<!--     <div id="ball2"><p>Risk</p></div>
  </div> -->
              
            
!

CSS

              
                #wrapper {
  position:absolute;
  margin:200px;
  transform: scale(0.5,0.5);
}




.ball-container{
     position: absolute;
  width:50px;
  height:50px;
  border: red 1px solid;
}

.ball-container p {
position: absolute;
      left:50%;
      transform: translate(-50%, 0%);
  
}

.ball {
  position:absolute;
  background:red;
  width:20px;
  height:20px;
  border-radius:50%;
  left:50%;
      transform: translate(-50%, 80%);
}

#ball1 {
  position:absolute;
  background:red;
  width:20px;
  height:20px;
  border-radius:50%;
  left:50%;
      transform: translate(-50%, 80%);
}

#ball2 {
  position:absolute;
  background:green;
  width:20px;
  height:20px;
  border-radius:50%;
  left:50%;
  transform: translate(-50%, 80%);
}

/*  */

.chart-demo {
  position:absolute;
  margin-left:-110px;
  margin-top:10px;
  transform: rotate(180deg);
}

              
            
!

JS

              
                console.clear();
var log = console.log.bind(console);

// Radar Chart Options
var radarOptions = {
				
	//Boolean - If we show the scale above the chart data			
	scaleOverlay : false,
	
	//Boolean - If we want to override with a hard coded scale
	scaleOverride : false,
	
	//** Required if scaleOverride is true **
	//Number - The number of steps in a hard coded scale
	scaleSteps : null,
	//Number - The value jump in the hard coded scale
	scaleStepWidth : null,
	//Number - The centre starting value
	scaleStartValue : null,
	
	//Boolean - Whether to show lines for each scale point
	scaleShowLine : true,

	//String - Colour of the scale line	
	scaleLineColor : "#999",
	
	//Number - Pixel width of the scale line	
	scaleLineWidth : 1,

	//Boolean - Whether to show labels on the scale	
	scaleShowLabels : false,
	
	//Interpolated JS string - can access value
	scaleLabel : "<%=value%>",
	
	//String - Scale label font declaration for the scale label
	scaleFontFamily : "'Arial'",
	
	//Number - Scale label font size in pixels	
	scaleFontSize : 12,
	
	//String - Scale label font weight style	
	scaleFontStyle : "normal",
	
	//String - Scale label font colour	
	scaleFontColor : "#666",
	
	//Boolean - Show a backdrop to the scale label
	scaleShowLabelBackdrop : true,
	
	//String - The colour of the label backdrop	
	scaleBackdropColor : "rgba(255,255,255,0.75)",
	
	//Number - The backdrop padding above & below the label in pixels
	scaleBackdropPaddingY : 2,
	
	//Number - The backdrop padding to the side of the label in pixels	
	scaleBackdropPaddingX : 2,
	
	//Boolean - Whether we show the angle lines out of the radar
	angleShowLineOut : true,
	
	//String - Colour of the angle line
	angleLineColor : "rgba(255,255,255,0.3)",
	
	//Number - Pixel width of the angle line
	angleLineWidth : 1,			
	
	//String - Point label font declaration
	pointLabelFontFamily : "'Arial'",
	
	//String - Point label font weight
	pointLabelFontStyle : "normal",
	
	//Number - Point label font size in pixels	
	pointLabelFontSize : 12,
	
	//String - Point label font colour	
	pointLabelFontColor : "#EFEFEF",
	
	//Boolean - Whether to show a dot for each point
	pointDot : true,
	
	//Number - Radius of each point dot in pixels
	pointDotRadius : 3,
	
	//Number - Pixel width of point dot stroke
	pointDotStrokeWidth : 1,
	
	//Boolean - Whether to show a stroke for datasets
	datasetStroke : true,
	
	//Number - Pixel width of dataset stroke
	datasetStrokeWidth : 1,
	
	//Boolean - Whether to fill the dataset with a colour
	datasetFill : true,
	
	//Boolean - Whether to animate the chart
	animation : true,

	//Number - Number of animation steps
	animationSteps : 60,
	
	//String - Animation easing effect
	animationEasing : "easeOutQuart",

	//Function - Fires when the animation is complete
	onAnimationComplete : null
	
}

// Radar Data
var radarData = {
	labels : ["", "","","",""],
	datasets : [
		{
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			data : [65,59,90,81,56]
		}
	]
}

// Create the Radar Chart
var ctx = document.getElementById("radarChart").getContext("2d");
var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions);



/*///////////////////////////////////////////////////////////////////////////////////////////////////////
TIMELINE

//////////////////////////////////////////////////////////////////////////////////////////////////////*/

var chartRotationStep = 360;
// var tl = new TimelineMax({});
var tl = new TimelineMax({ paused: true, repeat: -1 });
var tlChart = new TimelineMax({});
/*tl.add(anim-ball1);
tl.add(anim-ball2);
*/
//tlChart.insert(TweenMax.to($("#radarChart"), 3, {rotation:chartRotationStep }));



TweenMax.set("#ball1-container", {x:75,y:34})
TweenMax.set("#ball2-container", {x:9,y:242});
TweenMax.set("#ball3-container", {x:184,y:368, scaleX:2, scaleY:2});
TweenMax.set("#ball4-container", {x:360,y:240});
TweenMax.set("#ball5-container", {x:292,y:34});

//TweenMax.set("#radarChart", {rotation:180});


/*
sommet1
{x:75,y:34},{x:9,y:242},{x:184,y:368},{x:360,y:240},{x:292,y:34}

sommet2
{x:9,y:242},{x:184,y:368},{x:360,y:240},{x:292,y:34},{x:75,y:34}

sommet3
{x:184,y:368},{x:360,y:240},{x:292,y:34},{x:75,y:34},{x:9,y:242}

sommet4
{x:360,y:240},{x:292,y:34},{x:75,y:34},{x:9,y:242},{x:184,y:368}

sommet5
{x:292,y:34},{x:75,y:34},{x:9,y:242},{x:184,y:368},{x:360,y:240}



*/



// curviness:1.5
tl.add(
 TweenMax.to("#ball1-container", 3 ,
{bezier:{curviness:0.5,values:[{x:75,y:34, scaleX:1, scaleY:1},{x:9,y:242, scaleX:1, scaleY:1},{x:184,y:368, scaleX:2, scaleY:2},{x:360,y:240, scaleX:1, scaleY:1},{x:292,y:34, scaleX:1, scaleY:1},{x:75,y:34, scaleX:1, scaleY:1}]},
ease:Power0.easeNone}));

tl.insert(
TweenMax.to("#ball2-container", 3 ,{
bezier:{curviness:0.5,values:[{x:9,y:242, scaleX:1, scaleY:1},{x:184,y:368, scaleX:2, scaleY:2},{x:360,y:240, scaleX:1, scaleY:1},{x:292,y:34, scaleX:1, scaleY:1},{x:75,y:34, scaleX:1, scaleY:1},{x:9,y:242, scaleX:1, scaleY:1}]}
,ease:Power0.easeNone}));

tl.insert(
TweenMax.to("#ball3-container", 3 ,{
bezier:{curviness:0.5,values:[{x:184,y:368, scaleX:2, scaleY:2},{x:360,y:240, scaleX:1, scaleY:1},{x:292,y:34, scaleX:1, scaleY:1},{x:75,y:34, scaleX:1, scaleY:1},{x:9,y:242, scaleX:1, scaleY:1},{x:184,y:368, scaleX:2, scaleY:2}]}
,ease:Power0.easeNone}));

tl.insert(
TweenMax.to("#ball4-container", 3 ,{
bezier:{curviness:0.5,values:[{x:360,y:240, scaleX:1, scaleY:1},{x:292,y:34, scaleX:1, scaleY:1},{x:75,y:34, scaleX:1, scaleY:1},{x:9,y:242, scaleX:1, scaleY:1},{x:184,y:368, scaleX:2, scaleY:2},{x:360,y:240, scaleX:1, scaleY:1}]}
,ease:Power0.easeNone}));

tl.insert(
TweenMax.to("#ball5-container", 3 ,{
bezier:{curviness:0.5,values:[{x:292,y:34, scaleX:1, scaleY:1},{x:75,y:34, scaleX:1, scaleY:1},{x:9,y:242, scaleX:1, scaleY:1},{x:184,y:368, scaleX:2, scaleY:2},{x:360,y:240, scaleX:1, scaleY:1},{x:292,y:34, scaleX:1, scaleY:1}]}
,ease:Power0.easeNone}));


// tl.stop();
// tl.play();
// var progressStep = 0.6;
// tl.progress(progressStep).timeScale(0);
// var chartRotationStepTemp = 72;

class RadarAnimation {
  
  constructor(config) {
        
    this._rotation = 0;
    this._progress = 0; 
    
    Object.assign(this, config);
       
    this.step = this.progress * this.steps;   
        
    this.endRotation = this._rotation || 0;
    this.endProgress = this._progress || 0;   
    
    this.rotationUnit = 360 / this.steps;
    this.progressUnit = 1   / this.steps;
    
    this.animation = new TimelineMax();   
  }
  
  get progress() { return this._progress; }
  set progress(n) { 
    this._progress = n;
    this.timeline.progress(n); 
  }
  
  get rotation() { return this._rotation; }
  set rotation(n) { 
    this._rotation = n;
    TweenLite.set(this.chart, { rotationZ: n });
  }
    
  setStep(step = 0, duration = 0, config = {}) {
    
    this.animation.clear();
    
    // CCW
    if (step < this.step) {    
      this.timeline.reversed(false);      
      this.endRotation -= this.rotationUnit;
      this.endProgress += this.progressUnit;
    }
    
    // CW
    if (step > this.step) {
      this.timeline.reversed(true);      
      this.endRotation += this.rotationUnit;
      this.endProgress -= this.progressUnit;
    }
        
    this.step = step;
    
    Object.assign(this.animation.vars, config);
    
    this.animation.to(this, duration, {
      rotation: this.endRotation,
      progress: this.endProgress
    });    
  }
  
  playCW(duration, config) {
    this.setStep(this.step + 1, duration, config);
  }
  
  playCCW(duration, config) {
    this.setStep(this.step - 1, duration, config);
  }
}

var radarAnimation = new RadarAnimation({
  chart: $("#radarChart"),
  steps: 5,
  timeline: tl,
  progress: 0.6,
  rotation: 0
});

$("#ccw").click(function() {
    
  radarAnimation.playCCW(0.5, {
    onComplete: function() { log("FINISHED CCW"); }
  });
});

$("#cw").click(function() {
  radarAnimation.playCW(0.5, {
    onComplete: function() { log("FINISHED CW"); }
  });
});

// $("#ccw").click(function(){
   
//   chartRotationStep -= 72 ;
//   if(chartRotationStep === 0){
//     chartRotationStep = 360;
//   }
  
//   TweenMax.to($("#radarChart"), 0.5, {rotationZ:chartRotationStep +"_ccw"}) //
  
//   // SUMMITS
//   console.log("-- ccw progressStep before",progressStep);
//   if(progressStep  === 1){ 
//     progressStep = 0.2; 
//     tl.progress(progressStep).timeScale(0);
//     console.log("-- ccw set progressStep", progressStep);
//   }
//   else {progressStep += 0.2;}
  
//   console.log("-- ccw progressStep after",progressStep);
//   var tempTween = TweenMax.to(tl, 0.5, {progress:progressStep, onComplete:function(){
//     //console.log("ccw progressStep", progressStep);
//     if(progressStep  === 1){ progressStep = 0; }
 
//     tl.progress(progressStep).timeScale(0);
//     tempTween.kill();
//     console.log("-- ccw progressStep end", progressStep);
//   }});
  
// })

// $("#cw").click(function(){
   
//   // CHARTS
//   chartRotationStep += 72 ;
//   if(chartRotationStep > 360){
//     chartRotationStep = 72;
//   }
//   TweenMax.to($("#radarChart"), 0.5, {rotationZ:chartRotationStep+"_cw"})
  
  
//   // SUMMITS
//   console.log("cw progressStep before",progressStep);
//   progressStep = Math.abs( Math.round( (progressStep-0.2) * 10 ) / 10);
//   console.log("cw progressStep after",progressStep);

//  var tempTween =  TweenMax.to(tl, 0.5, {progress:progressStep, onComplete:function(){
    
//     if(progressStep  === 0){
//       progressStep = 1;
//       tl.progress(progressStep).timeScale(0);
      
//     }
//     tempTween.kill();
//     console.log("cw progressStep end", progressStep);
//   }});
// })

/**/

/*

TweenMax.to("#ball2", 3 ,{
bezier:{curviness:1.5,values:[{x:200,y:100},{x:100,y:0},{x:0,y:100},{x:100,y:200},{x:200,y:100}]}
,ease:Power0.easeNone,repeat:-1});

*/






// var R = 200 ; 
// TweenMax.to("#ball", 3 ,{
// bezier:{curviness:1.5,values:[{x:0,y:0},{x:-R/2,y:R/2},{x:0,y:R},{x:R/2,y:R/2},{x:0,y:0}]}
// ,ease:Power0.easeNone,repeat:-1});

/* another method :
var R = 200 , El = document.getElementById('myObj') ;
TweenMax.to(El, 5 ,{ transformOrigin:"50% "+(R/2+El.offsetWidth/2)+"px", rotation:360 , ease:Power0.easeNone , repeat:-1 })
*/
              
            
!
999px

Console