257N/A<style scoped>

0N/A#custom-doc { width: 95%; min-width: 950px; }

0N/A#pagetitle {background-image: url(../../assets/bg_hd.gif);}

0N/A#outerframe {

0N/A display: inline-block;

0N/A height: 446px;

0N/A width: 714px;

0N/A}

0N/A

0N/A#mygraphiccontainer {

0N/A display: inline-block;

0N/A top: 100px;

0N/A width: 614px;

180N/A top: 15px;

0N/A left: 34px;

0N/A position: relative;

0N/A}

0N/A.woodgrain{

0N/A opacity:0.2;

0N/A filter:alpha(opacity=20);

0N/A}

0N/A</style>

0N/A<div class="intro">

0N/A<p>

0N/AThis example shows how to use the `Graphics` to draw the head of a violin.

0N/A</p>

0N/A<p>

0N/AThe comparable uncompressed .jpg photo image of the violin head was 161KB, .png(24-bit) was 359KB.

257N/AThe Graphics code to render this example is 18KB.

</p>

</div>

<div class="example">

{{>graphics-violin-source}}

</div>

<h2>Path Drawing Tool</h2>

{{>graphics-path-tool-promotion}}

<h2>HTML</h2>

```

<div id="#outerframe">

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

</div>

```

<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}}

```