Tags » CSS 3

Arc Graph

On Github

https://github.com/SalmanMunawar/graph

Code


/**
 * Created by Salman Munawar on 1/4/2015.
 */
(function () {

    "use strict";

    var draw = {

        circle: function (params) {

            //Canvas Api:
            //arc(cx, y, radius, startAngle, endAngle, direction)

            /*
             Circle Function API
             draw.circle({

                     canvas: DOM Element,
                     size: Canvas size,
                     radius: Circle Size,
                     color: Circle color
             });
             */

            if (params.canvas) {

                var
                    canvas = params.canvas,
                    size = parseInt(params.size, 10) || 128,
                    radius = parseInt(params.radius, 10) || 64,
                    color = params.color || "#eeeeee",

                    xCoord = size / 2,
                    yCoord = size / 2,

                    ctx = canvas.getContext("2d");

                ctx.beginPath();
                ctx.arc(xCoord, yCoord, radius, 0, Math.PI * 2);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.closePath();

            } else {

                console.error("Please select canvas");

            }

        },
        arc: function (params) {

            //Canvas Api:
            //arc(cx, y, radius, startAngle, endAngle, direction)

            /*
             Arc Function API
             draw.arc({
                     canvas: DOM element,
                     size: Canvas size,
                     radius: Arc Size,
                     color: Arc color,
                     percentage: Arc percentage,
                     width: Thickness of arc
             });
             */

            if (params.canvas) {

                var
                    canvas = params.canvas,
                    size = parseInt(params.size, 10) || 128,
                    radius = parseInt(params.radius, 10) || 64,
                    color = params.color || "#eeeeee",
                    width= params.width || 8,
                    percentage = params.percentage ? 146 more words
HTML 5

PSD to HTML Site

This is my creating PSD to HTML Site. Style with Bootstrap-3.

https://db.tt/GThu1Uxi

Bootstrap

The Sports Loft NYC

Designed and Coded

Highlights

  • Full Screen Layout
  • Flat and Responsive Design

Branding

#f1c40f#1e2a36#34495e

Logo

Fonts

Lato

See it in action

launch project

Portfolio