gradient

I know how to draw a simple line: CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); CGContextMoveToPoint(context, x, y); CGContextAddLineToPoint(context, x2, y2); CGContextStrokePath(context); And I know how to do a gradient rectangle, i.g.: CGColorSpaceRef myColorspace=CGColorSpaceCreateDeviceRGB(); size_t num_locations = 2; CGFloat locations[2] = { 1.0, 0.0 }; CGFloat components[8] = { 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0 }; CGGradientRef myGradient = CGGradientCreateWithColorComponents(myColorspace, components, locations, num_locations); CGPoint myStartPoint, myEndPoint;

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links? Look at the custom CSS filters IE can handle http://msdn.microsoft.com/en-us/library/ms532847.aspx The code I use for all browser gradients: background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background:

I'm trying to make a gradient that emits from the middle of the screen in white, and turns to black as it moves toward the edges of the screen. As I make a "normal" gradient like this, I have been experimenting with different shapes: <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4" android:angle="270"/> </shape> When using the "oval"-shape I at least got a round shape, but there were no gradient effect. How can I achieve this?' You can get a circular gradient using android:type="radial

I am trying to create a heat map with gradients that look similar to this: This image shows three points and the gradients blend nicely together. Here is what I am currently doing in my drawing function: public void DrawGradient(int x, int y, Graphics g) { using (var ellipsePath = new GraphicsPath()) { var bounds = new Rectangle(x, y, 100, 100); ellipsePath.AddEllipse(bounds); var brush = new PathGradientBrush(ellipsePath); Color[] colors = { Color.FromArgb(64, 0, 0, 255), Color.FromArgb(140, 0, 255, 0), Color.FromArgb(216, 255, 255, 0), Color.FromArgb(255, 255, 0, 0) }; float[]

Please have a look at this Pen: http://codepen.io/troywarr/pen/VYmbaa What I'm doing here is: defining an SVG symbol ( <symbol> ) defining an SVG linear gradient ( <linearGradient> ) using the <use> element to reference the SVG symbol I've created in the CSS, defining two classes: external , which references the linear gradient defined in this external .svg file (right click and view source) internal , which references the linear gradient defined in the local HTML (which is, I believe, effectively identical to the one in the external file) Because I've applied the internal class to the <svg>

I'm trying to draw a curve in canvas with a linear gradient stoke style along the curve, as in this image . On that page there is a linked svg file that gives instructions on how to accomplish the effect in svg. Maybe a similar method would be possible in canvas? A Demo: http://jsfiddle.net/m1erickson/4fX5D/ It's fairly easy to create a gradient that changes along the path : It's more difficult to create a gradient that changes across the path : To create a gradient across the path you draw many gradient lines tangent to the path: If you draw enough tangent lines then the eye sees the curve as

I'd like to have an enumeration of Colors based on the rainbow colors (red... yellow... green... blue...). I see basically two ways to do that: Create a lookup table containing some important reference colors and interpolate between these. I don't like this idea at all. Apply some more or less fancy math. Probably less, but I don't quite see how it works. Any ideas? (Oh, and while I did some SO research, I found no good results. If this question was already posted, please just point me to the location and I'll delete this.) Edit: I'd prefer to have this independent of the used technology to

I'd like to put a simple loading indicator on my website that's triggered by a script. It should be a simple circle arc that's got a gradient and is spinning while the user is waiting. I haven't tried the animation part, but got stuck on the static styling for now. Here's what I've got so far: <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <defs> <linearGradient id="grad1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="transparent"/> </linearGradient> </defs> <path d="M50 10 A40 40 0 1 0 90 50" stroke="url(#grad1)"