dd68f827968d5a55f4656a413c8af8b1c032d08fTripp<div class="example">

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp{{>graphics-radial-tool-source}}

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp</div>

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp<h2>The Radial Gradient Tool</h2>

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp<p>The Interactive Control modifies the gradient fill.

dd68f827968d5a55f4656a413c8af8b1c032d08fTrippAs you drag the center dot, or drag or resize the outer disc,

dd68f827968d5a55f4656a413c8af8b1c032d08fTrippthe fill preview updates. You can also see the fill's

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

dd68f827968d5a55f4656a413c8af8b1c032d08fTrippThese are the colors of the gradient stops.

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

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

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp</p>

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp<h2>Using the Generated Code</h2>

7888277d51428db45a0221d0ca9626c04d31a06fJeff Conniff<p>When you click the "Get Code Snippet" button, generated code is placed

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

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

dd68f827968d5a55f4656a413c8af8b1c032d08fTrippA graphics container such as this,</p>

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp```

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp<div id="mygraphiccontainer"></div>

7888277d51428db45a0221d0ca9626c04d31a06fJeff Conniff```

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp<p>CSS such as this,</p>

7888277d51428db45a0221d0ca9626c04d31a06fJeff Conniff```

7888277d51428db45a0221d0ca9626c04d31a06fJeff Conniff#mygraphiccontainer {

7888277d51428db45a0221d0ca9626c04d31a06fJeff Conniff position: relative;

7888277d51428db45a0221d0ca9626c04d31a06fJeff Conniff width: 400px;

7888277d51428db45a0221d0ca9626c04d31a06fJeff Conniff height: 400px;

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp}

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp```

dd68f827968d5a55f4656a413c8af8b1c032d08fTrippand a YUI instance containing a `Graphics` object such as this.

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp```

dd68f827968d5a55f4656a413c8af8b1c032d08fTrippYUI().use('graphics', function (Y) {

bd8602ea6a0a0749b673d9ee28d1ae8d5808175bJeff Conniff

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

90bd96bbf37f7fd7382f44a6aa79eeae355265e4Jeff Conniff // generated code from the radial gradient tool goes here

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp});

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp```

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

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

dd68f827968d5a55f4656a413c8af8b1c032d08fTrippyour code.</p>

dd68f827968d5a55f4656a413c8af8b1c032d08fTripp