24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<div class="example">

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock{{>graphics-radial-tool-source}}

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock</div>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<h2>The Radial Gradient Tool</h2>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<p>The Interactive Control modifies the gradient fill.

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockAs you drag the center dot, or drag or resize the outer disc,

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockthe fill preview updates. You can also see the fill's

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockproperty values update. The center color and outer color can also be changed.

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockThese are the colors of the gradient stops.

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockClick the "Get Code Snippet" button. This code can be copied and pasted

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockinto a graphics instance to reproduce the gradient fill in your code.

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock</p>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<h2>Using the Generated Code</h2>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<p>When you click the "Get Code Snippet" button, generated code is placed

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockin the text area control. The generated code assumes you will have a separate

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockpage to paste it into. This separate page must contain the following code:

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockA graphics container such as this,</p>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock```

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<div id="mygraphiccontainer"></div>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock```

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<p>CSS such as this,</p>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock```

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock#mygraphiccontainer {

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock position: relative;

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock width: 400px;

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock height: 400px;

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock}

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock```

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockand a YUI instance containing a `Graphics` object such as this.

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock```

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockYUI().use('graphics', function (Y) {

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock // generated code from the radial gradient tool goes here

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock});

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock```

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock<p>The tool generates paste-able code for an `addShape` method that will

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockcreate and render an ellipse. You can change this after it's pasted into

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrockyour code.</p>

24db46411fd54f70c35b94bb952eb7ba040e43b4eschrock