3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<style scoped>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff#custom-doc { width: 95%; min-width: 950px; }

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff#pagetitle {background-image: url(../../assets/bg_hd.gif);}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff#outerframe {

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff display: inline-block;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff height: 446px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff width: 714px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

090376d4be54e832a15be873e1561b95d3e94e0aJeff Conniff#mygraphiccontainer {

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff display: inline-block;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff top: 100px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff width: 614px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff top: 15px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff left: 34px;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff position: relative;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff.woodgrain{

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff opacity:0.2;

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff filter:alpha(opacity=20);

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</style>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<div class="intro">

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<p>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffThis example shows how to use the `Graphics` to draw the head of a violin.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</p>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<p>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffThe comparable uncompressed .jpg photo image of the violin head was 161KB, .png(24-bit) was 359KB.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffThe Graphics code to render this example is 18KB.

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</p>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</div>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<div class="example">

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff{{>graphics-violin-source}}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</div>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<h2>Path Drawing Tool</h2>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff{{>graphics-path-tool-promotion}}

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<h2>HTML</h2>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff<div id="#outerframe">

090376d4be54e832a15be873e1561b95d3e94e0aJeff Conniff <div id="mygraphiccontainer"></div>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff</div>

3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff```

<h2>CSS</h2>

```

#outerframe {

display: inline-block;

height: 446px;

width: 714px;

}

#mygraphiccontainer {

display: inline-block;

top: 100px;

width: 614px;

top: 15px;

left: 34px;

position: relative;

}

.woodgrain{

opacity:0.2;

filter:alpha(opacity=20);

}

```

<h2>Complete Example Source</h2>

```

{{>graphics-violin-source}}

```