power distribution
#box {
max-width: 300px;
}
svg {
border: 1px solid black;
}
coords_tr = (r, a) ->
[
r * Math.sin(a),
r * Math.cos(a)
]
width = 100
height = 100
m =
top: 10
bottom: 10
right: 10
left: 10
w = width - m.left - m.right
h = height - m.top - m.bottom
# https://css-tricks.com/scale-svg/
# padding-bottom Hack on an Inline <svg> Element
svg = d3.select "#box"
.append "svg"
.attr
"viewBox": "0 0 " + width + " " + height
"preserveAspectRatio": "xMidYMin slice"
"width": "100%"
.style
"padding-bottom": (100 * height / width) + "%"
"height": "1px"
"overflow": "visible"
t = textures.circles()
.complement()
.size 3
.radius 0.3
.fill "black"
svg.call t
g = svg.append "g"
.attr "transform", "translate(" + m.left + "," + m.top + ")"
g.append "circle"
.attr
"cx": w / 2
"cy": h / 2
"r": w / 2
.style
"fill": "black"
#"stroke": t.url()
"stroke-width": 0
helper = (r) ->
if r > 0 then r else 0
# http://www.reddit.com/r/javascript/comments/170hm0/fun_with_mathrandom_and_probability_distributions
for i in [1..2000]
a = Math.random() * 2 * Math.PI
r = w / 2 + 5 * Math.pow(Math.random(),2)
[x,y] = coords_tr r, a
g.append "circle"
.attr
"cx": x + w / 2
"cy": y + w / 2
"r": helper( -0.2 * (r - w / 2) + 1.1)
.style
"fill": "black"
#"stroke": t.url()
"stroke-width": 0
<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://raw.githubusercontent.com/riccardoscalco/textures/master/textures.min.js"></script>