` ````
<div></div>
```

` ````
path {
stroke-opacity: 1;
fill: none;
stroke-linecap: round;
stroke-width: 5px;
}
```

` ````
rand = () ->
"#{Math.random().toString(36)}00000000000000000"
.replace /[^a-z]+/g, ""
.slice 0, 5
randomInt = (max,min=0) ->
Math.floor(Math.random() * (max - min) + min)
dt = 0.005
N = 35
margin = {
top: 20,
right: 20,
bottom: 20,
left: 20
}
width = 300 - margin.left - margin.right
height = 300 - margin.top - margin.bottom
line = d3.svg.line()
.tension 0 # Catmull–Rom
.interpolate "basis"
f = (t) ->
a = Math.PI
b = Math.PI - 0.1
c = Math.PI + 0.1
d = Math.PI * Math.PI
j = 3
k = 3
n = 40
m = 160
[
n * Math.sin( b * t * Math.random() * m ) * Math.random() * 1.5,
n * Math.sin( d * t * Math.random() * m ) * Math.random() * 1.5
]
g = () ->
colorName = ""
draw = () ->
points = (f(t) for t in (dt * i for i in [0..N]))
svg = @append "svg"
.attr "viewBox", "0 0 300 300"
.attr "preserveAspectRatio", "xMidYMid"
.attr
"width": width + margin.left + margin.right
"height": height + margin.top + margin.bottom
baseFrequency = "0.02"
numOctaves = "8"
seed = randomInt(100) + ""
stdDeviation = randomInt(6,4) + ""
scale = "100"
filterid = rand()
filter = svg
.append "filter"
.attr
"id": filterid
"width": "300"
"height": "500"
"x": "-50%"
"y": "-50%"
filter
.append "feFlood"
.attr
"flood-color": colors[colorName]
"result": "element"
filter
.append "feTurbulence"
.attr
"baseFrequency": baseFrequency
"type": "fractalNoise"
"numOctaves": numOctaves
"seed": seed
"result": "element_1"
filter
.append "feGaussianBlur"
.attr
"stdDeviation": stdDeviation
"in": "SourceAlpha"
"result": "element_2"
filter
.append "feDisplacementMap"
.attr
"scale": scale
"in": "element_2"
"in2": "element_1"
"result": "element_3"
filter
.append "feComposite"
.attr
"operator": "in"
"in": "element"
"in2": "element_3"
"result": "element_4"
filter
.append "feMerge"
.append "feMergeNode"
.attr
"in": "element_4"
s = svg.append "g"
.datum points
.attr "transform", "translate(150,150) scale(1.5)"
s.append "path"
.attr
"d": line
.style
"filter": "url(#" + filterid + ")"
"stroke": colors[colorName]
draw.colorName = (_) ->
colorName = _
draw
draw
colors = {
"AbsoluteZero": "#0048ba",
"AlienArmpit": "#84de02",
"AlloyOrange": "#c46210",
"Almond": "#efdecd"
}
draw = g().colorName("AbsoluteZero")
sec = d3.select "div"
fig = sec.append "figure"
.call(draw)
```

999px

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Loading
..................

Alt
Opt
Find & Replace

Also see: Tab Triggers