JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<h1>conical gradients in Canvas and SVG</h1>
<canvas id="canvas" width="100" height="100"></canvas>
   
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0%" stop-color="blue"/>
            <stop offset="100%" stop-color="blue" stop-opacity="0"/>
        </linearGradient>
    </defs>
    <path d="M50 10  A40 40 0 1 0 90 50"
        stroke="url(#gradient)" stroke-width="5" fill="none"/>
</svg>

CSS

.background {
    background: #090;
}

svg {
  //border: 1px solid blue;
}

svg #gradient stop {
  stop-color: deeppink;
}

canvas,
svg {
    animation: spin 1s infinite linear;
    //border: 1px solid green;
    float: left;
    margin: 0 10px;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

JavaScript

// canvas example
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = 5;
var size = canvas.width;

ctx.translate(size/4, size/4);
var colourPart = ctx.createLinearGradient(0, 0, 0, size/2);
colourPart.addColorStop(0, 'blue');
colourPart.addColorStop(1, 'blue');

var whitePart = ctx.createLinearGradient(0, 0, 0, size/2);
whitePart.addColorStop(0, 'white');
whitePart.addColorStop(1, 'blue');

ctx.lineWidth = width;

// First we make a clipping region for the left half
ctx.save();
ctx.beginPath();
ctx.rect(-width, -width, (size/4)+width, size/2 + width*2);
ctx.clip();

// Then we draw the left half
ctx.strokeStyle = colourPart;
ctx.beginPath();
ctx.arc(size/4, size/4, size/4, 0, Math.PI*2);
ctx.stroke();

ctx.restore(); // restore clipping region to default

// Then we make a clipping region for the right half
ctx.save();
ctx.beginPath();
ctx.rect(size/4, -width, (size/4)+width, (size/2) + width*2);
ctx.clip();

// Then we draw the right half
ctx.strokeStyle = whitePart;
ctx.beginPath();
ctx.arc(size/4, size/4, size/4, 0, Math.PI*2, false);
ctx.stroke();
ctx.restore();