LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
canvas arc
+
linear gradient
CSS
body, html {
  height: 100%;
  width: 100%;
  background: #2a62a9;
  background: -webkit-gradient(linear, left top, left bottom, from(#2a62a9), color-stop(50%, #3392be), to(#3dc8d5));
  background: linear-gradient(to bottom, #2a62a9 0%, #3392be 50%, #3dc8d5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a62a9', endColorstr='#3dc8d5',GradientType=0 );
}

#content {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
#content .description {
  text-align: center;
  font-size: 30px;
  font-weight: 200;
  position: relative;
  color: #fff;
}
#content .description .plus {
  font-weight: bold;
  display: inline-block;
  font-size: 72px;
  line-height: 1;
  margin-top: -10px;
}
#content #circle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
}
JS
var canvas = document.getElementById('circle');
var ctx = canvas.getContext('2d');

var x = 250,
    y = 250,
    radius = 200,
    // 0deg   - 1.5 * Pi,
    // 90deg  - 0   * Pi, 
    // 180deg - 0.5 * Pi, 
    // 270deg - 1   * Pi
    angleStart = 1.5 * Math.PI,
    angleEnd = 0.7 * Math.PI;

//Create gradient
var gradient = ctx.createLinearGradient(0,500,0, 0);
gradient.addColorStop(0, '#c0e674');
gradient.addColorStop(1, '#40d6a5');


//Draw circle
ctx.beginPath();
ctx.arc(x, x, radius, 0, 2*Math.PI, false);
ctx.lineWidth = 30;
ctx.strokeStyle = 'rgba(255,255,255, 0.2)'
ctx.stroke();

//Draw arc
ctx.beginPath();
ctx.arc(x, y, radius, angleStart, angleEnd);
ctx.strokeStyle = gradient;
ctx.lineWidth = 30;
ctx.lineCap = 'round';
ctx.stroke();
Term
Wed, 01/24/2018 - 14:40

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv