HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
dataLine = 'M-9.3590822,119.086998L56.637619,21.5918713l43.4978256,95.9952011L161.63237,33.5912704l34.4982758,94.4952774l68.9965515-139.4930267l70.49646,155.9922028l58.4971008-122.9938507l28.4985657,101.9948959l31.4984131-46.497673l31.4984436,37.4981232l43.4978333-29.998497l25.4987183,31.4984207L599.6104736,60.58992l61.4969482,61.4969254L719.6044922,8.0925455l32.9983521,115.4942245c0,0,50.9974365-52.4973755,55.4971924-52.4973755s68.996582,73.4963303,68.996582,73.4963303L932.593811,27.5915699l109.4945679,88.495575l56.9970703-149.9924927l154.4923096,163.4918213l67.496582-83.9958038l74.9963379,68.9965515l136.4931641-131.9933929L1579.0615234,100l56.9970703-67.9086533l23.9989014,46.497673l40.4979248-49.4975243L1781.5513916,100l62.9968262-52.9094048l49.4975586,58.4970741l37.4980469-112.4943771l53.9973145,97.4951248l35.998291-68.9965439';
var linePath = new Path(dataLine);
linePath.strokeColor = '#231f20';
linePath.strokeWidth = 4;
//linePath.fullySelected = true;
var amount = linePath.segments.length;
var center = view.center;
function onFrame(event) {
// Loop through the segments of the path:
for (var i = 0; i <= amount; i++) {
var path = linePath;
var segment = path.segments[i];
// A cylic value between -1 and 1
var sinus = Math.sin(event.time * 3 + i);
// Change the y position of the segment point:
segment.point.y = sinus * 1 + center.y;
}
}
function onMouseDrag(event) {
var location = linePath.getNearestLocation(event.point);
var segment = location.segment;
var point = segment.point;
if (!point.fixed && location.distance < 600 / 4) {
var y = event.point.y;
point.y += (y - point.y) / 6;
if (segment.previous && !segment.previous.fixed) {
var previous = segment.previous.point;
previous.y += (y - previous.y) / 24;
}
if (segment.next && !segment.next.fixed) {
var...
CSS
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
/*********
STYLES
*********/
canvas {
width: 100%;
height: 100%
}