Simple Radiant Gradient

HTML5 canvas demos

by borcagos

HTML

<script src="https://github.com/mistic100/tinygradient/blob/master/tinygradient.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>TinyGradient</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <style>
        body {
            background: #eee;
        }
        section {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            margin: 15px 0;
            padding: 0 10px 10px 10px;
        }
        article .out {
            width: 100%;
            height: 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
        }
        article .out.css {
            margin-bottom: 0;
        }
        article .out div {
            flex-grow: 1;
            position: relative;
        }
        article .out div:after {
            content: attr(title);
            position: absolute;
            bottom: -15px;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>

<body>

<div class="container-fluid">
    <h1 style="text-align: center">TinyGradient</h1>
</div>

<script src="../bower_components/tinycolor/tinycolor.js"></script>
<script src="../tinygradient.js"></script>

JavaScript

function addExample(colors, steps) {
        var positions = [0, 0.25, 0.5, 0.75, 1];
        var grad = tinygradient(colors);
        var html = '<section class="col-md-6">';
        // CSS
        html += '<article><h4>CSS reference</h4>';
        html += '<div class="out css" style="background:' + grad.css() + ';"></div>';
        html += '</article>';
        // RGB
        html += '<article><h4>RGB interpolation</h4>';
        html += '<div class="out rgb">';
        grad.rgb(steps).forEach(function(color) {
            html += '<div style="background:' + color.toRgbString() + ';" title="' + color.toHexString() + '"></div>';
        });
        html += '</div></article>';
        // HSV
        html += '<article><h4>HSV short interpolation</h4>';
        html += '<div class="out hsv">';
        grad.hsv(steps, 'short').forEach(function(color) {
            html += '<div style="background:' + color.toRgbString() + ';" title="' + color.toHexString() + '"></div>';
        });
        html += '</div></article>';
        // HSV2
        html += '<article><h4>HSV long interpolation</h4>';
        html += '<div class="out hsv2">';
        grad.hsv(steps, 'long').forEach(function(color) {
            html += '<div style="background:' + color.toRgbString() + ';" title="' + color.toHexString() + '"></div>';
        });
        html += '</div></article>';
        // AT (RGB)
        html += '<article><h4>AT (RGB)</h4>';
        html += '<div class="out">';
        positions.forEach(function(pos) {
            var color = grad.rgbAt(pos);
            html += '<div style="background:' + color.toRgbString() + ';" title="' + (pos*100) + '% : ' + color.toHexString() + '"></div>';
        });
        html += '</div></article>';
        // AT (HSV)
        html += '<article><h4>AT (HSV)</h4>';
        html += '<div class="out">';
        positions.forEach(function(pos) {
            var color = grad.hsvAt(pos);
            html += '<div style="background:' +...