diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.html b/web/gui/src/main/webapp/_bripc/svg-exercise.html
new file mode 100644
index 0000000..676f71a
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+  ~ Copyright 2015 Open Networking Laboratory
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!--
+  ONOS -- SVG mouse over d3 exercise html
+  -->
+
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Upgrade Performance</title>
+
+    <script type="text/javascript" src="../tp/angular.js"></script>
+    <script type="text/javascript" src="../tp/d3.js"></script>
+    <script type="text/javascript" src="svg-exercise.js"></script>
+    <script type="text/javascript" src="../app/fw/util/util.js"></script>
+    <script type="text/javascript" src="../app/fw/util/fn.js"></script>
+
+
+    <style>
+        html,
+        body {
+            background-color: #eee;
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 9pt;
+        }
+        .button {
+            fill: #369;
+            /* TODO: figure out why svg filters are not working */
+            /*filter: url(#innerbevel);*/
+        }
+        svg text {
+            fill: white;
+            letter-spacing: .005em;
+        }
+        defs {
+            display: none;
+        }
+    </style>
+</head>
+
+<body ng-app="svgExercise">
+<div id="svgExDiv" ng-controller="svgExCtrl as ctrl">
+    <improve-performance></improve-performance>
+</div>
+
+<svg>
+    <defs>
+        <filter id="innerbevel" x0="-50%" y0="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
+            <feOffset dy="-1" dx="-1"/>
+            <feComposite in2="SourceAlpha" operator="arithmetic"
+                         k2="-1" k3="1" result="hlDiff"/>
+            <feFlood flood-color="white" flood-opacity=".7"/>
+            <feComposite in2="hlDiff" operator="in"/>
+            <feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
+
+            <feOffset in="blur" dy="3" dx="3"/>
+            <feComposite in2="SourceAlpha" operator="arithmetic"
+                         k2="-1" k3="1" result="shadowDiff"/>
+            <feFlood flood-color="black" flood-opacity="1"/>
+            <feComposite in2="shadowDiff" operator="in"/>
+            <feComposite in2="withGlow" operator="over"/>
+        </filter>
+    </defs>
+</svg>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.js b/web/gui/src/main/webapp/_bripc/svg-exercise.js
new file mode 100644
index 0000000..f1491f4
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/svg-exercise.js
@@ -0,0 +1,145 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- SVG mouse over d3 exercise module
+ */
+
+(function () {
+    'use strict';
+
+    // injected references
+    var $log, fs;
+
+    // constants
+    var btnWidth = 175,
+        btnHeight = 50,
+        hoverZone = 60,
+        pageMargin = 20;
+
+    // svg elements
+    var g;
+
+    // other variables
+    var winWidth, winHeight,
+        mouse;
+
+    // ====================================================
+
+    // helper functions
+    function centeredOnWindow(axis, dim) {
+        return (axis / 2) - (dim / 2);
+    }
+
+    function randomPos() {
+        return {
+            x: Math.random() * winWidth,
+            y: Math.random() * winHeight
+        }
+    }
+
+    function getPosition() {
+        var x = randomPos().x + pageMargin,
+            y = randomPos().y + pageMargin,
+            x1 = x + btnWidth,
+            y1 = y + btnHeight,
+            wwMargin = winWidth - pageMargin,
+            whMargin = winHeight - pageMargin;
+
+        while (x1 >= wwMargin || y1 >= whMargin) {
+            x = randomPos().x + pageMargin;
+            y = randomPos().y + pageMargin;
+            x1 = x + btnWidth;
+            y1 = y + btnHeight;
+        }
+
+        return {
+            x: x,
+            y: y
+        }
+    }
+
+    function gTranslate(x, y) {
+        return 'translate(' + x + ',' + y + ')';
+    }
+
+    function moveButton() {
+        var pos = getPosition(),
+            x = pos.x,
+            y = pos.y;
+        g.transition()
+            .duration(400)
+            .ease('cubic-out')
+            .attr('transform', gTranslate(x, y));
+    }
+
+    angular.module('svgExercise', ['onosUtil'])
+
+        .controller('svgExCtrl', ['$log', function (_$log_) {
+            $log = _$log_;
+        }])
+
+        .directive('improvePerformance', ['FnService', function (_fs_) {
+            fs = _fs_;
+            return {
+                restrict: 'E',
+                link: function (scope, elem, attrs) {
+                    winWidth = fs.windowSize().width;
+                    winHeight = fs.windowSize().height;
+                    var svg = d3.select(elem[0])
+                        .append('svg')
+                        .attr({
+                            width: winWidth + 'px',
+                            height: winHeight + 'px'
+                        });
+                    g = svg.append('g')
+                        .attr('transform',
+                            gTranslate(centeredOnWindow(winWidth, btnWidth),
+                                       centeredOnWindow(winHeight, btnHeight)));
+
+                    var button = g.append('rect')
+                            .attr({
+                                width: btnWidth + 'px',
+                                height: btnHeight + 'px',
+                                rx: '10px',
+                                'class': 'button'
+                            }),
+                        text = g.append('text')
+                            .style('text-anchor', 'middle')
+                            .text('Click for better performance.')
+                            .attr({
+                                x: btnWidth / 2,
+                                y: (btnHeight / 2) + 5
+                            }),
+                        rect = g.append('rect')
+                            .attr({
+                                fill: 'none',
+                                'pointer-events': 'all',
+                                width: btnWidth + hoverZone + 'px',
+                                height: btnHeight + hoverZone + 'px',
+                                x: -(hoverZone / 2),
+                                y: -(hoverZone / 2)
+                            });
+
+                        g.on('mousemove', function () {
+                        mouse = d3.mouse(this);
+                        moveButton();
+                    });
+
+                }
+            };
+        }]);
+}());
\ No newline at end of file