I really want to get this working with no [jQuery](http://en.wikipedia.org/wiki/JQuery) if possible. I'm trying to make the SVG path called "mouth" be animated through the slider with [JavaScript](http://en.wikipedia.org/wiki/JavaScript), so the path will seamlessly move to appear sad or happy.

```
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Pattern editor">
        <meta name="keywords" content="HTML,CSS,SVG,JavaScript">
        <script>
            < ![CDATA[

            function refresh() {
                var slider1 = parseInt(document.getElementById("slider1").value);
                if (slider1 > 0) {
                    var path = document.getElementById('smile');
                    var segments = path.pathSegList;
                    segments.getItem(2).y = +10;
                } else if (slider1 <= 0) {

                    var path = document.getElementById('smile');
                    var segments = path.pathSegList;
                    segments.getItem(2).y = -10;
                }]] >
        </script>
    </head>

    <body onload="refresh()">
         <h1>trying to move the line</h1>

        <div>Circle size:
            <input id="slider1" type="range" min="-10" max="10" onchange="refresh()" />
        </div>
        <svg width="600" height="600">
            <circle id="face" cx="90" cy="90" r="70" stroke="black" stroke-width="1" fill="yellow" />
            <path id="mouth" d="M45,110 C80,110 140,110 150,110" style="fill:none;stroke:deeppink;stroke-width:3" </svg>
    </body>
</html>

```