3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<div class="example">

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff{{>graphics-radial-tool-source}}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</div>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<h2>The Radial Gradient Tool</h2>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<p>The Interactive Control modifies the gradient fill.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffAs you drag the center dot, or drag or resize the outer disc,

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffthe fill preview updates. You can also see the fill's

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffproperty values update. The center color, and outer color can also be changed.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffThese are the colors of the gradient stops.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffClick the "Get Code Snippet" button. This code can be copied and pasted

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffinto a graphics instance to reproduce the gradient fill in your code.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</p>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<h2>Using the Generated Code</h2>

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

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffin the text area control. The generated code assumes you will have a separate

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffpage to paste it into. This separate page must contain the following code:

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffA graphics container such as this,</p>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<div id="mygraphiccontainer"></div>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<p>CSS such as this,</p>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff#mygraphiccontainer {

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff position: relative;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff width: 400px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff height: 400px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffand a YUI instance containing a `Graphics` object such as this.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffYUI().use('graphics', function (Y) {

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

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

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // generated code from the radial gradient tool goes here

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff});

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<p>The tool generates pastable code for an `addShape` method that will

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffcreate and render an ellipse. You can change this after it's pasted into

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniffyour code.</p>