Skip to content

Instantly share code, notes, and snippets.

@mohamedkhanafer

mohamedkhanafer/.block

Created February 8, 2020 12:40
Show Gist options
  • Save mohamedkhanafer/24ec1fa108529e31711be9b6b26f2da4 to your computer and use it in GitHub Desktop.
Save mohamedkhanafer/24ec1fa108529e31711be9b6b26f2da4 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="120" width="600" text-anchor="middle">
<circle cx="200" cy="50" r="30" filter="url(#drop-shadow)" fill="red"/>
</svg>
<script> var d3Graph = d3.select('svg')
var dropShadowFilter = d3Graph.append('svg:filter')
.attr('id', 'drop-shadow')
.attr('filterUnits', "userSpaceOnUse")
.attr('width', '250%')
.attr('height', '250%');
dropShadowFilter.append('svg:feGaussianBlur')
.attr('in', 'SourceGraphic')
.attr('stdDeviation', 2)
.attr('result', 'blur-out');
dropShadowFilter.append('svg:feColorMatrix')
.attr('in', 'blur-out')
.attr('type', 'hueRotate')
.attr('values', 180)
.attr('result', 'color-out');
dropShadowFilter.append('svg:feOffset')
.attr('in', 'color-out')
.attr('dx', 3)
.attr('dy', 3)
.attr('result', 'the-shadow');
dropShadowFilter.append('svg:feBlend')
.attr('in', 'SourceGraphic')
.attr('in2', 'the-shadow')
.attr('mode', 'normal');
var simpleGradient = d3Graph.append('defs')
.append('radialGradient')
.attr('id', 'fake-shadow');
simpleGradient.append('stop')
.attr('offset', "80%")
.attr('stop-color', '#01AFAF');
simpleGradient.append('stop')
.attr('offset', "100%")
.attr('stop-color', "#01AFAF00");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment