diff options
| author | LV-426 <lv-426@taproot.org.il> | 2015-03-23 13:12:43 +0200 |
|---|---|---|
| committer | LV-426 <lv-426@taproot.org.il> | 2015-04-01 22:25:51 +0300 |
| commit | d1e4dd4975aab7374022bac6b276961855622eb9 (patch) | |
| tree | 7718d23306aa8fd00abd8b0310ae4dc4a22b9d4f | |
| parent | f75ce21c1d6101bdd435d8bcf25ded0e0534a380 (diff) | |
creation bubble SVG blur effect
| -rw-r--r-- | res/client/css/by-view/graph-view.scss | 3 | ||||
| -rw-r--r-- | src/client/rz_core.js | 5 | ||||
| -rw-r--r-- | src/client/view/bubble.js | 3 |
3 files changed, 10 insertions, 1 deletions
diff --git a/res/client/css/by-view/graph-view.scss b/res/client/css/by-view/graph-view.scss index 822dd31b..ed00ce92 100644 --- a/res/client/css/by-view/graph-view.scss +++ b/res/client/css/by-view/graph-view.scss @@ -77,7 +77,8 @@ } .circle.bubble { - fill: rgba(255,255,255,0.4); + fill: rgba(87, 154, 202, 0.17); + stroke: rgba(87, 154, 202, 0.17); pointer-events:none; } .circle.exit { diff --git a/src/client/rz_core.js b/src/client/rz_core.js index 299bd674..7eeb62e1 100644 --- a/src/client/rz_core.js +++ b/src/client/rz_core.js @@ -91,6 +91,11 @@ var initDrawingArea = function () { .attr("height", '100%') .attr("pointer-events", "all"); + vis.append('defs').append('filter').attr('id', 'f_blur__creation-circle') + .attr('y', '-10%') + .attr('x', '-10%').append('feGaussianBlur').attr('in', 'SourceGraphic') + .attr('stdDeviation', '15'); + var zoom_g = vis .append("g") .attr("class", "zoom"); diff --git a/src/client/view/bubble.js b/src/client/view/bubble.js index 0b3787b7..c9f45701 100644 --- a/src/client/view/bubble.js +++ b/src/client/view/bubble.js @@ -21,6 +21,9 @@ function Bubble(raw_parent, radius) { circle.className.baseVal = 'circle bubble'; circle.id = 'bubble'; + d3.select('#bubble').attr('stroke-width', 10) + .attr('filter', 'url(#f_blur__creation-circle)') + // reset bubble on radius change and window resize Bacon.combineWith(function (r, _) { return r; }, radius, $(window).asEventStream('resize').toProperty(0)).onValue( function (r) { |