bsc/clubinfo-2024-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

paper.js

Browse Source
This commit is contained in:
bach
2025-02-07 16:38:56 +01:00
parent 803e4407f4
commit b1c9f6170b
186 changed files with 178519 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paper.js/assets/paperjs/examples/Animated/AnimatedStar.html
+53
View File
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animated Star</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var layer = project.activeLayer;
var values = {
count: 34,
points: 32
};
for (var i = 0; i < values.count; i++) {
var path = new Path({
fillColor: i % 2 ? 'red' : 'black',
closed: true
});
var offset = new Point(20 + 10 * i, 0);
var l = offset.length;
for (var j = 0; j < values.points * 2; j++) {
offset.angle += 360 / values.points;
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
path.add(offset + vector);
}
path.smooth({ type: 'continuous' });
layer.insertChild(0, new Group({
children: [path],
applyMatrix: false
}));
}
function onFrame(event) {
for (var i = 0; i < values.count; i++) {
var item = layer.children[i];
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
item.rotate(angle);
}
}
// Reposition the paths whenever the window is resized:
function onResize(event) {
layer.position = view.center;
}
</script>
</head>
<body>
<canvas id="canvas" resize stats hidpi="off"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Animated/BooleanOperations.html
+115
View File
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boolean Operations</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText({
position: view.center + [0, 200],
fillColor: 'black',
justification: 'center',
fontSize: 20
});
var originals = new Group({ insert: false }); // Don't insert in DOM.
var square = new Path.Rectangle({
position: view.center,
size: 300,
parent: originals,
fillColor: 'white'
});
// Make a ring using subtraction of two circles:
var inner = new Path.Circle({
center: view.center,
radius: 100,
parent: originals,
fillColor: 'white'
});
var outer = new Path.Circle({
center: view.center,
radius: 140,
parent: originals,
fillColor: 'white'
});
var ring = outer.subtract(inner);
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
var colors = ['red', 'green', 'blue', 'black'];
var curIndex = -1;
var operation, result, activeItem;
// Change the mode every 3 seconds:
setInterval(setMode, 3000);
// Set the initial mode:
setMode();
function setMode() {
curIndex++;
if (curIndex == operations.length * 2)
curIndex = 0;
operation = operations[curIndex % operations.length];
}
function onMouseDown(event) {
var hitResult = originals.hitTest(event.point);
activeItem = hitResult && hitResult.item;
}
function onMouseDrag(event) {
if (activeItem)
activeItem.position = event.point;
}
function onMouseUp() {
activeItem = null;
square.position = view.center;
}
function onFrame(event) {
if (activeItem != ring) {
// Move the ring around:
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
ring.position = view.center + offset;
}
// Remove the result of the last path operation:
if (result)
result.remove();
// Perform the path operation on the ring:
if (curIndex < operations.length) {
result = square[operation](ring);
text.content = 'square.' + operation + '(ring)';
} else {
result = ring[operation](square);
text.content = 'ring.' + operation + '(square)';
}
result.selected = true;
result.fillColor = colors[curIndex % colors.length];
result.moveBelow(text);
// If the result is a group, color each of its children differently:
if (result instanceof Group) {
for (var i = 0; i < result.children.length; i++) {
result.children[i].fillColor = colors[i];
}
}
};
function onResize() {
text.position = view.center + [0, 200];
square.position = view.center;
}
</script>
</head>
<body>
<canvas id="canvas" resize stats></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Animated/CandyCrash.html
+151
View File
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Candy Crash</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// kynd.info 2014
function Ball(r, p, v) {
this.radius = r;
this.point = p;
this.vector = v;
this.maxVec = 15;
this.numSegment = Math.floor(r / 3 + 2);
this.boundOffset = [];
this.boundOffsetBuff = [];
this.sidePoints = [];
this.path = new Path({
fillColor: {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
},
blendMode: 'lighter'
});
for (var i = 0; i < this.numSegment; i ++) {
this.boundOffset.push(this.radius);
this.boundOffsetBuff.push(this.radius);
this.path.add(new Point());
this.sidePoints.push(new Point({
angle: 360 / this.numSegment * i,
length: 1
}));
}
}
Ball.prototype = {
iterate: function() {
this.checkBorders();
if (this.vector.length > this.maxVec)
this.vector.length = this.maxVec;
this.point += this.vector;
this.updateShape();
},
checkBorders: function() {
var size = view.size;
if (this.point.x < -this.radius)
this.point.x = size.width + this.radius;
if (this.point.x > size.width + this.radius)
this.point.x = -this.radius;
if (this.point.y < -this.radius)
this.point.y = size.height + this.radius;
if (this.point.y > size.height + this.radius)
this.point.y = -this.radius;
},
updateShape: function() {
var segments = this.path.segments;
for (var i = 0; i < this.numSegment; i ++)
segments[i].point = this.getSidePoint(i);
this.path.smooth();
for (var i = 0; i < this.numSegment; i ++) {
if (this.boundOffset[i] < this.radius / 4)
this.boundOffset[i] = this.radius / 4;
var next = (i + 1) % this.numSegment;
var prev = (i > 0) ? i - 1 : this.numSegment - 1;
var offset = this.boundOffset[i];
offset += (this.radius - offset) / 15;
offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
}
},
react: function(b) {
var dist = this.point.getDistance(b.point);
if (dist < this.radius + b.radius && dist != 0) {
var overlap = this.radius + b.radius - dist;
var direc = (this.point - b.point).normalize(overlap * 0.015);
this.vector += direc;
b.vector -= direc;
this.calcBounds(b);
b.calcBounds(this);
this.updateBounds();
b.updateBounds();
}
},
getBoundOffset: function(b) {
var diff = this.point - b;
var angle = (diff.angle + 180) % 360;
return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
},
calcBounds: function(b) {
for (var i = 0; i < this.numSegment; i ++) {
var tp = this.getSidePoint(i);
var bLen = b.getBoundOffset(tp);
var td = tp.getDistance(b.point);
if (td < bLen) {
this.boundOffsetBuff[i] -= (bLen - td) / 2;
}
}
},
getSidePoint: function(index) {
return this.point + this.sidePoints[index] * this.boundOffset[index];
},
updateBounds: function() {
for (var i = 0; i < this.numSegment; i ++)
this.boundOffset[i] = this.boundOffsetBuff[i];
}
};
//--------------------- main ---------------------
var balls = [];
var numBalls = 18;
for (var i = 0; i < numBalls; i++) {
var position = Point.random() * view.size;
var vector = new Point({
angle: 360 * Math.random(),
length: Math.random() * 10
});
var radius = Math.random() * 60 + 60;
balls.push(new Ball(radius, position, vector));
}
function onFrame() {
for (var i = 0; i < balls.length - 1; i++) {
for (var j = i + 1; j < balls.length; j++) {
balls[i].react(balls[j]);
}
}
for (var i = 0, l = balls.length; i < l; i++) {
balls[i].iterate();
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Animated/Extruded.html
+50
View File
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Extruded</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var lineGroup = new Group();
var lineCount = 100;
for (var i = 0; i < lineCount; i++) {
var linePath = new Path.Line([0, 0], [0, 0]);
lineGroup.addChild(linePath);
}
lineGroup.strokeColor = 'red';
var path1 = new Path('M63.39307,265.71387c10.8667,6.96631 26.4707,12.26025 43.18896,12.26025c24.79932,0 39.28857,-13.09619 39.28857,-32.04346c0,-17.27588 -10.03125,-27.58545 -35.38721,-37.05908c-30.65088,-11.146 -49.59814,-27.30713 -49.59814,-53.49902c0,-29.25732 24.2417,-50.9917 60.74365,-50.9917c18.94727,0 33.1582,4.4585 41.23877,9.19531L156.18018,133.35986c-5.85156,-3.62256 -18.39014,-8.9165 -35.38721,-8.9165c-25.63525,0 -35.3877,15.3252 -35.3877,28.14258c0,17.5542 11.42432,26.19238 37.33789,36.22314c31.76514,12.26025 47.64795,27.58545 47.64795,55.1709c0,28.979 -21.17676,54.33496 -65.48096,54.33496c-18.11133,0 -37.89502,-5.57275 -47.92578,-12.26025z');
path1.position = view.center;
var path2 = path1.clone();
path1.scale(1.5);
path2.scale(2);
var length1 = path1.length;
var length2 = path2.length;
function onFrame(event) {
var vector = new Point({
angle: -event.count % 360,
length: 100
});
path1.rotate(-0.5);
path1.position = view.center - vector;
path2.rotate(-0.5);
path2.position = view.center + vector.normalize(50);
for (var i = 0; i < lineCount; i++) {
var path = lineGroup.children[i];
var l1 = (length1 / lineCount * (i + event.count / 10)) % length1;
var l2 = (length2 / lineCount * (i + event.count / 10)) % length2;
path.firstSegment.point = path1.getPointAt(l1),
path.lastSegment.point = path2.getPointAt(l2);
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Animated/Lines.html
+53
View File
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lines</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var amount = 45;
for (var i = 0; i < amount; i++) {
var path = new Path({
fillColor: {
hue: 1,
saturation: 1,
brightness: Math.random()
},
closed: true
});
}
var position = view.center;
var mousePos = view.center;
var children = project.activeLayer.children;
function iterate(count) {
var delta = mousePos - position;
position += delta / 10;
for (var i = 1; i < amount; i++) {
var path = children[i];
var length = Math.abs(Math.sin(i + count / 40) * 300);
path.segments = [
position + delta / 1.5,
position + { angle: i / amount * 360, length: length },
position + { angle: (i + 1) / amount * 360, length: length }
];
path.fillColor.hue = count - length;
}
}
function onFrame(event) {
iterate(event.count);
}
function onMouseMove(event) {
iterate();
mousePos = event.point;
}
</script>
</head>
<body style="background:black">
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Animated/Smoothing.html
+70
View File
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Smoothing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var width, height, center;
var points = 10;
var smooth = true;
var path = new Path({
fillColor: 'black'
});
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
initializePath();
function initializePath() {
center = view.center;
width = view.size.width;
height = view.size.height / 2;
path.segments = [];
path.add(view.bounds.bottomLeft);
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y);
path.add(point);
}
path.add(view.bounds.bottomRight);
path.fullySelected = true;
}
function onFrame(event) {
pathHeight += (center.y - mousePos.y - pathHeight) / 10;
for (var i = 1; i < points; i++) {
var sinSeed = event.count + (i + i % 10) * 100;
var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
path.segments[i].point.y = yPos;
}
if (smooth)
path.smooth({ type: 'continuous' });
}
function onMouseMove(event) {
mousePos = event.point;
}
function onMouseDown(event) {
smooth = !smooth;
if (!smooth) {
// If smooth has been turned off, we need to reset
// the handles of the path:
for (var i = 0, l = path.segments.length; i < l; i++) {
var segment = path.segments[i];
segment.handleIn = segment.handleOut = null;
}
}
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Animated/Space.html
+86
View File
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Space</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// The amount of symbol we want to place;
var count = 150;
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: new Point(0, 0),
radius: 5,
fillColor: 'white',
strokeColor: 'black'
});
var symbol = new SymbolDefinition(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placed = symbol.place(center);
var scale = (i + 1) / count;
placed.scale(scale);
placed.data.vector = new Point({
angle: Math.random() * 360,
length : scale * Math.random() / 5
});
}
var vector = new Point({
angle: 45,
length: 0
});
var mouseVector = vector.clone();
function onMouseMove(event) {
mouseVector = view.center - event.point;
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
vector = vector + (mouseVector - vector) / 30;
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
}
function keepInView(item) {
var position = item.position;
var itemBounds = item.bounds;
var bounds = view.bounds;
if (itemBounds.left > bounds.width) {
position.x = -item.bounds.width;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width + itemBounds.width;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Animated/SpaceUsingShapes.html
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Space</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// The amount of symbol we want to place;
var count = 150;
project.currentStyle = {
fillColor: 'white'
};
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var scale = (i + 1) / count;
var path = new Shape.Circle(center, 5 * scale);
path.data.vector = new Point({
angle: Math.random() * 360,
length : scale * Math.random() / 5
});
}
var vector = new Point({
angle: 45,
length: 0
});
var mouseVector = vector.clone();
function onMouseMove(event) {
mouseVector = view.center - event.point;
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
vector = vector + (mouseVector - vector) / 30;
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
}
function keepInView(item) {
var position = item.position;
var itemBounds = item.bounds;
var bounds = view.bounds;
if (itemBounds.left > bounds.width) {
position.x = -item.bounds.width;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width + itemBounds.width;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Games/Paperoids.html
+569
View File
@@ -0,0 +1,569 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Paperoids</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
//
//
// Paperoids - an Asteroids clone for paper.js
//
// Sorry nerds, no enemy ships or sound just yet.
//
// Version: 1.2.1
// Author: David Hirmes (@hirmes)
// Date: 2011-08-09
//
// Revision History:
// 1.0 - 2011-07-13 - Initial release
// 1.1 - 2011-07-13 - Optimizations by Jonathan Puckey (@jonathanpuckey)
// 1.2 - 2011-07-16 - Refactored with closures (@jonathanpuckey)
// 1.2.1- 2011-08-09 - bug fixes
//
var presets = {
speed: 0.2,
maxRockSpeed: 4.5,
rockCount: 6,
lives: 3,
freeShipScore: 10000,
freeShipIncrement: 10000
};
function initialize() {
Rocks.add(presets.rockCount);
Score.update();
Lives.initialize();
}
function onKeyUp(event) {
if (event.key == 'space') {
Ship.moveTo(Point.random() * view.size);
Ship.stop();
}
if (event.key == 'z') {
Ship.fire();
}
// Show stats:
if (event.key == 'f') {
var stats = document.getElementById('stats');
if (stats) {
stats.style.display = (stats.style.display == 'block')
? 'none' : 'block';
}
}
}
function onFrame() {
Bullets.move();
Rocks.iterateExplosions();
Ship.checkCollisions();
if (Key.isDown('left')) {
Ship.turnLeft();
}
if (Key.isDown('right')) {
Ship.turnRight();
}
if (Key.isDown('up')) {
Ship.thrust();
} else {
Ship.coast();
}
Ship.move();
}
project.currentStyle.strokeColor = 'white';
var Game = {
roundDelay: false,
over: function() {
document.getElementById('gameover').style.display = 'block';
},
newRound: function() {
Game.roundDelay = false;
Rocks.add(presets.rockCount);
},
// Stats.js by Mr. Doob - https://github.com/mrdoob/stats.js
};
var assets = {
destroyedShip: new function() {
var group = new Group(
new Path([-10, -8], [10, 0]),
new Path([10, 0], [-10, 8]),
new Path([-8, 4], [-8, -4])
);
group.visible = false;
return group;
},
explosion: new function() {
var explosionPath = new Path.Circle(new Point(), 1);
explosionPath.fillColor = 'white';
explosionPath.strokeColor = null;
return new SymbolDefinition(explosionPath);
}
};
var Ship = new function() {
var path = new Path([-10, -8], [10, 0], [-10, 8], [-8, 4], [-8, -4]);
path.closed = true;
var thrust = new Path([-8, -4], [-14, 0], [-8, 4]);
var group = new Group(path, thrust);
group.position = view.bounds.center;
return {
item: group,
angle: 0,
vector: new Point({
angle: 0.2,
length: 1
}),
turnLeft: function() {
group.rotate(-3);
this.angle -= 3;
},
turnRight: function() {
group.rotate(3);
this.angle += 3;
},
thrust: function() {
thrust.visible = true;
this.vector += new Point({
angle: this.angle,
length: presets.speed
});
if (this.vector.length > 8) {
this.vector.length = 8;
}
},
stop: function() {
this.vector.length = 0;
},
fire: function() {
if (!this.dying)
Bullets.fire(this.item.position, this.angle);
},
coast: function() {
thrust.visible = false;
this.vector *= .992;
},
move: function() {
group.position += this.vector;
keepInView(group);
},
moveTo: function(position) {
group.position = position;
keepInView(group);
},
destroy: function() {
this.destroyedShip = assets.destroyedShip.clone();
this.destroyedShip.position = this.item.position;
this.destroyedShip.visible = true;
this.item.visible = false;
this.stop();
this.item.position = view.center;
this.dying = true;
},
destroyed: function() {
this.item.visible = true;
this.stop();
this.item.position = view.center;
this.dying = false;
this.destroyedShip.visible = false;
},
checkCollisions: function() {
var crashRock;
// move rocks and do a hit-test
// between bounding rect of rocks and ship
for (var i = 0; i < Rocks.children.length; i++) {
var rock = Rocks.children[i];
rock.position += rock.vector;
if (rock.bounds.intersects(this.item.bounds))
crashRock = rock;
keepInView(rock);
}
if (this.dying) {
var children = this.destroyedShip.children;
children[0].position.x++;
children[1].position.x--;
children[2].position.x--;
children[2].position.y++;
children[0].rotate(1);
children[1].rotate(-1);
children[2].rotate(1);
this.destroyedShip.opacity *= 0.98;
// don't update anything else if the ship is already dead.
return;
}
// if bounding rect collision, do a line intersection test
if (crashRock) {
var tempRock = crashRock.symbol.definition.clone();
tempRock.transform(crashRock.matrix);
tempRock.remove();
var intersections = this.item.firstChild.getIntersections(tempRock);
if (intersections.length > 0)
Lives.remove();
}
}
};
};
var Bullets = new function() {
var group = new Group();
var children = group.children;
function checkHits(bullet) {
for (var r = 0; r < Rocks.children.length; r++) {
var rock = Rocks.children[r];
if (rock.bounds.contains(bullet.position) ) {
Score.update(rock.shapeType);
Rocks.explode(rock);
if (rock.shapeType < Rocks.TYPE_SMALL ) {
for (var j = 0; j < 2; j++) {
Rocks.add(1, rock.shapeType + 4, rock.position);
}
}
rock.remove();
bullet.remove();
}
}
}
return {
fire: function(position, angle) {
// We can only fire 5 bullets at a time:
if (children.length == 5)
return;
var vector = new Point({
angle: angle,
length: 10
});
var bullet = new Path.Circle({
center: position + vector,
radius: 0.5,
parent: group,
fillColor: 'white',
strokeWidth: 'white',
strokeWidth: 0,
data: {
vector: vector,
timeToDie: 58
}
});
},
move: function() {
for (var i = 0; i < children.length; i++) {
var bullet = children[i];
bullet.data.timeToDie--;
if (bullet.data.timeToDie < 1) {
bullet.remove();
} else {
bullet.position += bullet.data.vector;
checkHits(bullet);
keepInView(bullet);
}
}
}
};
};
var Rocks = new function() {
var group = new Group();
var shapes = [
new Path(
[-23, -40.5], [0, -30.5], [24, -40.5], [45, -21.5], [25, -12.5],
[46, 9.5], [22, 38.5], [-10, 30.5], [-22, 40.5], [-46, 18.5],
[-33, 0.5], [-44, -21.5], [-23, -40.5]),
new Path(
[-45, -9.5], [-12, -40.5], [24, -40.5], [46, -11.5], [45, 10.5],
[24, 40.5], [0, 40.5], [0, 10.5], [-23, 38.5], [-46, 9.5], [-25, 0.5],
[-45, -9.5]),
new Path([-21.5, -39.5], [11.5, -39.5], [45.5, -20.5],
[45.5, -8.5], [9.5, 0.5], [44.5, 21.5], [22.5, 39.5], [9.5, 31.5],
[-20.5, 39.5], [-45.5, 10.5], [-45.5, -20.5], [-11.5, -21.5],
[-21.5, -39.5]),
new Path(
[-22.5, -40.5], [-0.5, -19.5], [23.5, -39.5], [44.5, -21.5],
[33.5, 0.5], [46.5, 19.5], [13.5, 40.5], [-22.5, 39.5], [-46.5, 18.5],
[-46.5, -18.5], [-22.5, -40.5])
];
// medium rocks
for (var i = 4; i < 8; i++) {
shapes[i] = shapes[i - 4].clone();
shapes[i].scale(0.5);
}
// small rocks
for (var i = 8; i < 12; i++) {
shapes[i] = shapes[i - 4].clone();
shapes[i].scale(0.4);
}
var rockSymbols = [];
for (var i = 0; i < shapes.length; i++) {
rockSymbols[i] = new SymbolDefinition(shapes[i]);
}
var explosions = new Group();
return {
shapes: shapes,
children: group.children,
make: function(type, pos) {
var randomRock = type + Math.floor(4 * Math.random());
var rock = rockSymbols[randomRock].place();
rock.position = pos ? pos : Point.random() * view.size;
rock.vector = new Point({
angle: 360 * Math.random(),
length: presets.maxRockSpeed * Math.random() + 0.1
});
rock.shapeType = type;
return rock;
},
add: function(amount, type, position) {
for (var i = 0; i < amount; i++) {
var rock = this.make(type || this.TYPE_BIG, position);
group.addChild(rock);
}
},
explode: function(rock) {
var boomRock = rock.symbol.definition.clone();
boomRock.position = rock.position;
for (var i = 0; i < boomRock.segments.length; i++) {
var segmentPoint = boomRock.segments[i].point;
var placed = assets.explosion.place(segmentPoint);
placed.vector = (placed.position - rock.position) * 0.1;
explosions.addChild(placed);
}
boomRock.remove();
},
iterateExplosions: function() {
for (var i = 0; i < explosions.children.length; i++) {
var explosion = explosions.children[i];
explosion.vector.length *= .7;
explosion.position += explosion.vector;
explosion.opacity = explosion.vector.length;
if (explosion.vector.length < 0.05 ) {
explosion.remove();
// if no more rocks, wait a second and start a new round
if (this.children.length < 1 && !Game.roundDelay) {
Game.roundDelay = true;
presets.rockCount += 2;
setTimeout(Game.newRound, 1000);
}
}
}
},
TYPE_BIG: 0,
TYPE_MEDIUM: 4,
TYPE_SMALL: 8
};
};
var Score = new function() {
var numberGroup = new Group(
new Path([0, 0], [20, 0], [20, 27], [0, 27], [0, 0]),
new Path([10, 0], [10, 27]),
new Path([0, 0], [20, 0], [20, 14], [0, 14], [0, 27], [20, 27]),
new Path([0, 0], [20, 0], [20, 14], [0, 14], [20, 14], [20, 27], [0, 27]),
new Path([0, 0], [0, 14], [20, 14], [20, 0], [20, 27]),
new Path([20, 0], [0, 0], [0, 14], [20, 14], [20, 27], [0, 27]),
new Path([20, 0], [0, 0], [0, 27], [20, 27], [20, 14], [0, 14]),
new Path([0, 0], [20, 0], [0, 27]),
new Path([0, 0], [20, 0], [20, 27], [0, 27], [0, 0], [0, 14], [20, 14]),
new Path([20, 14], [0, 14], [0, 0], [20, 0], [20, 27])
);
numberGroup.visible = false;
var scoreDisplay = new Group();
var score = 0;
return {
update: function(type) {
if (type == Rocks.TYPE_BIG) score += 20;
if (type == Rocks.TYPE_MEDIUM) score += 50;
if (type == Rocks.TYPE_SMALL) score += 100;
if (score >= presets.freeShipScore) {
Lives.add(1);
presets.freeShipScore += presets.freeShipIncrement;
}
scoreDisplay.removeChildren();
var scoreString = score + '';
for (var i = 0; i < scoreString.length; i++) {
var n = parseInt(scoreString[i], 10);
scoreDisplay.addChild(numberGroup.children[n].clone());
scoreDisplay.lastChild.position = [22 + i * 24, 22];
}
}
};
};
var Lives = new function() {
var currentLives;
var shipPath = Ship.item.firstChild.clone();
project.activeLayer.addChild(shipPath);
shipPath.visible = false;
Ship.visible = false;
var group = new Group();
return {
initialize: function() {
currentLives = presets.lives;
this.display();
},
add: function() {
currentLives++;
this.display();
},
remove: function() {
currentLives--;
this.display();
Ship.destroy();
setTimeout(function() {
if (currentLives == 0) {
Game.over();
} else {
Ship.destroyed();
}
}, 1200);
},
display: function() {
group.removeChildren();
for (var i = 0;i < currentLives - 1; i++) {
var copy = shipPath.clone();
copy.rotate(-90);
copy.visible = true;
group.addChild(copy);
copy.position = [22+ i * copy.bounds.width, 53];
}
}
};
};
initialize();
// Stop left and right keyboard events from propagating.
function onKeyDown(event) {
if (event.key == 'left' || event.key == 'right') {
return false;
}
}
function keepInView(item) {
var position = item.position;
var itemBounds = item.bounds;
var bounds = view.bounds;
if (itemBounds.left > bounds.width) {
position.x = -item.bounds.width;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
<style type="text/css">
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
body {
background: #000;
font-family:Helvetica,Arial;
}
.footer {
position:absolute;
bottom:0;
color:#ff0000;
background-color: rgba(60,60,60,0.8);
font-size:0.75em;
padding:0.5em;
color:#ddd;
width: 100%
}
.footer a {
color: #fff;
font-weight:
bold; text-decoration: none;
border-bottom: 1px solid #555;
}
.footer b {
background-color: #660000;
padding-left: 0.25em;
padding-right: 0.25em;
}
.gameover {
display: none;
position: absolute;
left: 40%;
top: 40%;
color: #fff;
background-color: rgba(60,60,60,0.8);
padding: 32px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.gameover a {
color: #fff;
font-weight: bold;
}
#stats {
position: absolute;
left: auto !important;
right: 0px;
}
</style>
</head>
<body>
<canvas id="canvas" resize stats></canvas>
<div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>&#8592;</b> and <b>&#8594;</b> to rotate. <b>&#8593;</b> for thrust. <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div>
<div id="gameover" class="gameover">Game Over. <a href="Paperoids.html">Play again</a>?</div>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Circle Testing.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var topLeft = new Point(200, 200);
var size = new Size(150, 100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'yellow';
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Compound Path.html
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Compound Path</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Empty Path Testing.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var path3 = new Path();
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Gradients.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Circle({
center: view.center,
radius: view.bounds.height * 0.4
});
path.fillColor = {
stops: ['yellow', 'red', 'black'],
radial: true,
origin: path.position,
destination: path.bounds.rightCenter
}
var symbol = new SymbolDefinition(path);
symbol.place(view.center);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Group Transform.html
+28
View File
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group Transform</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = 'red';
var circle2 = new Path.Circle(new Point(200, 100), 50);
circle2.fillColor = 'blue';
var group = new Group(circle1, circle2);
group.translate([100, 100]);
group.scale(0.5);
group.rotate(10);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Line Testing.html
+44
View File
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Random Path Testing.html
+42
View File
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var center = new Point(100, 100);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
var center = new Point(100, 300);
var sides = 10;
var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black';
var center = new Point(100, 400);
var points = 6;
var radius1 = 20;
var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Raster.html
+29
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/JSON/Rect and Attribute Testing.html
+56
View File
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
var point2 = new Point(75, 75);
var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
path2.strokeColor = 'red';
path2.strokeWidth = '4';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point3 = new Point(150, 150);
var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3);
path3.strokeColor = 'blue';
var point4 = new Point(200, 200);
var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Rotated Primitives.html
+55
View File
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotated Primitives</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
// This "arbitrary" shape triggered rectangles in the original code,
// since point2 is as far from point0 as point3 is from point1.
var path = new Path({
closed: true,
strokeColor: 'black'
});
path.moveTo(0, 0);
path.lineTo(50, 50);
path.lineTo(100, 100);
path.lineTo(-50, 150);
path.position += 100;
var rect = new Path.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var circle = new Path.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var rect = new Path.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Selection.html
+43
View File
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Ellipse({
from: [10, 10],
to: [200, 100],
fillColor: 'red'
});
path.firstSegment.handleOut.selected = true;
var circle = new Path.Circle({
center: [50, 150],
radius: 25,
fillColor: 'blue'
});
circle.selected = true;
var rectangle = new Path.Rectangle({
from: [25, 200],
to: [100, 225],
fillColor: 'green'
});
rectangle.lastSegment.point.selected = true;
var group = new Group(circle, rectangle);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Shapes.html
+54
View File
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circle = new Shape.Circle({
center: [100, 100],
radius: 50,
fillColor: 'red'
});
var ellipse = new Shape.Ellipse({
center: [100, 200],
radius: [50, 25],
fillColor: 'blue',
strokeColor: 'black',
strokeWidth: 4,
rotation: 20
});
var rect = new Shape.Rectangle({
center: [100, 300],
size: [100, 50],
fillColor: 'green',
strokeColor: 'black',
strokeWidth: 4,
rotation: -20
});
var roundRect = new Shape.Rectangle({
center: [100, 400],
size: [50, 100],
radius: [15, 20],
fillColor: 'orange',
strokeColor: 'black',
strokeWidth: 4,
rotation: 20
});
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Symbols.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var ellipse = new Path.Ellipse({
from: [0, 0],
to: [200, 100],
fillColor: 'red'
});
var symbol = new SymbolDefinition(ellipse);
var p1 = symbol.place([100, 100]);
p1.rotate(45);
var p2 = symbol.place([300, 200]);
p2.rotate(-30);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Text Testing.html
+38
View File
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
/*
text.scale(5);
text.translate(15, 15);
text.rotate(20);
text.shear(20, 5);
*/
text.rotate(45);
text.shear(.85, .15);
text.scale(.85, 2);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Tiger.html
+19
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/JSON/Transform Test 1.html
+32
View File
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
var clones = 30;
var angle = 360 / clones;
for (var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/JSON/Transform Test 2.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Node.js/AnimatedStar.js
+52
View File
@@ -0,0 +1,52 @@
// Please note: When loading paper as a normal module installed in node_modules,
// you would use this instead:
// var paper = require('paper-jsdom-canvas');
var paper = require('../../dist/paper-core.js');
paper.setup(new paper.Size(1024, 768));
var layer = paper.project.activeLayer;
var values = {
count: 34,
points: 32
};
initialize();
paper.view.exportFrames({
amount: 100,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
});
function initialize() {
for (var i = 0; i < values.count; i++) {
var offset = new paper.Point(20 + 10 * i, 0);
var path = new paper.Path();
path.fillColor = i % 2 ? 'red' : 'black';
path.closed = true;
var l = offset.length;
for (var j = 0; j < values.points * 2; j++) {
offset.angle += 360 / values.points;
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
path.add(offset.add(vector));
}
path.smooth();
layer.insertChild(0, path);
}
layer.fitBounds(paper.view.bounds);
}
paper.view.onFrame = function(event) {
for (var i = 0, l = layer.children.length; i < l; i++) {
var item = layer.children[i];
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
item.rotate(angle);
}
};
paper.js/assets/paperjs/examples/Node.js/BooleanOperations.js
+36
View File
@@ -0,0 +1,36 @@
// Please note: When loading paper as a normal module installed in node_modules,
// you would use this instead:
// var paper = require('paper-jsdom-canvas');
var paper = require('../../dist/paper-core.js');
var http = require('http');
http.createServer(function(request, response) {
var canvas = paper.createCanvas(800, 800);
paper.setup(canvas);
with(paper) {
var style = {
fillColor: new Color(1, 1, 0, 0.5),
strokeColor: new Color(0, 0, 0),
strokeWidth: 1.5
};
var first = new Path.Rectangle([50, 50], [150, 150]);
first.style = style;
var second = first.clone().translate(50, 50);
second.style = style;
var intersection = first.subtract(second);
intersection.style = style;
intersection.translate(250, 0);
view.update();
}
var stream = canvas.pngStream();
stream.on('data', function(chunk) {
response.write(chunk);
});
stream.on('end', function() {
response.end();
});
}).listen(3000);
console.log('Server running at http://127.0.0.1:3000/');
paper.js/assets/paperjs/examples/Node.js/JSONtoPDF.js
+20
View File
@@ -0,0 +1,20 @@
// Please note: When loading paper as a normal module installed in node_modules,
// you would use this instead:
// var paper = require('paper-jsdom-canvas');
var paper = require('../../dist/paper-core.js');
var path = require('path');
var fs = require('fs');
var canvas = paper.createCanvas(612, 792, 'pdf');
paper.setup(canvas);
fs.readFile('./in.json', { encoding: 'utf8' }, function (err, data) {
if (err)
throw err;
paper.project.importJSON(data);
paper.view.update();
fs.writeFile(path.resolve('./out.pdf'), canvas.toBuffer(), function (err) {
if (err)
throw err;
console.log('Saved!');
});
});
paper.js/assets/paperjs/examples/Node.js/Raster.js
+32
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Node.js/RasterRemote.js
+33
View File
@@ -0,0 +1,33 @@
// Please note: When loading paper as a normal module installed in node_modules,
// you would use this instead:
// var paper = require('paper-jsdom-canvas');
var paper = require('../../dist/paper-core.js');
var fs = require('fs');
var canvas = paper.createCanvas(800, 600);
paper.setup(canvas);
var url = 'http://assets.paperjs.org/images/marilyn.jpg';
var raster = new paper.Raster(url);
raster.position = paper.view.center;
raster.onLoad = function() {
paper.view.update();
console.log('The image has loaded:' + raster.bounds);
// Saving the canvas to a file.
out = fs.createWriteStream(__dirname + '/canvas.png');
stream = canvas.pngStream();
stream.on('data', function(chunk) {
out.write(chunk);
});
stream.on('end', function() {
console.log('saved png');
});
};
raster.onError = function(message) {
console.error(message);
};
paper.js/assets/paperjs/examples/Node.js/SvgExport.js
+52
View File
@@ -0,0 +1,52 @@
// Please note: When loading paper as a normal module installed in node_modules,
// you would use this instead:
// var paper = require('paper-jsdom-canvas');
var paper = require('../../dist/paper-core.js');
var path = require('path');
var fs = require('fs');
with (paper) {
paper.setup(new Size(300, 600));
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
var radius = view.bounds.width * 0.4,
from = new Point(view.center.x),
to = from.add(radius, 0);
var circle = new Path.Circle({
center: from,
radius: radius,
fillColor: {
stops: stops,
radial: true,
origin: from,
destination: to
},
strokeColor: 'black'
});
var from = view.bounds.leftCenter,
to = view.bounds.bottomRight;
var rect = new Path.Rectangle({
from: from,
to: to,
fillColor: {
stops: stops,
radial: false,
origin: from,
destination: to
},
strokeColor: 'black'
});
rect.rotate(45).scale(0.7);
var svg = project.exportSVG({ asString: true });
console.log(svg);
fs.writeFile(path.resolve('./out.svg'), svg, function (err) {
if (err) throw err;
console.log('Saved!');
});
}
paper.js/assets/paperjs/examples/Node.js/SvgImport.js
+23
View File
@@ -0,0 +1,23 @@
// Please note: When loading paper as a normal module installed in node_modules,
// you would use this instead:
// var paper = require('paper-jsdom-canvas');
var paper = require('../../dist/paper-core.js');
paper.setup(new paper.Size(300, 600));
paper.project.importSVG('in.svg', {
onLoad: function(item) {
paper.view.exportFrames({
amount: 1,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
});
},
onError: function(message) {
console.error(message);
}
});
paper.js/assets/paperjs/examples/Node.js/Tadpoles.js
+16
View File
@@ -0,0 +1,16 @@
// Please note: When loading paper as a normal module installed in node_modules,
// you would use this instead:
// var paper = require('paper-jsdom-canvas');
var paper = require('../../dist/paper-full.js');
var scope = require('./Tadpoles.pjs')(new paper.Size(1024, 768));
scope.view.exportFrames({
amount: 400,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
});
paper.js/assets/paperjs/examples/Node.js/Tadpoles.pjs
+278
View File
@@ -0,0 +1,278 @@
// Adapted from Flocking Processing example by Daniel Schiffman:
// http://processing.org/learning/topics/flocking.html
project.currentStyle = {
strokeColor: 'white',
strokeWidth: 2,
strokeCap: 'round'
};
new Path.Rectangle(view.bounds).fillColor = 'black';
var head = new Path.Ellipse([0, 0], [13, 8]);
head.fillColor = 'white';
head.strokeColor = null;
var headSymbol = new SymbolDefinition(head);
var size = view.size;
var Boid = Base.extend({
initialize: function(position, maxSpeed, maxForce) {
var strength = Math.random() * 0.5;
this.acc = new Point(0, 0);
this.vel = Point.random() * 2 - 1;
this.loc = position.clone();
this.r = 30;
this.maxSpeed = maxSpeed + strength;
this.maxForce = maxForce + strength;
this.head = headSymbol.place();
this.path = new Path();
this.shortPath = new Path();
this.shortPath.strokeWidth = 4;
for (var i = 0, l = strength * 10 + 10; i < l; i++) {
this.path.add(this.loc);
if (i < 3)
this.shortPath.add(this.loc);
}
this.firstSegment = this.path.segments[0];
this.count = 0;
this.lastRot = 0;
},
run: function(boids) {
this.lastLoc = this.loc.clone();
if (!groupTogether) {
this.flock(boids);
} else {
this.align(boids);
}
this.borders();
this.update();
this.firstSegment.point = this.loc;
var lastPoint = this.firstSegment.point;
var lastVector = this.loc - this.lastLoc;
var segments = this.path.segments;
for (var i = 1, l = segments.length; i < l; i++) {
var segment = segments[i];
var vector = lastPoint - segment.point;
this.count += this.vel.length * 10;
var rotLength = Math.sin((this.count + i * 3) / 300);
var rotated = lastVector.rotate(90).normalize(rotLength);
lastPoint += lastVector.normalize(-5 - this.vel.length / 3);
segment.point = lastPoint;
segment.point += rotated;
lastVector = vector;
}
this.path.smooth();
this.head.position = this.loc;
var vector = this.loc - this.lastLoc;
var rot = vector.angle;
this.head.rotate(rot - this.lastRot);
this.lastRot = rot;
var shortSegments = this.shortPath.segments;
for (var i = 0; i < 3; i++)
shortSegments[i] = segments[i].clone();
},
// We accumulate a new acceleration each time based on three rules
flock: function(boids) {
var sep = this.separate(boids) * 3;
var ali = this.align(boids);
var coh = this.cohesion(boids);
this.acc += sep + ali + coh;
},
update: function() {
// Update velocity
this.vel += this.acc;
// Limit speed (vector#limit?)
this.vel.length = Math.min(this.maxSpeed, this.vel.length);
this.loc += this.vel;
// Reset acceleration to 0 each cycle
this.acc.length = 0;
},
seek: function(target) {
this.acc += this.steer(target, false);
},
arrive: function(target) {
this.acc += this.steer(target, true);
},
// A method that calculates a steering vector towards a target
// Takes a second argument, if true, it slows down as it approaches
// the target
steer: function(target, slowdown) {
var steer,
desired = target - this.loc,
d = desired.length;
if (d > 0) {
// Two options for desired vector magnitude
// (1 -- based on distance, 2 -- maxSpeed)
if (slowdown && d < 100) {
// // This damping is somewhat arbitrary:
desired.length = this.maxSpeed * (d / 100);
} else {
desired.length = this.maxSpeed;
}
steer = desired - this.vel;
steer.length = Math.min(this.maxForce, steer.length);
} else {
steer = new Point(0, 0);
}
return steer;
},
borders: function() {
var loc = this.loc;
var r = this.r;
var oldLoc = this.loc.clone();
var width = size.width;
var height = size.height;
if (loc.x < -r) loc.x = width + r;
if (loc.y < -r) loc.y = height + r;
if (loc.x > width + r) loc.x = -r;
if (loc.y > height + r) loc.y = -r;
var vector = this.loc - oldLoc;
if (!vector.isZero())
this.path.position += vector;
},
separate: function(boids) {
var desiredSeperation = 60;
var steer = new Point(0, 0);
var count = 0;
// For every boid in the system, check if it's too close
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = other.loc.getDistance(this.loc);
if (d > 0 && d < desiredSeperation) {
// Calculate vector pointing away from neighbor
var diff = this.loc - other.loc;
steer += diff.normalize(1 / d);
count++;
}
}
// Average -- divide by how many
if (count > 0)
steer /= count;
if (steer.length > 0) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vel;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
// Alignment
// For every nearby boid in the system, calculate the average velocity
align: function(boids) {
var neighborDist = 25;
var steer = new Point(0, 0);
var count = 0;
var nearest = 999;
var closestPoint;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
if (d > 0 && d < nearest) {
closestPoint = other.loc;
nearest = d;
}
if (d > 0 && d < neighborDist) {
steer += other.vel;
count++;
}
}
if (count > 0)
steer /= count;
if (steer.length > 0) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vel;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
// Cohesion
// For the average location (i.e. center) of all nearby boids,
// calculate steering vector towards that location
cohesion: function(boids) {
var neighborDist = 100;
var sum = new Point(0, 0);
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
if (d > 0 && d < neighborDist) {
sum += other.loc; // Add location
count++;
}
}
if (count > 0) {
sum /= count;
// Steer towards the location
return this.steer(sum, false);
}
return sum;
}
});
var heartPath = new Path([
[[514.6962890625, 624.703125], [7.0966796875, -26.3369140625], [-7.10205078125, -27.0244140625]],
[[484.29052734375, 548.6025390625], [13.16845703125, 23.7060546875], [-13.173828125, -23.70703125]],
[[407.84619140625, 438.14453125], [37.79296875, 49.935546875], [-27.71630859375, -36.6435546875]],
[[356.654296875, 368.400390625], [6.41015625, 9.8505859375], [-10.53759765625, -16.02978515625]],
[[333.80712890625, 324.25146484375], [4.69189453125, 13.3994140625], [-4.697265625, -13.39892578125]],
[[326.76416015625, 283.53857421875], [0, 13.74267578125], [0, -25.42431640625]],
[[352.18798828125, 219.634765625], [-16.95263671875, 17.17822265625], [16.94775390625, -17.1787109375]],
[[415.0615234375, 193.8671875], [-24.96826171875, 0], [25.19287109375, 0]],
[[480.68310546875, 220.66552734375], [-18.552734375, -17.86572265625], [13.96826171875, 13.28662109375]],
[[514.6962890625, 280.10302734375], [-8.70703125, -26.3369140625], [7.55859375, -25.88037109375]],
[[546.6484375, 221.0087890625], [-13.7431640625, 13.517578125], [19.0087890625, -18.32177734375]],
[[612.61328125, 193.5234375], [-24.9677734375, 0], [24.7373046875, 0]],
[[675.486328125, 219.119140625], [-17.177734375, -17.06005859375], [17.1787109375, 17.06591796875]],
[[701.2548828125, 280.10302734375], [0, -23.58837890625], [0, 20.61376953125]],
[[686.1376953125, 344.52197265625], [10.076171875, -22.33203125], [-10.08203125, 22.33203125]],
[[627.73046875, 432.3046875], [28.8603515625, -36.1875], [-37.5673828125, 47.412109375]],
[[545.6171875, 549.1171875], [17.1787109375, -30.458984375], [-13.517578125, 24.0498046875]]
]);
heartPath.closed = true;
heartPath.position = view.center;
heartPath.strokeColor = null;
heartPath.scale(1.5);
var groupTogether = false;
var pathLength = heartPath.length;
var mouseDown = false;
var boids = [];
// Add the boids:
for (var i = 0; i < 300; i++) {
var position = view.center;
boids.push(new Boid(position, 10, 0.05));
}
function onFrame(event) {
for (var i = 0, l = boids.length; i < l; i++) {
if (groupTogether) {
var length = ((i + event.count / 30) % l) / l * pathLength;
var point = heartPath.getPointAt(length);
boids[i].arrive(point);
}
boids[i].run(boids);
}
}
// Reposition the heart path whenever the window is resized:
function onResize(event) {
size = view.size;
heartPath.position = view.center;
}
paper.js/assets/paperjs/examples/Node.js/in.json
+1
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Node.js/in.svg
+16
View File
@@ -0,0 +1,16 @@
<svg x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</linearGradient>
<radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</radialGradient>
<g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
<circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
<rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

paper.js/assets/paperjs/examples/Paperjs.org/BooleanOperattions.html
+115
View File
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Path Intersections</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText({
position: view.center + [0, 200],
fillColor: 'black',
justification: 'center',
fontSize: 20
});
var originals = new Group({ insert: false }); // Don't insert in DOM.
var square = new Path.Rectangle({
position: view.center,
size: 300,
parent: originals,
fillColor: 'white'
});
// Make a ring using subtraction of two circles:
var inner = new Path.Circle({
center: view.center,
radius: 100,
parent: originals,
fillColor: 'white'
});
var outer = new Path.Circle({
center: view.center,
radius: 140,
parent: originals,
fillColor: 'white'
});
var ring = outer.subtract(inner);
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
var colors = ['red', 'green', 'blue', 'black'];
var curIndex = -1;
var operation, result, activeItem;
// Change the mode every 3 seconds:
setInterval(setMode, 3000);
// Set the initial mode:
setMode();
function setMode() {
curIndex++;
if (curIndex == operations.length * 2)
curIndex = 0;
operation = operations[curIndex % operations.length];
}
function onMouseDown(event) {
var hitResult = originals.hitTest(event.point);
activeItem = hitResult && hitResult.item;
}
function onMouseDrag(event) {
if (activeItem)
activeItem.position = event.point;
}
function onMouseUp() {
activeItem = null;
square.position = view.center;
}
function onFrame(event) {
if (activeItem != ring) {
// Move the ring around:
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
ring.position = view.center + offset;
}
// Remove the result of the last path operation:
if (result)
result.remove();
// Perform the path operation on the ring:
if (curIndex < operations.length) {
result = square[operation](ring);
text.content = 'square.' + operation + '(ring)';
} else {
result = ring[operation](square);
text.content = 'ring.' + operation + '(square)';
}
result.selected = true;
result.fillColor = colors[curIndex % colors.length];
result.moveBelow(text);
// If the result is a group, color each of its children differently:
if (result instanceof Group) {
for (var i = 0; i < result.children.length; i++) {
result.children[i].fillColor = colors[i];
}
}
};
function onResize() {
text.position = view.center + [0, 200];
square.position = view.center;
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/BouncingBalls.html
+103
View File
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bouncing Balls</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var Ball = function(point, vector) {
if (!vector || vector.isZero()) {
this.vector = Point.random() * 5;
} else {
this.vector = vector * 2;
}
this.point = point;
this.dampen = 0.4;
this.gravity = 3;
this.bounce = -0.6;
var color = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
};
var gradient = new Gradient([color, 'black'], true);
var radius = this.radius = 50 * Math.random() + 30;
// Wrap CompoundPath in a Group, since CompoundPaths directly
// applies the transformations to the content, just like Path.
var ball = new CompoundPath({
children: [
new Path.Circle({
radius: radius
}),
new Path.Circle({
center: radius / 8,
radius: radius / 3
})
],
fillColor: new Color(gradient, 0, radius, radius / 8),
});
this.item = new Group({
children: [ball],
applyMatrix: false,
position: this.point
});
}
Ball.prototype.iterate = function() {
var size = view.size;
this.vector.y += this.gravity;
this.vector.x *= 0.99;
var pre = this.point + this.vector;
if (pre.x < this.radius || pre.x > size.width - this.radius)
this.vector.x *= -this.dampen;
if (pre.y < this.radius || pre.y > size.height - this.radius) {
if (Math.abs(this.vector.x) < 3)
this.vector = Point.random() * [150, 100] + [-75, 20];
this.vector.y *= this.bounce;
}
var max = Point.max(this.radius, this.point + this.vector);
this.item.position = this.point = Point.min(max, size - this.radius);
this.item.rotate(this.vector.x);
};
var balls = [];
for (var i = 0; i < 10; i++) {
var position = Point.random() * view.size,
vector = (Point.random() - [0.5, 0]) * [50, 100],
ball = new Ball(position, vector);
balls.push(ball);
}
var textItem = new PointText({
point: [20, 30],
fillColor: 'black',
content: 'Click, drag and release to add balls.'
});
var lastDelta;
function onMouseDrag(event) {
lastDelta = event.delta;
}
function onMouseUp(event) {
var ball = new Ball(event.point, lastDelta);
balls.push(ball);
lastDelta = null;
}
function onFrame() {
for (var i = 0, l = balls.length; i < l; i++)
balls[i].iterate();
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/Chain.html
+54
View File
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chain</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html
// The amount of points in the path:
var points = 25;
// The distance between the points:
var length = 35;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
function onMouseMove(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth({ type: 'continuous' });
}
function onMouseDown(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
function onMouseUp(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/DivisionRaster.html
+72
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Paperjs.org/FutureSplash.html
+122
View File
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Future Splash</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Code ported to Paper.js from http://the389.com/9/1/
// with permission.
var values = {
friction: 0.8,
timeStep: 0.01,
amount: 15,
mass: 2,
count: 0
};
values.invMass = 1 / values.mass;
var path, springs;
var size = view.size * [1.2, 1];
var Spring = function(a, b, strength, restLength) {
this.a = a;
this.b = b;
this.restLength = restLength || 80;
this.strength = strength ? strength : 0.55;
this.mamb = values.invMass * values.invMass;
};
Spring.prototype.update = function() {
var delta = this.b - this.a;
var dist = delta.length;
var normDistStrength = (dist - this.restLength) /
(dist * this.mamb) * this.strength;
delta.y *= normDistStrength * values.invMass * 0.2;
if (!this.a.fixed)
this.a.y += delta.y;
if (!this.b.fixed)
this.b.y -= delta.y;
};
function createPath(strength) {
var path = new Path({
fillColor: 'black'
});
springs = [];
for (var i = 0; i <= values.amount; i++) {
var segment = path.add(new Point(i / values.amount, 0.5) * size);
var point = segment.point;
if (i == 0 || i == values.amount)
point.y += size.height;
point.px = point.x;
point.py = point.y;
// The first two and last two points are fixed:
point.fixed = i < 2 || i > values.amount - 2;
if (i > 0) {
var spring = new Spring(segment.previous.point, point, strength);
springs.push(spring);
}
}
path.position.x -= size.width / 4;
return path;
}
function onResize() {
if (path)
path.remove();
size = view.bounds.size * [2, 1];
path = createPath(0.1);
}
function onMouseMove(event) {
var location = path.getNearestLocation(event.point);
var segment = location.segment;
var point = segment.point;
if (!point.fixed && location.distance < size.height / 4) {
var y = event.point.y;
point.y += (y - point.y) / 6;
var previous = segment.previous && segment.previous.point;
var next = segment.next && segment.next.point;
if (previous && !previous.fixed)
previous.y += (y - previous.y) / 24;
if (next && !next.fixed)
next.y += (y - next.y) / 24;
}
}
function onFrame(event) {
updateWave(path);
}
function updateWave(path) {
var force = 1 - values.friction * values.timeStep * values.timeStep;
for (var i = 0, l = path.segments.length; i < l; i++) {
var point = path.segments[i].point;
var dy = (point.y - point.py) * force;
point.py = point.y;
point.y = Math.max(point.y + dy, 0);
}
for (var j = 0, l = springs.length; j < l; j++) {
springs[j].update();
}
path.smooth({ type: 'continuous' });
}
function onKeyDown(event) {
if (event.key == 'space') {
path.fullySelected = !path.fullySelected;
path.fillColor = path.fullySelected ? null : 'black';
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/HitTesting.html
+103
View File
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hit Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var values = {
paths: 50,
minPoints: 5,
maxPoints: 15,
minRadius: 30,
maxRadius: 90
};
var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5
};
createPaths();
function createPaths() {
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
var radius = values.minRadius + Math.random() * radiusDelta;
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
var path = createBlob(view.size * Point.random(), radius, points);
var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
var hue = Math.random() * 360;
path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
path.strokeColor = 'black';
};
}
function createBlob(center, maxRadius, points) {
var path = new Path();
path.closed = true;
for (var i = 0; i < points; i++) {
var delta = new Point({
length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
angle: (360 / points) * i
});
path.add(center + delta);
}
path.smooth();
return path;
}
var segment, path;
var movePath = false;
function onMouseDown(event) {
segment = path = null;
var hitResult = project.hitTest(event.point, hitOptions);
if (!hitResult)
return;
if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}
if (hitResult) {
path = hitResult.item;
if (hitResult.type == 'segment') {
segment = hitResult.segment;
} else if (hitResult.type == 'stroke') {
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
path.smooth();
}
}
movePath = hitResult.type == 'fill';
if (movePath)
project.activeLayer.addChild(hitResult.item);
}
function onMouseMove(event) {
project.activeLayer.selected = false;
if (event.item)
event.item.selected = true;
}
function onMouseDrag(event) {
if (segment) {
segment.point += event.delta;
path.smooth();
} else if (path) {
path.position += event.delta;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize style="background:black"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/InteractiveTiger.html
+777
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Paperjs.org/MetaBalls.html
+132
View File
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meta Balls</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Ported from original Metaball script by SATO Hiroyuki
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
project.currentStyle = {
fillColor: 'black'
};
var ballPositions = [[255, 129], [610, 73], [486, 363],
[117, 459], [484, 726], [843, 306], [789, 615], [1049, 82],
[1292, 428], [1117, 733], [1352, 86], [92, 798]];
var handle_len_rate = 2.4;
var circlePaths = [];
var radius = 50;
for (var i = 0, l = ballPositions.length; i < l; i++) {
var circlePath = new Path.Circle({
center: ballPositions[i],
radius: 50
});
circlePaths.push(circlePath);
}
var largeCircle = new Path.Circle({
center: [676, 433],
radius: 100
});
circlePaths.push(largeCircle);
function onMouseMove(event) {
largeCircle.position = event.point;
generateConnections(circlePaths);
}
var connections = new Group();
function generateConnections(paths) {
// Remove the last connection paths:
connections.removeChildren();
for (var i = 0, l = paths.length; i < l; i++) {
for (var j = i - 1; j >= 0; j--) {
var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);
if (path) {
connections.appendTop(path);
path.removeOnMove();
}
}
}
}
generateConnections(circlePaths);
// ---------------------------------------------
function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
var center1 = ball1.position;
var center2 = ball2.position;
var radius1 = ball1.bounds.width / 2;
var radius2 = ball2.bounds.width / 2;
var pi2 = Math.PI / 2;
var d = center1.getDistance(center2);
var u1, u2;
if (radius1 == 0 || radius2 == 0)
return;
if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
return;
} else if (d < radius1 + radius2) { // case circles are overlapping
u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
(2 * radius1 * d));
u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
(2 * radius2 * d));
} else {
u1 = 0;
u2 = 0;
}
var angle1 = (center2 - center1).getAngleInRadians();
var angle2 = Math.acos((radius1 - radius2) / d);
var angle1a = angle1 + u1 + (angle2 - u1) * v;
var angle1b = angle1 - u1 - (angle2 - u1) * v;
var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
var p1a = center1 + getVector(angle1a, radius1);
var p1b = center1 + getVector(angle1b, radius1);
var p2a = center2 + getVector(angle2a, radius2);
var p2b = center2 + getVector(angle2b, radius2);
// define handle length by the distance between
// both ends of the curve to draw
var totalRadius = (radius1 + radius2);
var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);
// case circles are overlapping:
d2 *= Math.min(1, d * 2 / (radius1 + radius2));
radius1 *= d2;
radius2 *= d2;
var path = new Path({
segments: [p1a, p2a, p2b, p1b],
style: ball1.style,
closed: true
});
var segments = path.segments;
segments[0].handleOut = getVector(angle1a - pi2, radius1);
segments[1].handleIn = getVector(angle2a + pi2, radius2);
segments[2].handleOut = getVector(angle2b - pi2, radius2);
segments[3].handleIn = getVector(angle1b + pi2, radius1);
return path;
}
// ------------------------------------------------
function getVector(radians, length) {
return new Point({
// Convert radians to degrees:
angle: radians * 180 / Math.PI,
length: length
});
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/NyanRainbow.html
+202
View File
@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nyan Rainbow</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/javascript" src="http://paperjs.org/assets/mediaelement/mediaelement.js"></script>
<script type="text/paperscript" canvas="canvas">
// A tribute to Nyan Cat http://www.youtube.com/watch?v=QH2-TGUlwu4
var mediaElement;
var playing = false;
MediaElement('nyan', {
pluginPath: '/assets/mediaelement/',
success: function(me) {
mediaElement = me;
me.play();
me.addEventListener('timeupdate', function(time) {
if (me.currentTime > 3.7)
playing = true;
});
}
});
var mousePos = view.center + [view.bounds.width / 3, 100];
var position = view.center;
function onFrame(event) {
position += (mousePos - position) / 10;
var vector = (view.center - position) / 10;
moveStars(vector * 3);
moveRainbow(vector, event);
}
function onMouseMove(event) {
mousePos = event.point;
}
function onKeyDown(event) {
if (event.key == 'space')
project.activeLayer.selected = !project.activeLayer.selected;
}
var moveStars = new function() {
// The amount of symbol we want to place;
var count = 50;
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: new Point(0, 0),
radius: 5,
fillColor: 'white',
strokeColor: 'black'
});
var symbol = new SymbolDefinition(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placed = symbol.place(center);
placed.scale(i / count + 0.01);
placed.data = {
vector: new Point({
angle: Math.random() * 360,
length : (i / count) * Math.random() / 5
})
};
}
var vector = new Point({
angle: 45,
length: 0
});
function keepInView(item) {
var position = item.position;
var viewBounds = view.bounds;
if (position.isInside(viewBounds))
return;
var itemBounds = item.bounds;
if (position.x > viewBounds.width + 5) {
position.x = -item.bounds.width;
}
if (position.x < -itemBounds.width - 5) {
position.x = viewBounds.width;
}
if (position.y > viewBounds.height + 5) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height - 5) {
position.y = viewBounds.height
}
}
return function(vector) {
// Run through the active layer's children list and change
// the position of the placed symbols:
var layer = project.activeLayer;
for (var i = 0; i < count; i++) {
var item = layer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
};
};
var moveRainbow = new function() {
var paths = [];
var colors = ['red', 'orange', 'yellow', 'lime', 'blue', 'purple'];
for (var i = 0; i < colors.length; i++) {
var path = new Path({
fillColor: colors[i]
});
paths.push(path);
}
var count = 30;
var group = new Group(paths);
var headGroup;
var eyePosition = new Point();
var eyeFollow = (Point.random() - 0.5);
var blinkTime = 200;
function createHead(vector, count) {
var eyeVector = (eyePosition - eyeFollow);
eyePosition -= eyeVector / 4;
if (eyeVector.length < 0.00001)
eyeFollow = (Point.random() - 0.5);
if (headGroup)
headGroup.remove();
var top = paths[0].lastSegment.point;
var bottom = paths[paths.length - 1].firstSegment.point;
var radius = (bottom - top).length / 2;
var circle = new Path.Circle({
center: top + (bottom - top) / 2,
radius: radius,
fillColor: 'black'
});
circle.scale(vector.length / 100, 1);
circle.rotate(vector.angle, circle.center);
innerCircle = circle.clone();
innerCircle.scale(0.5);
innerCircle.fillColor = (count % blinkTime < 3)
|| (count % (blinkTime + 5) < 3) ? 'black' : 'white';
if (count % (blinkTime + 40) == 0)
blinkTime = Math.round(Math.random() * 40) + 200;
var eye = circle.clone();
eye.position += eyePosition * radius;
eye.scale(0.15, innerCircle.position);
eye.fillColor = 'black';
headGroup = new Group(circle, innerCircle, eye);
}
return function(vector, event) {
var vector = (view.center - position) / 10;
if (vector.length < 5)
vector.length = 5;
count += vector.length / 100;
group.translate(vector);
var rotated = vector.rotate(90);
var middle = paths.length / 2;
for (var j = 0; j < paths.length; j++) {
var path = paths[j];
var nyanSwing = playing ? Math.sin(event.count / 2) * vector.length : 1;
var unitLength = vector.length * (2 + Math.sin(event.count / 10)) / 2;
var length = (j - middle) * unitLength + nyanSwing;
var top = view.center + rotated.normalize(length);
var bottom = view.center + rotated.normalize(length + unitLength);
path.add(top);
path.insert(0, bottom);
if (path.segments.length > 200) {
var index = Math.round(path.segments.length / 2);
path.segments[index].remove();
path.segments[index - 1].remove();
}
path.smooth();
}
createHead(vector, event.count);
if (mediaElement)
mediaElement.setVolume(vector.length / 200);
}
}
</script>
<style>
body {
background: black;
}
</style>
</head>
<body>
<audio id="nyan" src="http://dl.dropbox.com/u/31703/nyan.mp3" autoplay autobuffer preload=none loop style="display:none"></audio>
<canvas id="canvas" resize hidpi="off"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/PathIntersections.html
+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Path Intersections</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Imported SVG Groups have their applyMatrix flag turned off by
// default. This is required for SVG importing to work correctly. Turn
// it on now, so we don't have to deal with nested coordinate spaces.
var words = project.importSVG(document.getElementById('svg'));
words.visible = true; // Turn off the effect of display:none;
words.fillColor = null;
words.strokeColor = 'black';
var yesGroup = words.children.yes;
var noGroup = words.children.no;
// Resize the words to fit snugly inside the view:
words.fitBounds(view.bounds);
words.scale(0.8);
yesGroup.position = view.center;
noGroup.position = [-900, -900];
function onMouseMove(event) {
noGroup.position = event.point;
for (var i = 0; i < yesGroup.children.length; i++) {
for (var j = 0; j < noGroup.children.length; j++) {
showIntersections(noGroup.children[j], yesGroup.children[i])
}
}
}
function showIntersections(path1, path2) {
var intersections = path1.getIntersections(path2);
for (var i = 0; i < intersections.length; i++) {
new Path.Circle({
center: intersections[i].point,
radius: 5,
fillColor: '#009dec'
}).removeOnMove();
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="600" width="600" id="svg" style="display:none">
<g id="yes">
<path d="M427.151,85.781h27.331l-38.608,72.151v43.283h-24.121v-43.283l-39.94-72.151h28.428l23.964,50.277L427.151,85.781z"/>
<path d="M553.467,106.221h-61.084v24.512h56.073v20.048h-56.073v29.681h63.905v20.753H468.81V85.781h84.657V106.221z"/>
<path d="M592.307,165.583c0.746,5.274,2.213,9.215,4.396,11.826c3.998,4.751,10.848,7.126,20.551,7.126
c5.811,0,10.529-0.626,14.152-1.88c6.877-2.4,10.316-6.864,10.316-13.392c0-3.811-1.686-6.761-5.053-8.849
c-3.371-2.036-8.713-3.837-16.027-5.404l-12.498-2.741c-12.283-2.714-20.721-5.664-25.314-8.849
c-7.779-5.326-11.668-13.652-11.668-24.982c0-10.337,3.805-18.925,11.414-25.765c7.611-6.839,18.789-10.259,33.537-10.259
c12.312,0,22.816,3.224,31.512,9.671c8.693,6.449,13.252,15.807,13.676,28.076h-23.182c-0.428-6.943-3.531-11.877-9.312-14.801
c-3.855-1.931-8.645-2.897-14.371-2.897c-6.369,0-11.455,1.253-15.254,3.759c-3.801,2.506-5.701,6.004-5.701,10.494
c0,4.125,1.873,7.205,5.621,9.241c2.408,1.358,7.52,2.95,15.336,4.777l20.258,4.777c8.879,2.089,15.533,4.882,19.965,8.379
c6.881,5.431,10.32,13.288,10.32,23.572c0,10.547-4.076,19.305-12.23,26.274c-8.152,6.97-19.67,10.455-34.551,10.455
c-15.197,0-27.15-3.433-35.857-10.298c-8.707-6.865-13.061-16.302-13.061-28.311H592.307z"/>
</g>
<g id="no">
<path d="M400.993,246.168h25.287l45.821,80.49v-80.49h22.476v115.435h-24.115l-46.993-81.906v81.906h-22.476V246.168z"/>
<path d="M605.936,351.343c-8.721,8.98-21.33,13.471-37.826,13.471c-16.498,0-29.107-4.49-37.824-13.471
c-11.697-11.016-17.542-26.887-17.542-47.615c0-21.144,5.845-37.015,17.542-47.614c8.717-8.979,21.326-13.47,37.824-13.47
c16.496,0,29.105,4.491,37.826,13.47c11.641,10.6,17.463,26.47,17.463,47.614C623.398,324.457,617.576,340.328,605.936,351.343z
M590.859,333.801c5.611-7.048,8.418-17.072,8.418-30.073c0-12.947-2.807-22.958-8.418-30.033
c-5.613-7.074-13.195-10.611-22.75-10.611s-17.178,3.524-22.867,10.572c-5.691,7.048-8.537,17.072-8.537,30.072
c0,13.001,2.846,23.025,8.537,30.073c5.689,7.048,13.312,10.572,22.867,10.572S585.246,340.849,590.859,333.801z"/>
</g>
</svg>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/Qbertify.html
+146
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Paperjs.org/RadialRainbows.html
+80
View File
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radial Rainbows</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var point = view.center;
var colors = [];
var cycles = 4;
for (var i = 0, l = 60; i < l; i++) {
var brightness = 1 - (i / l) * 1.5;
var hue = i / l * cycles * 360;
var color = {
hue: hue,
saturation: 1,
brightness: brightness
};
colors.push(color);
}
var path = new Path.Rectangle(view.bounds);
var gradient = new Gradient(colors, true);
var radius = Math.max(view.size.width, view.size.height) * 0.75;
path.fillColor = new Color(gradient, point, point + [radius, 0]);
var gradientColor = path.fillColor;
var mouseDown = false,
mousePoint = view.center;
function onMouseDown(event) {
mouseDown = true;
mousePoint = event.point;
}
function onMouseDrag(event) {
mousePoint = event.point;
}
function onMouseUp(event) {
vector.length = 10;
mouseDown = false;
}
var grow = false;
var vector = new Point(150, 0);
function onFrame() {
for (var i = 0, l = gradient.stops.length; i < l; i++)
gradient.stops[i].color.hue -= 20;
if (grow && vector.length > 300) {
grow = false;
} else if (!grow && vector.length < 75) {
grow = true;
}
if (mouseDown) {
point = point + (mousePoint - point) / 10;
} else {
vector.length += (grow ? 1 : -1);
vector.angle += 5;
}
gradientColor.highlight = mouseDown ? point : point + vector;
}
function onResize(event) {
point = view.center;
path.bounds = view.bounds;
var gradientColor = path.fillColor;
gradientColor.origin = point;
var radius = Math.max(view.size.width, view.size.height) * 0.75;
gradientColor.destination = point + [radius, 0];
}
</script>
</head>
<body>
<canvas id="canvas" hidpi="off" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/RoundedRectangles.html
+41
View File
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rounded Rectangles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var mousePoint = view.center;
var amount = 25;
var colors = ['red', 'white', 'blue', 'white'];
for (var i = 0; i < amount; i++) {
var rect = new Rectangle([0, 0], [25, 25]);
rect.center = mousePoint;
var path = new Path.Rectangle(rect, 6);
path.fillColor = colors[i % 4];
var scale = (1 - i / amount) * 20;
path.scale(scale);
}
function onMouseMove(event) {
mousePoint = event.point;
}
var children = project.activeLayer.children;
function onFrame(event) {
for (var i = 0, l = children.length; i < l; i++) {
var item = children[i];
var delta = (mousePoint - item.position) / (i + 5);
item.rotate(Math.sin((event.count + i) / 10) * 7);
if (delta.length > 0.1)
item.position += delta;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/SatieLikedToDraw.html
+140
View File
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Erik Liked To Dance</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var leftPath = new Path({
strokeColor: 'red',
opacity: 0.5
});
var rightPath = new Path({
strokeColor: 'green',
opacity: 0.5
});
var amount = 8;
var step = view.size.width / (amount + 1);
var flip = false;
for (var i = 0; i <= amount; i++) {
leftPath.add(new Point(i * step, 0));
rightPath.add(new Point(i * step, 0));
}
var group = new Group({
children: [leftPath, rightPath],
applyMatrix: false,
strokeWidth: 30,
strokeJoin: 'round',
strokeCap: 'butt',
pivot: leftPath.position,
position: view.center
});
function onMouseDown() {
flip = !flip;
}
function onKeyDown(event) {
if (event.key === 'space')
group.fullySelected = !group.fullySelected;
}
var audio, source, analyserL, analyserR, freqByteData;
view.onFrame = function() {
var step = view.size.width / (amount + 1);
var scale = view.size.height / 1.5;
analyserL.getByteFrequencyData(freqByteData);
var leftBands = getEqualizerBands(freqByteData, true);
analyserR.getByteFrequencyData(freqByteData);
var rightBands = getEqualizerBands(freqByteData, true);
for (var i = 1; i <= amount; i++) {
leftPath.segments[i].point = [i * step, -leftBands[i - 1] * scale];
rightPath.segments[i].point = [i * step, -rightBands[i - 1] * scale * (flip ? -1 : 1)];
}
leftPath.smooth();
rightPath.smooth();
group.pivot = [leftPath.position.x, 0];
group.position = view.center;
}
// Pause animation until we have data
view.pause();
var AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext) {
audio = new AudioContext();
source = audio.createBufferSource();
// Create two separate analyzers for left and right channel.
analyserL = audio.createAnalyser();
analyserL.smoothingTimeConstant = 0.25;
analyserL.fftSize = Math.pow(2, amount) * 2;
analyserR = audio.createAnalyser();
analyserR.smoothingTimeConstant = analyserL.smoothingTimeConstant;
analyserR.fftSize = analyserL.fftSize;
// Create the buffer to receive the analyzed data.
freqByteData = new Uint8Array(analyserL.frequencyBinCount);
// Create a splitter to feed them both
var splitter = audio.createChannelSplitter();
// Connect audio processing graph
source.connect(splitter);
splitter.connect(analyserL, 0, 0);
splitter.connect(analyserR, 1, 0);
// Connect source to output also so we can hear it
source.connect(audio.destination);
loadAudioBuffer('http://assets.paperjs.org/audio/gnossienne.mp3');
} else {
// TODO: Print error message
alert('Audio not supported');
}
function loadAudioBuffer(url) {
// Load asynchronously
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function() {
audio.decodeAudioData(
request.response,
function(buffer) {
source.buffer = buffer;
source.loop = true;
source.start(0);
view.play();
},
function(buffer) {
alert("Error loading MP3");
}
);
};
request.send();
}
function getEqualizerBands(data) {
var bands = [];
var amount = Math.sqrt(data.length) / 2;
for (var i = 0; i < amount; i++) {
var start = Math.pow(2, i) - 1;
var end = start * 2 + 1;
var sum = 0;
for (var j = start; j < end; j++) {
sum += data[j];
}
var avg = sum / (255 * (end - start));
bands[i] = Math.sqrt(avg / Math.SQRT2);
}
return bands;
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/Simplify.html
+63
View File
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simplify</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path;
var textItem = new PointText({
content: 'Click and drag to draw a line.',
point: new Point(20, 30),
fillColor: 'black',
});
function onMouseDown(event) {
// If we produced a path before, deselect it:
if (path) {
path.selected = false;
}
// Create a new path and set its stroke color to black:
path = new Path({
segments: [event.point],
strokeColor: 'black',
// Select the path, so we can see its segment points:
fullySelected: true
});
}
// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
path.add(event.point);
// Update the content of the text item to show how many
// segments it has:
textItem.content = 'Segment count: ' + path.segments.length;
}
// When the mouse is released, we simplify the path:
function onMouseUp(event) {
var segmentCount = path.segments.length;
// When the mouse is released, simplify it:
path.simplify(10);
// Select the path, so we can see its segments:
path.fullySelected = true;
var newSegmentCount = path.segments.length;
var difference = segmentCount - newSegmentCount;
var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/SpiralRaster.html
+120
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Paperjs.org/Tadpoles.html
+283
View File
@@ -0,0 +1,283 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tadpoles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Adapted from Flocking Processing example by Daniel Schiffman:
// http://processing.org/learning/topics/flocking.html
var Boid = Base.extend({
initialize: function(position, maxSpeed, maxForce) {
var strength = Math.random() * 0.5;
this.acceleration = new Point();
this.vector = Point.random() * 2 - 1;
this.position = position.clone();
this.radius = 30;
this.maxSpeed = maxSpeed + strength;
this.maxForce = maxForce + strength;
this.amount = strength * 10 + 10;
this.count = 0;
this.createItems();
},
run: function(boids) {
this.lastLoc = this.position.clone();
if (!groupTogether) {
this.flock(boids);
} else {
this.align(boids);
}
this.borders();
this.update();
this.calculateTail();
this.moveHead();
},
calculateTail: function() {
var segments = this.path.segments,
shortSegments = this.shortPath.segments;
var speed = this.vector.length;
var pieceLength = 5 + speed / 3;
var point = this.position;
segments[0].point = shortSegments[0].point = point;
// Chain goes the other way than the movement
var lastVector = -this.vector;
for (var i = 1; i < this.amount; i++) {
var vector = segments[i].point - point;
this.count += speed * 10;
var wave = Math.sin((this.count + i * 3) / 300);
var sway = lastVector.rotate(90).normalize(wave);
point += lastVector.normalize(pieceLength) + sway;
segments[i].point = point;
if (i < 3)
shortSegments[i].point = point;
lastVector = vector;
}
this.path.smooth();
},
createItems: function() {
this.head = new Shape.Ellipse({
center: [0, 0],
size: [13, 8],
fillColor: 'white'
});
this.path = new Path({
strokeColor: 'white',
strokeWidth: 2,
strokeCap: 'round'
});
for (var i = 0; i < this.amount; i++)
this.path.add(new Point());
this.shortPath = new Path({
strokeColor: 'white',
strokeWidth: 4,
strokeCap: 'round'
});
for (var i = 0; i < Math.min(3, this.amount); i++)
this.shortPath.add(new Point());
},
moveHead: function() {
this.head.position = this.position;
this.head.rotation = this.vector.angle;
},
// We accumulate a new acceleration each time based on three rules
flock: function(boids) {
var separation = this.separate(boids) * 3;
var alignment = this.align(boids);
var cohesion = this.cohesion(boids);
this.acceleration += separation + alignment + cohesion;
},
update: function() {
// Update velocity
this.vector += this.acceleration;
// Limit speed (vector#limit?)
this.vector.length = Math.min(this.maxSpeed, this.vector.length);
this.position += this.vector;
// Reset acceleration to 0 each cycle
this.acceleration = new Point();
},
seek: function(target) {
this.acceleration += this.steer(target, false);
},
arrive: function(target) {
this.acceleration += this.steer(target, true);
},
borders: function() {
var vector = new Point();
var position = this.position;
var radius = this.radius;
var size = view.size;
if (position.x < -radius) vector.x = size.width + radius;
if (position.y < -radius) vector.y = size.height + radius;
if (position.x > size.width + radius) vector.x = -size.width -radius;
if (position.y > size.height + radius) vector.y = -size.height -radius;
if (!vector.isZero()) {
this.position += vector;
var segments = this.path.segments;
for (var i = 0; i < this.amount; i++) {
segments[i].point += vector;
}
}
},
// A method that calculates a steering vector towards a target
// Takes a second argument, if true, it slows down as it approaches
// the target
steer: function(target, slowdown) {
var steer,
desired = target - this.position;
var distance = desired.length;
// Two options for desired vector magnitude
// (1 -- based on distance, 2 -- maxSpeed)
if (slowdown && distance < 100) {
// This damping is somewhat arbitrary:
desired.length = this.maxSpeed * (distance / 100);
} else {
desired.length = this.maxSpeed;
}
steer = desired - this.vector;
steer.length = Math.min(this.maxForce, steer.length);
return steer;
},
separate: function(boids) {
var desiredSeperation = 60;
var steer = new Point();
var count = 0;
// For every boid in the system, check if it's too close
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var vector = this.position - other.position;
var distance = vector.length;
if (distance > 0 && distance < desiredSeperation) {
// Calculate vector pointing away from neighbor
steer += vector.normalize(1 / distance);
count++;
}
}
// Average -- divide by how many
if (count > 0)
steer /= count;
if (!steer.isZero()) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vector;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
// Alignment
// For every nearby boid in the system, calculate the average velocity
align: function(boids) {
var neighborDist = 25;
var steer = new Point();
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var distance = this.position.getDistance(other.position);
if (distance > 0 && distance < neighborDist) {
steer += other.vector;
count++;
}
}
if (count > 0)
steer /= count;
if (!steer.isZero()) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vector;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
// Cohesion
// For the average location (i.e. center) of all nearby boids,
// calculate steering vector towards that location
cohesion: function(boids) {
var neighborDist = 100;
var sum = new Point();
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var distance = this.position.getDistance(other.position);
if (distance > 0 && distance < neighborDist) {
sum += other.position; // Add location
count++;
}
}
if (count > 0) {
sum /= count;
// Steer towards the location
return this.steer(sum, false);
}
return sum;
}
});
var heartPath = new Path('M514.69629,624.70313c-7.10205,-27.02441 -17.2373,-52.39453 -30.40576,-76.10059c-13.17383,-23.70703 -38.65137,-60.52246 -76.44434,-110.45801c-27.71631,-36.64355 -44.78174,-59.89355 -51.19189,-69.74414c-10.5376,-16.02979 -18.15527,-30.74951 -22.84717,-44.14893c-4.69727,-13.39893 -7.04297,-26.97021 -7.04297,-40.71289c0,-25.42432 8.47119,-46.72559 25.42383,-63.90381c16.94775,-17.17871 37.90527,-25.76758 62.87354,-25.76758c25.19287,0 47.06885,8.93262 65.62158,26.79834c13.96826,13.28662 25.30615,33.10059 34.01318,59.4375c7.55859,-25.88037 18.20898,-45.57666 31.95215,-59.09424c19.00879,-18.32178 40.99707,-27.48535 65.96484,-27.48535c24.7373,0 45.69531,8.53564 62.87305,25.5957c17.17871,17.06592 25.76855,37.39551 25.76855,60.98389c0,20.61377 -5.04102,42.08691 -15.11719,64.41895c-10.08203,22.33203 -29.54687,51.59521 -58.40723,87.78271c-37.56738,47.41211 -64.93457,86.35352 -82.11328,116.8125c-13.51758,24.0498 -23.82422,49.24902 -30.9209,75.58594z');
var boids = [];
var groupTogether = false;
// Add the boids:
for (var i = 0; i < 30; i++) {
var position = Point.random() * view.size;
boids.push(new Boid(position, 10, 0.05));
}
function onFrame(event) {
for (var i = 0, l = boids.length; i < l; i++) {
if (groupTogether) {
var length = ((i + event.count / 30) % l) / l * heartPath.length;
var point = heartPath.getPointAt(length);
if (point)
boids[i].arrive(point);
}
boids[i].run(boids);
}
}
// Reposition the heart path whenever the window is resized:
function onResize(event) {
heartPath.fitBounds(view.bounds);
heartPath.scale(0.8);
}
function onMouseDown(event) {
groupTogether = !groupTogether;
}
function onKeyDown(event) {
if (event.key == 'space') {
var layer = project.activeLayer;
layer.selected = !layer.selected;
return false;
}
}
</script>
<style>
body {
background: black;
}
</style>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Paperjs.org/Voronoi.html
+134
View File
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Voronoi</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/javascript" src="http://paperjs.org/assets/js/rhill-voronoi-core.js"></script>
<script type="text/paperscript" canvas="canvas">
var voronoi = new Voronoi();
var sites = generateBeeHivePoints(view.size / 200, true);
var bbox, diagram;
var oldSize = view.size;
var spotColor = new Color('red');
var mousePos = view.center;
var selected = false;
onResize();
function onMouseDown(event) {
sites.push(event.point);
renderDiagram();
}
function onMouseMove(event) {
mousePos = event.point;
if (event.count == 0)
sites.push(event.point);
sites[sites.length - 1] = event.point;
renderDiagram();
}
function renderDiagram() {
project.activeLayer.removeChildren();
var diagram = voronoi.compute(sites, bbox);
if (diagram) {
for (var i = 0, l = sites.length; i < l; i++) {
var cell = diagram.cells[sites[i].voronoiId];
if (cell) {
var halfedges = cell.halfedges,
length = halfedges.length;
if (length > 2) {
var points = [];
for (var j = 0; j < length; j++) {
v = halfedges[j].getEndpoint();
points.push(new Point(v));
}
createPath(points, sites[i]);
}
}
}
}
}
function removeSmallBits(path) {
var averageLength = path.length / path.segments.length;
var min = path.length / 50;
for (var i = path.segments.length - 1; i >= 0; i--) {
var segment = path.segments[i];
var cur = segment.point;
var nextSegment = segment.next;
var next = nextSegment.point + nextSegment.handleIn;
if (cur.getDistance(next) < min) {
segment.remove();
}
}
}
function generateBeeHivePoints(size, loose) {
var points = [];
var col = view.size / size;
for (var i = -1; i < size.width + 1; i++) {
for (var j = -1; j < size.height + 1; j++) {
var point = new Point(i, j) / new Point(size) * view.size + col / 2;
if (j % 2)
point += new Point(col.width / 2, 0);
if (loose)
point += (col / 4) * Point.random() - col / 4;
points.push(point);
}
}
return points;
}
function createPath(points, center) {
var path = new Path();
if (!selected) {
path.fillColor = spotColor;
} else {
path.fullySelected = selected;
}
path.closed = true;
for (var i = 0, l = points.length; i < l; i++) {
var point = points[i];
var next = points[(i + 1) == points.length ? 0 : i + 1];
var vector = (next - point) / 2;
path.add({
point: point + vector,
handleIn: -vector,
handleOut: vector
});
}
path.scale(0.95);
removeSmallBits(path);
return path;
}
function onResize() {
var margin = 20;
bbox = {
xl: margin,
xr: view.bounds.width - margin,
yt: margin,
yb: view.bounds.height - margin
};
for (var i = 0, l = sites.length; i < l; i++) {
sites[i] = sites[i] * view.size / oldSize;
}
oldSize = view.size;
renderDiagram();
}
function onKeyDown(event) {
if (event.key == 'space') {
selected = !selected;
renderDiagram();
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Rasters/PhyllotaxisRaster.html
+96
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Rasters/Raster.html
+34
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Rasters/RotationRaster.html
+44
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/Rasters/Smoothing.html
+36
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/SVG Export/Circle Testing.html
+32
View File
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var topLeft = new Point(200, 200);
var size = new Size(150, 100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'yellow';
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Clipping.html
+17
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/SVG Export/Compound Path.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Compound Path</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Empty Path Testing.html
+28
View File
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var path3 = new Path();
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Gradients.html
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
var radius = view.bounds.width * 0.4,
from = new Point(view.center.x),
to = from + [radius, 0];
var circle = new Path.Circle({
center: from,
radius: radius,
fillColor: {
stops: stops,
radial: true,
origin: from,
destination: to
},
strokeColor: 'black'
});
var from = view.bounds.leftCenter,
to = view.bounds.bottomRight;
var rect = new Path.Rectangle({
from: from,
to: to,
fillColor: {
stops: stops,
radial: false,
origin: from,
destination: to
},
strokeColor: 'black'
});
rect.rotate(45).scale(0.7);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Group Transform.html
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group Transform</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = 'red';
var circle2 = new Path.Circle(new Point(200, 100), 50);
circle2.fillColor = 'blue';
var group = new Group(circle1, circle2);
group.translate([100, 100]);
group.scale(0.5);
group.rotate(10);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Line Testing.html
+41
View File
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Random Path Testing.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var center = new Point(100, 100);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
var center = new Point(100, 300);
var sides = 10;
var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black';
var center = new Point(100, 400);
var points = 6;
var radius1 = 20;
var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Raster.html
+21
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/SVG Export/Rect and Attribute Testing.html
+53
View File
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
var point2 = new Point(75, 75);
var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
path2.strokeColor = 'red';
path2.strokeWidth = '4';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point3 = new Point(150, 150);
var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3);
path3.strokeColor = 'blue';
var point4 = new Point(200, 200);
var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Rotated Primitives.html
+80
View File
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotated Primitives</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// This "arbitrary" shape triggered rectangles in the original code,
// since point2 is as far from point0 as point3 is from point1.
var path = new Path({
closed: true,
strokeColor: 'black'
});
path.moveTo(0, 0);
path.lineTo(50, 50);
path.lineTo(100, 100);
path.lineTo(-50, 150);
path.position += 100;
var rect = new Path.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var circle = new Path.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var ellipse = new Path.Ellipse({
point: [300, 300],
size: [100, 200],
fillColor: 'blue'
});
ellipse.rotate(-40);
var rect = new Path.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
rect.data = {
string: '----',
number: 1234,
array: ['a ray', 'some rays'],
bool: true,
nil: null,
point: new Point(12, 34),
size: new Size(12, 34),
rectangle: new Rectangle([12, 34], [56, 78]),
deep: {
deeper: {
deepest: true
}
}
};
var parallelogram = new Path({
closed: true,
segments: [[50, 0], [50, 100], [90, 120], [90, 20]],
fillColor: '#99c'
});
document.body.appendChild(project.exportSVG({ matchShapes: true }));
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Shapes.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shapes</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var rect = new Shape.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var circle = new Shape.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var ellipse = new Shape.Ellipse({
point: [300, 300],
size: [100, 200],
fillColor: 'blue'
});
ellipse.rotate(-40);
var rect = new Shape.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
document.body.appendChild(project.exportSVG());
var prev = null;
function onMouseMove(event) {
if (prev)
prev.selected = false;
var result = project.hitTest(event.point);
if (result) {
var item = result.item;
item.selected = true;
prev = item;
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Symbols.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var ellipse = new Path.Ellipse({
from: [0, 0],
to: [200, 100],
fillColor: 'red'
});
var symbol = new SymbolDefinition(ellipse);
var p1 = symbol.place([100, 100]);
p1.rotate(45);
var p2 = symbol.place([300, 200]);
p2.rotate(-30);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Text Testing.html
+45
View File
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
/*
text.scale(5);
text.translate(15, 15);
text.rotate(20);
text.shear(20, 5);
*/
text.rotate(45);
text.shear(.85, .15);
text.scale(.85, 2);
var path2 = new Path.Circle(new Point(100, 100), 50);
path2.strokeColor = 'black';
path2.shear(.5, .5);
colors = ['red', 'blue', 'green', 'orange'];
for (var i in path2.segments) {
var p = path2.segments[i].point;
var c = new Path.Circle(p, 2);
c.fillColor = colors[i];
}
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Tiger.html
+23
View File
File diff suppressed because one or more lines are too long
paper.js/assets/paperjs/examples/SVG Export/Transform Test 1.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
var clones = 30;
var angle = 360 / clones;
for (var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Export/Transform Test 2.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Arcs.html
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arcs Testing</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'), {
applyMatrix: false
});
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="500" id="svg" viewBox="0 0 1000 500">
<g transform="scale(0.5)">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
<g font-family="Verdana" transform="translate(0,400)">
<defs>
<g id="baseEllipses" font-size="20" >
<ellipse cx="125" cy="125" rx="100" ry="50"
fill="none" stroke="#888888" stroke-width="2" />
<ellipse cx="225" cy="75" rx="100" ry="50"
fill="none" stroke="#888888" stroke-width="2" />
<text x="35" y="70">Arc start</text>
<text x="225" y="145">Arc end</text>
</g>
</defs>
<rect x="1" y="1" width="1198" height="523"
fill="none" stroke="blue" stroke-width="1" />
<g font-size="30" >
<g transform="translate(0,0)">
<use xlink:href="#baseEllipses"/>
</g>
<g transform="translate(400,0)">
<text x="50" y="210">large-arc-flag=0</text>
<text x="50" y="250">sweep-flag=0</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 0,0 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(800,0)">
<text x="50" y="210">large-arc-flag=0</text>
<text x="50" y="250">sweep-flag=1</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 0,1 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(400,250)">
<text x="50" y="210">large-arc-flag=1</text>
<text x="50" y="250">sweep-flag=0</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 1,0 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(800,250)">
<text x="50" y="210">large-arc-flag=1</text>
<text x="50" y="250">sweep-flag=1</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 1,1 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
</g>
</g>
</g>
</svg>
<canvas id="canvas" width="1000" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Butterfly.html
+223
View File
@@ -0,0 +1,223 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Butterfly</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var start = Date.now();
project.importSVG(document.getElementById('svg'));
console.log(Date.now() - start);
// console.log(project.exportJSON());
</script>
</head>
<body>
<svg version="1.1"
id="svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="398.363px"
height="248.998px" viewBox="0 0 398.363 248.998">
<path id="path4" fill="#F67F00" d="M196.294,106.489c-8-6.5,2.35-7.01,2.25-7.25c-14.25-35.5-37.23-51.17-39-52
c-5.46-2.56-8.1-2.32-7.13-3.609c0.96-1.29,7.27,2.75,8.13,3.359c25.25,18,39,52,39,52s1.75,1,2,0.25c10-29.5,30-45,36.75-51.25
s10.3-6.859,1,0.25c-28.75,22-36.99,50.65-36.5,50.75c11.5,2.5,0.5,8,1,7.5c3.02-3.02,3,6,3,6s17-35,83.5-79.5
c4.1-2.74,147.5-81,97.5,14.5c-2.59,4.96-20,25-20,25s1.5,8.5-4.5,15.5c-1.03,1.2-3.5,13-9.5,19.5c-1.69,1.84-0.021-1.58,0,0
c0.5,30-24.07,29.34-22.5,29.5c9.5,1,10.859,13.33,11,13.5c5.5,6.5,3.5,8,5.5,11c10.8,16.19-0.59,15.22,1,18c4,7-0.84,9.891,0.5,12
c3.5,5.5-2.58,9.01-2.5,10.5c0.5,8.5-5.16,5.4-5,9c0.5,11-3.5,6.5-6,10.5c-7.5,12-10.37,7.55-11,9c-3,7-7.021,5.32-8.5,7
c-3.5,4-7,4-8.5,5.5c-7,7-10.97,2.061-12,2.5c-16,7-23.5,1.34-26,1.5c-7.5,0.5-6.351-0.66-8.5-2.5c-31.5-27-50-66-53.5-71
c-1.431-2.04-4.48-13.71-3.5-11c2,5.5,1,54.5-4.5,54.5s-6-46-2.5-54.5c1.1-2.67-0.93,7.891-3.54,11c-5.46,6.5-22.29,44-54.2,71
c-2.17,1.84-1.01,3-8.61,2.5c-2.52-0.16-10.13,5.5-26.33-1.5c-1.04-0.439-5.07,4.5-12.16-2.5c-1.52-1.5-5.06-1.5-8.61-5.5
c-1.49-1.68-5.57,0-8.61-7c-0.63-1.45-3.54,3-11.14-9c-2.53-4-6.59,0.5-6.08-10.5c0.17-3.6-5.57-0.5-5.06-9
c0.09-1.49-6.08-5-2.54-10.5c1.36-2.109-3.54-5,0.51-12c1.61-2.78-9.92-1.81,1.01-18c2.03-3,0-4.5,5.57-11
c0.15-0.17,1.52-12.5,11.15-13.5c1.59-0.16-23.3,0.5-22.79-29.5c0.02-1.58,1.71,1.84,0,0c-6.08-6.5-8.58-18.3-9.63-19.5
c-6.08-7-4.56-15.5-4.56-15.5s-17.63-20.04-20.25-25c-50.65-95.5,94.61-17.24,98.76-14.5c67.36,44.5,83.78,79.5,83.78,79.5
s0.36-2.55,1-4C195.604,107.049,196.524,106.679,196.294,106.489z"/>
<path id="path6" d="M195.583,106.279c-8-6.5,2.34-7.02,2.25-7.25c-14.25-35.5-37.23-51.17-39-52c-5.46-2.56-8.1-2.32-7.14-3.61
c0.96-1.289,7.28,2.75,8.14,3.36c25.25,18,39,52,39,52s1.75,1,2,0.25c10-29.5,30-45,36.75-51.25s10.3-6.86,1,0.25
c-28.75,22-36.99,50.64-36.5,50.75c11.5,2.5,0.5,8,1,7.5c3.02-3.02,3,6,3,6s17-35,83.5-79.5c4.09-2.74,147.5-81,97.5,14.5
c-2.59,4.95-20,25-20,25s1.5,8.5-4.5,15.5c-1.03,1.2-3.5,13-9.5,19.5c-1.69,1.84-0.03-1.58,0,0c0.5,30-24.07,29.34-22.5,29.5
c9.5,1,10.85,13.33,11,13.5c5.5,6.5,3.5,8,5.5,11c10.79,16.19-0.59,15.22,1,18c4,7-0.84,9.89,0.5,12c3.5,5.5-2.59,9-2.5,10.5
c0.5,8.5-5.16,5.4-5,9c0.5,11-3.5,6.5-6,10.5c-7.5,12-10.38,7.55-11,9c-3,7-7.03,5.32-8.5,7c-3.5,4-7,4-8.5,5.5
c-7,7-10.971,2.05-12,2.5c-16,7-23.5,1.33-26,1.5c-7.5,0.5-6.35-0.66-8.5-2.5c-31.5-27-50-66-53.5-71c-1.43-2.05-4.49-13.71-3.5-11
c2,5.5,1,54.5-4.5,54.5c-5.5,0-6-46-2.5-54.5c1.1-2.67-0.93,7.88-3.54,11c-5.46,6.5-22.29,44-54.2,71c-2.17,1.84-1.01,3-8.61,2.5
c-2.52-0.17-10.13,5.5-26.33-1.5c-1.04-0.45-5.07,4.5-12.16-2.5c-1.52-1.5-5.06-1.5-8.61-5.5c-1.49-1.68-5.57,0-8.61-7
c-0.63-1.45-3.55,3-11.14-9c-2.54-4-6.59,0.5-6.08-10.5c0.17-3.6-5.57-0.5-5.07-9c0.09-1.5-6.07-5-2.53-10.5
c1.36-2.11-3.54-5,0.51-12c1.61-2.78-9.92-1.81,1.01-18c2.03-3,0-4.5,5.57-11c0.15-0.17,1.52-12.5,11.15-13.5
c1.59-0.16-23.3,0.5-22.8-29.5c0.03-1.58,1.72,1.84,0,0c-6.07-6.5-8.58-18.3-9.62-19.5c-6.08-7-4.56-15.5-4.56-15.5
s-17.63-20.05-20.26-25c-50.64-95.5,94.62-17.24,98.77-14.5c67.36,44.5,83.78,79.5,83.78,79.5s0.36-2.55,1-4
C194.894,106.839,195.813,106.469,195.583,106.279z M234.084,119.779c3.039-0.1,9.229,3.05,13,2c25.43-7.06,73.319-0.56,76.5,0.5
c12,4,20-24.5-5.5-24.5c-31.53,0-25-2-46-5c-1.78-0.25-27.521,9.3-51.5,23C217.084,117.779,219.084,120.279,234.084,119.779z
M215.084,114.779c2.539,0.28,15-8.5,54-24c2.369-0.939,2.5-6,23.5-15.5c1.369-0.62-0.5-4,14-16c7.17-5.93-17.5-5-23-4s-19,12-19,12
s15.18-12.07,10-10.5c-11.5,3.5-41.5,36.5-51.5,50.5s16.5-24,23-30S196.583,112.779,215.084,114.779z M327.584,95.279
c14.52,2.91,13-18.5,5.5-19.5c-11.57-1.54-33.61-0.82-40,1.5c-16.5,6-20.83,12.03-19.5,12.5
C302.084,99.779,322.584,94.279,327.584,95.279z M327.084,73.279c5.92,0.74,16,3,16.5-5c0.25-4.02,14,3,17,3.5
c2.479,0.41-10.5-4.79-15-8c-3.5-2.5-4.11-5.36-4.5-5.5c-32-11.5-45.5,15.5-45.5,15.5S323.084,72.779,327.084,73.279z
M392.584,29.279c-5-8-13.96-5.54-17-9c-14.5-16.5-48.08,4.66-20.5,2.5C387.084,20.279,393.174,30.229,392.584,29.279z
M368.584,33.279c13.51,0,19.5,6,18.5,5c-7-7-13-5.5-14.5-7.5c-8.92-11.89-35.5,0.5-33.5,3.5S365.084,33.279,368.584,33.279z
M322.084,42.779c-21,5-12,12.5-9.5,12C332.014,50.899,326.464,41.739,322.084,42.779z M332.584,18.779c-9.5,1-10.141,18.311-5.5,15
C334.084,28.779,342.084,17.779,332.584,18.779z M307.584,42.279c14-5.5,3.5-8-1-7.5s-7.83,7.33-6.5,10
C303.084,50.779,304.873,43.349,307.584,42.279z M351.584,87.779c4.5-2.5-1-8.5-5-6S347.084,90.279,351.584,87.779z M342.084,45.279
c11.77,11.771,16.5,5.5,19,4.5c8.12-3.25,17,5.5,15.5,4c-7.28-7.28-12-6-13-7.5c-7.61-11.42-18.96-4.18-21.5-4
c-7,0.5-15.69,5.41-12.5,4.5C333.084,45.779,340.584,43.779,342.084,45.279z M375.584,10.779c7-5-2.221-6.27-4-6
C365.084,5.779,368.584,15.779,375.584,10.779z M216.584,147.779c5.5,6.5,67,104,57.5,71.5c-1.29-4.42,3.5,13.5,9,3.5
c1.539-2.8,10.15-3.09-16.5-47.5c-1.5-2.5-22-10.5-42.5-33C220.984,138.868,212.014,142.379,216.584,147.779z M272.084,182.279
c4.5,7,15.689,30.45,16.5,34c2.5,11,9.5-1.5,11-1c13.16,4.39,3.5-7.5,2.5-10.5c-9.17-27.5-30.5-25-30.5-25
S267.584,175.279,272.084,182.279z M245.584,222.779c12.64,17.97,17.5,11,20,9c7.699-6.16-41.28-68.979-44.5-73
C217.084,153.779,217.084,182.279,245.584,222.779z M292.084,185.779c6.5,5,13.74,26.07,17.5,25.5c10-1.5,4-10,6.5-8.5s7.5-1.17,6-4
c-12.5-23.5-32-16-32-16S285.584,180.779,292.084,185.779z M227.584,135.279c-19.5,0,46.5,54,65.5,43.5c3.939-2.18-5-3.5-3.5-15
c0.279-2.1-13.5-6-13.5-19c0-4.24-7.92-6-33-6C238.584,138.779,247.994,135.279,227.584,135.279z M299.584,180.279
c18.27,2.03,22.609,16.18,25,14.5c28.5-20-22.73-28.16-32-27C288.584,168.279,295.084,179.779,299.584,180.279z M230.584,130.779
c3.5,2.5,15.5,12.5,54,4c1.47-0.32-29-0.5-33-1.5S228.214,129.089,230.584,130.779z M297.084,165.279c37.5,9,27.6,2.74,29,2
c8.5-4.5-0.79-5.39,0.5-7c4.21-5.26-7-8.5-30.5-11c-5.561-0.59-16.58-3.35-17-2.5C275.584,153.779,292.294,164.129,297.084,165.279z
M303.084,148.779c32.5,5.5,12.109-4.689,12.5-5c11.5-9-26.5-9-26.5-9s-16.33,3.88-16,4.5
C277.584,147.779,299.113,148.109,303.084,148.779z M241.584,220.279c0,0-29-46.5-23-65.5c1.21-3.81-13-22.5-6.5,9
c0.1,0.49-1.23-6.689-3.5-10c-2.271-3.31-5.44-2.22-3.5,7.5C209.974,185.708,241.584,220.279,241.584,220.279z M281.084,50.279
c7.5-2,4-4.5-0.5-5.5S273.584,52.279,281.084,50.279z M179.364,115.779c-24.28-13.7-50.36-23.25-52.17-23c-21.27,3-14.65,5-46.59,5
c-25.83,0-17.73,28.5-5.57,24.5c3.22-1.06,51.73-7.56,77.49-0.5c3.81,1.05,10.09-2.1,13.17-2
C180.884,120.279,182.914,117.779,179.364,115.779z M153.534,77.279c6.58,6,33.43,44,23.3,30c-10.13-14-40.52-47-52.17-50.5
c-5.24-1.57,10.13,10.5,10.13,10.5s-13.67-11-19.25-12c-5.57-1-30.55-1.93-23.29,4c14.68,12,12.79,15.38,14.18,16
c21.27,9.5,21.4,14.561,23.8,15.5c39.51,15.5,52.13,24.28,54.7,24C203.674,112.779,146.954,71.279,153.534,77.279z M125.674,89.779
c1.36-0.47-3.03-6.5-19.75-12.5c-6.47-2.32-28.8-3.04-40.52-1.5c-7.59,1-9.13,22.41,5.57,19.5
C76.044,94.279,96.804,99.779,125.674,89.779z M103.394,73.779c0,0-13.68-27-46.09-15.5c-0.39,0.14-1.01,3-4.56,5.5
c-4.55,3.21-17.7,8.41-15.19,8c3.04-0.5,16.96-7.52,17.22-3.5c0.5,8,10.72,5.74,16.71,5
C75.534,72.779,103.394,73.779,103.394,73.779z M43.124,22.779c27.93,2.16-6.08-19-20.77-2.5c-3.08,3.46-12.15,1-17.22,9
C4.534,30.229,10.704,20.279,43.124,22.779z M59.333,34.279c2.02-3-24.9-15.39-33.94-3.5c-1.52,2-7.6,0.5-14.69,7.5
c-1.01,1,5.06-5,18.74-5C32.994,33.279,57.304,37.279,59.333,34.279z M76.554,42.779c21.27,5,12.15,12.5,9.62,12
C66.494,50.899,72.114,41.739,76.554,42.779z M71.484,33.779c4.7,3.311,4.05-14-5.57-15C56.294,17.779,64.394,28.779,71.484,33.779z
M98.833,44.779c1.35-2.67-2.03-9.5-6.58-10c-4.56-0.5-15.2,2-1.02,7.5C93.984,43.349,95.794,50.779,98.833,44.779z M51.734,81.779
c-4.05-2.5-9.63,3.5-5.07,6S55.784,84.279,51.734,81.779z M68.954,46.779c3.23,0.91-5.57-4-12.66-4.5c-2.58-0.18-14.07-7.42-21.78,4
c-1.02,1.5-5.8,0.22-13.17,7.5c-1.52,1.5,7.47-7.25,15.7-4c2.53,1,7.33,7.271,19.25-4.5C57.813,43.779,65.404,45.779,68.954,46.779z
M26.404,4.779c-1.8-0.27-11.14,1-4.05,6C29.444,15.779,32.994,5.779,26.404,4.779z M175.824,142.279
c-20.77,22.5-41.54,30.5-43.06,33c-26.99,44.41-18.27,44.7-16.71,47.5c5.57,10,10.43-7.92,9.12-3.5c-9.63,32.5,52.67-65,58.24-71.5
C188.044,142.379,178.964,138.868,175.824,142.279z M127.704,179.779c0,0-21.61-2.5-30.9,25c-1.01,3-10.79,14.89,2.54,10.5
c1.52-0.5,8.61,12,11.14,1c0.82-3.55,12.16-27,16.71-34C131.754,175.279,127.704,179.779,127.704,179.779z M178.854,158.779
c-3.25,4.021-52.87,66.84-45.07,73c2.53,2,7.45,8.97,20.26-9C182.914,182.279,182.914,153.779,178.854,158.779z M108.964,182.779
c0,0-19.75-7.5-32.41,16c-1.53,2.83,3.54,5.5,6.07,4c2.54-1.5-3.54,7,6.59,8.5c3.81,0.57,11.14-20.5,17.72-25.5
C113.524,180.779,108.964,182.779,108.964,182.779z M156.574,138.779c-25.41,0-33.43,1.76-33.43,6c0,13-13.95,16.9-13.67,19
c1.52,11.5-7.54,12.82-3.55,15c19.25,10.5,86.1-43.5,66.35-43.5C151.604,135.279,161.134,138.779,156.574,138.779z M106.434,167.779
c-9.39-1.16-61.29,7-32.42,27c2.42,1.68,6.82-12.47,25.33-14.5C103.904,179.779,110.484,168.279,106.434,167.779z M147.964,133.279
c-4.05,1-34.91,1.18-33.43,1.5c39,8.5,51.16-1.5,54.7-4C171.634,129.089,152.014,132.279,147.964,133.279z M120.104,146.779
c-0.43-0.85-11.59,1.91-17.22,2.5c-23.8,2.5-35.16,5.74-30.89,11c1.3,1.61-8.11,2.5,0.5,7c1.42,0.74-8.61,7,29.38-2
C106.724,164.129,123.654,153.779,120.104,146.779z M126.184,139.279c0.34-0.62-16.21-4.5-16.21-4.5s-38.49,0-26.84,9
c0.4,0.311-20.26,10.5,12.66,5C99.824,148.109,121.624,147.779,126.184,139.279z M195.063,161.279c1.97-9.72-1.25-10.81-3.54-7.5
c-2.3,3.311-3.65,10.49-3.55,10c6.59-31.5-7.8-12.81-6.58-9c6.07,19-23.3,65.5-23.3,65.5S190.114,185.708,195.063,161.279z
M118.583,44.779c-4.56,1-8.1,3.5-0.5,5.5C125.674,52.279,123.144,43.779,118.583,44.779z"/>
<path id="path8" fill="#FFF6E3" d="M355.693,52.389c-4.46,0.56-8.5,1-9.5-4.5s1.5-7.5,9-5.5S367.693,50.889,355.693,52.389z
M319.193,55.889c0,0-18.72,4.42-1.5-8.5c8-6,8.5-1,9,2C327.443,53.859,319.193,55.889,319.193,55.889z M376.193,15.389
c-8.35-1.67-8-6.5,1-8.5C378.664,6.569,381.193,16.389,376.193,15.389z M381.193,15.389c2.5-0.5,6.5,0.5,7,4s-3.5,5.5-6,3.5
S378.693,15.889,381.193,15.389z M375.193,26.389c2.5-1,10,0.5,9.5,3.5s-6.5,3.5-9,2S372.693,27.389,375.193,26.389z
M376.193,43.889c3-2.5,6.5,0,7.5,1.5s-4,3.5-5.5,4S373.193,46.389,376.193,43.889z M387.693,6.889c0,0,4,0,3,1.5s-4,1.5-4,1.5
L387.693,6.889z M393.693,15.889c0,0,4,0,3,1.5s-4,1.5-4,1.5L393.693,15.889z M361.193,63.889c0,0,5,2,4,3.5s-2.5,4-6,0.5
S361.193,63.889,361.193,63.889z M347.693,83.389c3-2.5,6.5,0,7.5,1.5s-4,3.5-5.5,4S344.693,85.889,347.693,83.389z M349.693,73.389
c3-2.5,5.5,1,6.5,2.5s-3,2.5-4.5,3S346.693,75.889,349.693,73.389z M332.693,39.889c-3.569,0.2-9.5-1.5-0.5-7.5c8.32-5.54,8-4,8.5-1
C341.443,35.859,336.264,39.698,332.693,39.889z M302.193,48.889c0,0-3.5-3,3.5-9c7.601-6.5,6.5-4,7-1
C313.443,43.359,302.193,48.889,302.193,48.889z M333.193,22.389c0,0,6-1,5,0.5s-3.5,7-7,3.5S333.193,22.389,333.193,22.389z
M366.693,52.889c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5
C364.193,54.019,365.323,52.889,366.693,52.889z M361.693,77.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C359.193,78.519,360.323,77.389,361.693,77.389z M357.693,87.389c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C355.193,88.519,356.323,87.389,357.693,87.389z M341.693,93.889
c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C339.193,95.019,340.323,93.889,341.693,93.889z
M350.193,95.389c1.38,0,4,2.13,4,3.5c0,1.38-2.62,1.5-4,1.5c-1.37,0-2.5-1.12-2.5-2.5
C347.693,96.519,348.823,95.389,350.193,95.389z M374.193,56.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C371.693,57.519,372.823,56.389,374.193,56.389z M387.693,32.889c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C385.193,34.019,386.323,32.889,387.693,32.889z M292.693,40.889
c2.32,0.93,13.5-6.5,10-7.5S290.193,39.889,292.693,40.889z M311.693,27.889c2.5,0.5,10-2.5,6.5-3.5S309.054,27.368,311.693,27.889z
M263.693,58.389c5.5-3,21-10.5,13.5-9.5S258.974,60.969,263.693,58.389z M356.193,8.889c2.5,0.5,10-2.5,6.5-3.5
S353.554,8.368,356.193,8.889z M284.193,45.389c2.5,0.5,7.5-2,4-3S281.554,44.868,284.193,45.389z M347.193,107.889
c1.38,0,2.5,1.63,2.5,3c0,1.38-0.62,1.5-2,1.5c-1.37,0-2.5-1.12-2.5-2.5C345.193,108.519,345.823,107.889,347.193,107.889z
M339.693,107.389c1.38,0,3.5,0.63,3.5,2c0,1.38-2.62,1-4,1c-1.37,0-2.5-1.12-2.5-2.5
C336.693,106.519,338.323,107.389,339.693,107.389z M341.693,121.889c1.38,0,4,2.13,4,3.5c0,1.38-2.62,1.5-4,1.5
c-1.37,0-2.5-1.12-2.5-2.5C339.193,123.019,340.323,121.889,341.693,121.889z M329.693,142.389c4-1,4,1,5,4.5s8.07,14.88-3.5,1
C328.693,144.889,325.693,143.389,329.693,142.389z M341.693,154.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C339.193,155.519,340.323,154.389,341.693,154.389z M344.193,163.389c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C341.693,164.519,342.823,163.389,344.193,163.389z M344.363,172.389
c1.37,0,3.33,3.13,3.33,4.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-4.16-1.62-4.16-3C341.033,175.019,342.983,172.389,344.363,172.389z
M345.693,188.389c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5
C344.193,188.519,344.323,188.389,345.693,188.389z M332.193,155.389c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5
c-1.37,0-1,0.88-1-0.5C330.693,155.519,330.823,155.389,332.193,155.389z M335.193,167.889c1.38,0,1,0.13,1,1.5
c0,1.38,0.21,5-1.16,5c-1.38,0-1.34-3.62-1.34-5C333.693,168.019,333.823,167.889,335.193,167.889z M338.693,181.889
c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C337.193,182.019,337.323,181.889,338.693,181.889z
M332.533,195.389c1.37,0,1.16,0.13,1.16,1.5c0,1.38-0.29,0.5-1.66,0.5c-1.38,0-0.84,0.88-0.84-0.5
C331.193,195.519,331.153,195.389,332.533,195.389z M341.363,198.729c1.37,0,2.67,1.95,2.67,3.33c0,1.37-2.96,3.83-4.34,3.83
c-1.37,0-1,0.88-1-0.5C338.693,204.019,339.983,198.729,341.363,198.729z M335.693,213.059c1.38,0,3.67-0.38,3.67,1
c0,1.37-3.29,3.83-4.67,3.83c-1.37,0-1,0.88-1-0.5C333.693,216.019,334.323,213.059,335.693,213.059z M327.193,205.889
c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C325.693,206.019,325.823,205.889,327.193,205.889z
M324.693,225.059c1.38,0,2.67,1.62,2.67,3c0,1.37-2.29,0.83-3.67,0.83c-1.37,0-1,0.88-1-0.5
C322.693,227.019,323.323,225.059,324.693,225.059z M316.363,230.389c1.37,0,0.67,1.63,0.67,3c0,1.38-4.96,4.5-6.34,4.5
c-1.37,0-1,0.88-1-0.5C309.693,236.019,314.983,230.389,316.363,230.389z M317.193,214.389c1.38,0,1,0.13,1,1.5
c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C315.693,214.519,315.823,214.389,317.193,214.389z M305.193,222.889
c1.38,0,5.84,1.79,5.84,3.17c0,1.37-5.629,3.67-7,3.67c-1.379,0-2.34-2.3-2.34-3.67
C301.693,224.679,303.824,222.889,305.193,222.889z M292.193,227.389c1.381,0,1,0.13,1,1.5c0,1.38-0.119,0.5-1.5,0.5
c-1.369,0-1,0.88-1-0.5C290.693,227.519,290.824,227.389,292.193,227.389z M300.193,239.389c1.381,0,1,0.13,1,1.5
c0,1.38-0.119,0.5-1.5,0.5c-1.369,0-1,0.88-1-0.5C298.693,239.519,298.824,239.389,300.193,239.389z M297.193,240.389
c1.381,0,1,0.13,1,1.5c0,1.38-0.119,0.5-1.5,0.5c-1.369,0-1,0.88-1-0.5C295.693,240.519,295.824,240.389,297.193,240.389z
M285.693,240.729c0.92,0,2,1.41,2,2.33s-0.08,0.33-1,0.33c-0.91,0-3.33,1.25-3.33,0.34
C283.363,242.809,284.783,240.729,285.693,240.729z M288.693,243.389c0.92,0,0.67,0.09,0.67,1c0,0.92-0.08,0.34-1,0.34
s-0.67,0.58-0.67-0.34C287.693,243.479,287.783,243.389,288.693,243.389z M283.363,230.389c0.92,0,2.33,3.42,2.33,4.34
c0,0.91-3.08,0.66-4,0.66c-0.91,0-2.33-2.75-2.33-3.66C279.363,230.809,282.443,230.389,283.363,230.389z M272.033,241.389
c1.371,0,1.16,0.13,1.16,1.5c0,1.38-0.289,0.5-1.66,0.5c-1.379,0-0.84,0.88-0.84-0.5
C270.693,241.519,270.654,241.389,272.033,241.389z M269.033,234.389c1.371,0-0.67,3.29-0.67,4.67c0,1.37-4.459,1.83-5.83,1.83
c-1.379,0,1.16-1.79,1.16-3.16C263.693,236.349,267.654,234.389,269.033,234.389z M44.194,51.559c4.47,0.56,8.5,1,9.5-4.5
s-1.5-7.5-9-5.5S32.194,50.059,44.194,51.559z M80.694,55.059c0,0,18.72,4.41,1.5-8.5c-8-6-8.5-1-9,2
C72.454,53.029,80.694,55.059,80.694,55.059z M23.694,14.559c8.35-1.67,8-6.5-1-8.5C21.234,5.729,18.694,15.559,23.694,14.559z
M18.694,14.559c-2.5-0.5-6.5,0.5-7,4s3.5,5.5,6,3.5S21.194,15.059,18.694,14.559z M24.694,25.559c-2.5-1-10,0.5-9.5,3.5
s6.5,3.5,9,2S27.194,26.559,24.694,25.559z M23.694,43.059c-3-2.5-6.5,0-7.5,1.5s4,3.5,5.5,4S26.694,45.559,23.694,43.059z
M12.194,6.059c0,0-4,0-3,1.5s4,1.5,4,1.5L12.194,6.059z M6.194,15.059c0,0-4,0-3,1.5s4,1.5,4,1.5L6.194,15.059z M38.694,63.059
c0,0-5,2-4,3.5s2.5,4,6,0.5S38.694,63.059,38.694,63.059z M52.194,82.559c-3-2.5-6.5,0-7.5,1.5s4,3.5,5.5,4
S55.194,85.059,52.194,82.559z M50.194,72.559c-3-2.5-5.5,1-6.5,2.5s3,2.5,4.5,3S53.194,75.059,50.194,72.559z M67.194,39.059
c3.57,0.2,9.5-1.5,0.5-7.5c-8.32-5.55-8-4-8.5-1C58.454,35.029,63.624,38.859,67.194,39.059z M97.694,48.059c0,0,3.5-3-3.5-9
c-7.59-6.51-6.5-4-7-1C86.454,42.529,97.694,48.059,97.694,48.059z M66.694,21.559c0,0-6-1-5,0.5s3.5,7,7,3.5
S66.694,21.559,66.694,21.559z M33.194,52.059c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5
C35.694,53.189,34.574,52.059,33.194,52.059z M38.194,76.559c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5
c1.38,0,2.5-1.12,2.5-2.5C40.694,77.689,39.574,76.559,38.194,76.559z M42.194,86.559c-1.37,0-2.5,1.13-2.5,2.5
c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5C44.694,87.689,43.574,86.559,42.194,86.559z M58.194,93.059
c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5C60.694,94.189,59.574,93.059,58.194,93.059z
M49.694,94.559c-1.37,0-4,2.13-4,3.5c0,1.38,2.63,1.5,4,1.5c1.38,0,2.5-1.12,2.5-2.5C52.194,95.689,51.074,94.559,49.694,94.559z
M25.694,55.559c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5
C28.194,56.689,27.074,55.559,25.694,55.559z M12.194,32.059c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5
c1.38,0,2.5-1.12,2.5-2.5C14.694,33.189,13.574,32.059,12.194,32.059z M107.194,40.059c-2.32,0.93-13.5-6.5-10-7.5
S109.694,39.059,107.194,40.059z M88.194,27.059c-2.5,0.5-10-2.5-6.5-3.5S90.833,26.529,88.194,27.059z M136.194,57.559
c-5.5-3-21-10.5-13.5-9.5S140.924,60.139,136.194,57.559z M43.694,8.059c-2.5,0.5-10-2.5-6.5-3.5S46.333,7.529,43.694,8.059z
M115.694,44.559c-2.5,0.5-7.5-2-4-3S118.333,44.029,115.694,44.559z M52.694,107.059c-1.37,0-2.5,1.63-2.5,3c0,1.38,0.63,1.5,2,1.5
c1.38,0,2.5-1.12,2.5-2.5C54.694,107.689,54.074,107.059,52.694,107.059z M60.194,106.559c-1.37,0-3.5,0.63-3.5,2c0,1.38,2.63,1,4,1
c1.38,0,2.5-1.12,2.5-2.5C63.194,105.689,61.574,106.559,60.194,106.559z M58.194,121.059c-1.37,0-4,2.13-4,3.5
c0,1.38,2.63,1.5,4,1.5c1.38,0,2.5-1.12,2.5-2.5C60.694,122.189,59.574,121.059,58.194,121.059z M70.194,141.559c-4-1-4,1-5,4.5
s-8.06,14.88,3.5,1C71.194,144.059,74.194,142.559,70.194,141.559z M58.194,153.559c-1.37,0-2.5,1.12-2.5,2.5
c0,1.37,1.13,2.5,2.5,2.5c1.38,0,2.5-1.13,2.5-2.5C60.694,154.679,59.574,153.559,58.194,153.559z M55.694,162.559
c-1.37,0-2.5,1.12-2.5,2.5c0,1.37,1.13,2.5,2.5,2.5c1.38,0,2.5-1.13,2.5-2.5C58.194,163.679,57.074,162.559,55.694,162.559z
M55.534,171.559c-1.38,0-3.34,3.12-3.34,4.5c0,1.37,1.13,2.5,2.5,2.5c1.38,0,4.17-1.63,4.17-3
C58.864,174.179,56.904,171.559,55.534,171.559z M54.194,187.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C55.694,187.679,55.574,187.559,54.194,187.559z M67.694,154.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C69.194,154.679,69.074,154.559,67.694,154.559z M64.694,167.059c-1.37,0-1,0.12-1,1.5c0,1.37-0.2,5,1.17,5c1.38,0,1.33-3.63,1.33-5
C66.194,167.179,66.074,167.059,64.694,167.059z M61.194,181.059c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C62.694,181.179,62.574,181.059,61.194,181.059z M67.364,194.559c-1.37,0-1.17,0.12-1.17,1.5c0,1.37,0.3,0.5,1.67,0.5
c1.38,0,0.83,0.87,0.83-0.5C68.694,194.679,68.744,194.559,67.364,194.559z M58.534,197.889c-1.38,0-2.67,1.96-2.67,3.34
c0,1.37,2.96,3.83,4.33,3.83c1.38,0,1,0.87,1-0.5C61.194,203.179,59.904,197.889,58.534,197.889z M64.194,212.229
c-1.37,0-3.66-0.38-3.66,1c0,1.37,3.29,3.83,4.66,3.83c1.38,0,1,0.87,1-0.5C66.194,215.179,65.574,212.229,64.194,212.229z
M72.694,205.059c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5C74.194,205.179,74.074,205.059,72.694,205.059z
M75.194,224.229c-1.37,0-2.66,1.62-2.66,3c0,1.37,2.29,0.83,3.66,0.83c1.38,0,1,0.87,1-0.5
C77.194,226.179,76.574,224.229,75.194,224.229z M83.534,229.559c-1.38,0-0.67,1.62-0.67,3c0,1.37,4.96,4.5,6.33,4.5
c1.38,0,1,0.87,1-0.5C90.194,235.179,84.904,229.559,83.534,229.559z M82.694,213.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5
c1.38,0,1,0.87,1-0.5C84.194,213.679,84.074,213.559,82.694,213.559z M94.694,222.059c-1.37,0-5.83,1.79-5.83,3.17
c0,1.37,5.63,3.66,7,3.66c1.38,0,2.33-2.29,2.33-3.66C98.194,223.849,96.074,222.059,94.694,222.059z M107.694,226.559
c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5C109.194,226.679,109.074,226.559,107.694,226.559z
M99.694,238.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C101.194,238.679,101.074,238.559,99.694,238.559z M102.694,239.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5
c1.38,0,1,0.87,1-0.5C104.194,239.679,104.074,239.559,102.694,239.559z M114.194,239.889c-0.91,0-2,1.42-2,2.34
c0,0.91,0.09,0.33,1,0.33c0.92,0,3.34,1.25,3.34,0.33C116.534,241.979,115.114,239.889,114.194,239.889z M111.194,242.559
c-0.91,0-0.66,0.08-0.66,1s0.08,0.33,1,0.33c0.91,0,0.66,0.59,0.66-0.33S112.114,242.559,111.194,242.559z M116.534,229.559
c-0.92,0-2.34,3.42-2.34,4.33c0,0.92,3.09,0.67,4,0.67c0.92,0,2.34-2.75,2.34-3.67C120.534,229.979,117.444,229.559,116.534,229.559
z M127.864,240.559c-1.37,0-1.17,0.12-1.17,1.5c0,1.37,0.3,0.5,1.67,0.5c1.38,0,0.83,0.87,0.83-0.5
C129.194,240.679,129.244,240.559,127.864,240.559z M130.864,233.559c-1.37,0,0.67,3.29,0.67,4.67c0,1.37,4.46,1.83,5.83,1.83
c1.38,0-1.17-1.79-1.17-3.17C136.194,235.519,132.244,233.559,130.864,233.559z M202.964,101.458c-1.37,0-1.17,0.131-1.17,1.5
c0,1.381,0.3,0.5,1.67,0.5c1.38,0,0.83,0.881,0.83-0.5C204.294,101.589,204.344,101.458,202.964,101.458z M197.464,101.458
c-1.37,0-1.17,0.131-1.17,1.5c0,1.381,0.3,0.5,1.67,0.5c1.38,0,0.83,0.881,0.83-0.5
C198.794,101.589,198.844,101.458,197.464,101.458z M202.964,110.458c-1.37,0-1.17,0.131-1.17,1.5c0,1.381,0.3,0.5,1.67,0.5
c1.38,0,0.83,0.881,0.83-0.5C204.294,110.589,204.344,110.458,202.964,110.458z M196.864,110.359c-1.37,0-1.17,0.13-1.17,1.5
c0,1.38,0.3,0.5,1.67,0.5c1.38,0,0.83,0.88,0.83-0.5C198.194,110.489,198.244,110.359,196.864,110.359z M204.964,120.958
c-1.37,0-1,1.131-1,2.5c0,1.381,0.42,4.5,1.8,4.5c1.37,0,0.53-4.119,0.53-5.5C206.294,121.089,206.344,120.958,204.964,120.958z
M195.964,120.958c-1.37,0-1.4,1.23-1.4,2.601c0,1.38-0.97,4.6,0.4,4.6c1.38,0,1.8-3.819,1.8-5.2
C196.764,121.589,197.344,120.958,195.964,120.958z"/>
</svg>
<canvas id="canvas" width="400" height="250"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Circle and Ellipse Testing.html
+26
View File
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle and Ellipse Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="ellipse1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="ellipse2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="ellipse3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="ellipse4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="ellipse5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="ellipse6"/>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Clipping.html
+100
View File
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clipping</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('Layer_1'));
</script>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="1500px" enable-background="new 0 0 500 1120.5" xml:space="preserve">
<text transform="matrix(1 0 0 1 83.5002 68.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a path:</text>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,198c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103
S193.115,95,250,95C306.886,95,353,141.115,353,198z"/>
<rect x="137" y="85" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<circle clip-path="url(#SVGID_2_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="250" cy="198" r="103"/>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 355.5)" font-family="'Helvetica'" font-size="12">Clipping a compound path with a path:</text>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,491.911c0,56.885-46.114,103-103,103
c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z M250,409.512
c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
C332.4,446.403,295.509,409.512,250,409.512z"/>
<rect x="137" y="378.911" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<rect id="SVGID_3_" x="137" y="378.911" width="113" height="113"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" d="M353,491.911
c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z
M250,409.512c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
C332.4,446.403,295.509,409.512,250,409.512z"/>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 650.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a compound path:</text>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,785.823c0,56.885-46.114,103-103,103
c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103C306.886,682.823,353,728.938,353,785.823z M250,703.423
c-45.508,0-82.4,36.892-82.4,82.4c0,45.508,36.893,82.399,82.4,82.399c45.509,0,82.399-36.893,82.399-82.399
C332.4,740.314,295.509,703.423,250,703.423z"/>
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<path id="SVGID_5_" d="M353,785.823c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103
C306.886,682.823,353,728.938,353,785.823z M250,703.423c-45.508,0-82.4,36.892-82.4,82.4c0,45.508,36.893,82.399,82.4,82.399
c45.509,0,82.399-36.893,82.399-82.399C332.4,740.314,295.509,703.423,250,703.423z"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<rect x="137" y="672.822" clip-path="url(#SVGID_6_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" width="113" height="113"/>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 941.5)" font-family="'Helvetica'" font-size="12">Clipping a group with a path:</text>
<g>
<defs>
<rect id="SVGID_7_" x="153" y="970" width="113" height="113"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_8_)">
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1072" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1072" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1072" r="21.5"/>
</g>
</g>
</svg>
<canvas id="canvas" width="400px" height="1500px"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/From File.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Import From File</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var file = document.getElementById('file');
file.addEventListener('change', function (event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.match('svg')) {
project.clear();
project.importSVG(file, function(item) {
console.log(item);
});
}
}
});
</script>
</head>
<body>
<form>
<input type="file" id="file">
</form>
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Gradient.html
+138
View File
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var item = project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="500px"
height="500px"
id="svg">
<defs
id="defs1903">
<linearGradient
id="linearGradient3794">
<stop
id="stop3796"
style="stop-color:#ff5555;stop-opacity:1"
offset="0" />
<stop
id="stop3808"
style="stop-color:#522ba8;stop-opacity:1"
offset="0.18868095" />
<stop
id="stop3802"
style="stop-color:#ff00ff;stop-opacity:1"
offset="0.38376093" />
<stop
id="stop3804"
style="stop-color:#ff6600;stop-opacity:1"
offset="0.57983696" />
<stop
id="stop3806"
style="stop-color:#28170b;stop-opacity:1"
offset="0.80833077" />
<stop
id="stop3798"
style="stop-color:#ff5555;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3770">
<stop
id="stop3772"
style="stop-color:#d1ab00;stop-opacity:1"
offset="0" />
<stop
id="stop3788"
style="stop-color:#502d16;stop-opacity:1"
offset="0.0625" />
<stop
id="stop3786"
style="stop-color:#ff5555;stop-opacity:1"
offset="0.125" />
<stop
id="stop3784"
style="stop-color:#00ff00;stop-opacity:1"
offset="0.54704088" />
<stop
id="stop3782"
style="stop-color:#ffff00;stop-opacity:1"
offset="0.79772007" />
<stop
id="stop3774"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3760">
<stop
id="stop3762"
style="stop-color:#ff6600;stop-opacity:1"
offset="0" />
<stop
id="stop3764"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3768"
xlink:href="#linearGradient3760"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3776"
xlink:href="#linearGradient3770"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="454.28571"
y1="-7.6378121"
x2="591.42859"
y2="480.93362"
id="linearGradient3800"
xlink:href="#linearGradient3794"
gradientUnits="userSpaceOnUse" />
</defs>
<metadata
id="metadata1906">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 325.71425,440.93359 -24.52516,-67.66103 -63.02035,-34.75536 5.11537,-71.78671 -43.43569,-57.38329 33.87141,-63.49982 -16.34058,-70.089121 56.77078,-44.233226 13.57994,-70.675915 69.85396,-17.318309 41.15239,-59.042199 70.85875,12.5911 61.6092,-37.19955 59.61144,40.3234 71.41322,-8.92476 38.05675,61.08341 68.86926,20.893202 9.92171,71.281547 54.41716,47.098539 -19.92888,69.154452 30.55585,65.16011 -46.33359,55.06994 1.41115,71.9549 -64.7268,31.46332 -27.97755,66.30805 -71.92816,2.4164 -52.52867,49.19593 -66.69248,-27.04832 -67.99711,23.57737 -49.92508,-51.83614 z"
transform="translate(-125.71429,194.28571) scale(0.5, 0.5)"
id="path3792"
style="fill:url(#linearGradient3800);fill-opacity:1;stroke;stroke:black;stroke-width:2px;" />
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Gradients.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg id="svg" x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</linearGradient>
<radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</radialGradient>
<g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
<circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
<rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
</g>
</svg>
<canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Inkscape Pivot.html
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Import Inkscape-style SVG, preserving pivots
var svg = project.importSVG(document.getElementById('svg'), {
onImport: function(node, item) {
var prefix = 'inkscape:transform-center-';
var x = node.getAttribute(prefix + 'x');
var y = node.getAttribute(prefix + 'y');
if (x != null && y != null) {
item.pivot = new Point(+x, +y);
}
}
});
// Illustrate pivot using a simple animation
var rect = svg.children.rectangle;
// Show the pivot
new Path.Circle({
center: rect.localToGlobal(rect.pivot),
radius: 4,
strokeColor: 'black'
});
rect.onFrame = function() {
rect.rotate(1);
}
// And export again, preserving Inkscape pivots
console.log(rect.exportSVG({
onExport: function(item, node) {
var prefix = 'inkscape:transform-center-';
if (item.pivot) {
node.setAttribute(prefix + 'x', item.pivot.x);
node.setAttribute(prefix + 'y', item.pivot.y);
}
}
}))
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<rect id="rectangle" x="50" y="200" width="200" height="100" fill="red" inkscape:transform-center-x="100" inkscape:transform-center-y="0" />
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Inkscape.html
+88
View File
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inkscape</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var start = Date.now();
project.importSVG(document.getElementById('svg2'));
console.log(Date.now() - start);
// console.log(project.exportJSON());
</script>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="400"
height="400"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="a.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.77875"
inkscape:cx="330.27138"
inkscape:cy="184.86687"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
width="400px"
inkscape:window-width="1280"
inkscape:window-height="776"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-652.3622)">
<rect
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:5.44782829;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:10.89565646, 5.44782823;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect2985"
width="394.55215"
height="394.55219"
x="2.7239141"
y="655.08612" />
<g
style="font-size:199.2015686px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:end;line-height:110.00000238%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Quicksand;-inkscape-font-specification:Quicksand Bold"
id="text3755">
<path
d="m 234.38449,911.25829 c 1.59361,4.38243 5.77685,6.97206 10.15928,6.97206 1.39441,0 2.78882,-0.19921 3.78483,-0.59761 5.77684,-2.19121 8.56566,-8.56567 6.57365,-14.34251 L 210.8787,785.96051 c -1.79281,-4.38243 -5.97605,-7.17126 -10.55768,-6.97206 -4.38243,-0.1992 -8.76487,2.58963 -10.55769,6.97206 l -44.02354,117.32972 c -1.99202,5.77684 0.79681,12.1513 6.57365,14.34251 1.19521,0.3984 2.39042,0.59761 3.78483,0.59761 4.38243,0 8.56567,-2.58963 10.35848,-6.97206 l 9.76088,-25.8962 48.40598,0 9.76088,25.8962 m -50.1988,-47.80837 16.13533,-42.82834 16.13532,42.82834 -32.27065,0"
style="fill:#ff0000;fill-opacity:1"
id="path3760" />
</g>
</g>
</svg>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Line Testing.html
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
<line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
<line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
<line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
<line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
<line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
<line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/MoreGradients.html
+107
View File
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('Layer_1'));
</script>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
<stop offset="0" style="stop-color:#231F20"/>
<stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
<stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
</linearGradient>
<rect x="69" y="210" fill="url(#SVGID_1_)" width="461" height="59"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="69" y1="162.5" x2="530" y2="162.5">
<stop offset="0" style="stop-color:#00A14B"/>
<stop offset="0.0031" style="stop-color:#0BA449"/>
<stop offset="0.0203" style="stop-color:#43B13D"/>
<stop offset="0.038" style="stop-color:#75BD33"/>
<stop offset="0.0559" style="stop-color:#A0C72A"/>
<stop offset="0.074" style="stop-color:#C2CF23"/>
<stop offset="0.0922" style="stop-color:#DDD61E"/>
<stop offset="0.1107" style="stop-color:#F0DA1A"/>
<stop offset="0.1298" style="stop-color:#FBDD18"/>
<stop offset="0.15" style="stop-color:#FFDE17"/>
<stop offset="0.3" style="stop-color:#F26522"/>
<stop offset="0.47" style="stop-color:#00A14B"/>
<stop offset="0.64" style="stop-color:#FFDE17"/>
<stop offset="0.8012" style="stop-color:#F26522"/>
<stop offset="1" style="stop-color:#00A14B"/>
</linearGradient>
<rect x="69" y="133" fill="url(#SVGID_2_)" width="461" height="59"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="69" y1="91.5" x2="530" y2="91.5">
<stop offset="0%" style="stop-color:#00A14B"/>
<stop offset="0.31%" style="stop-color:#0BA449"/>
<stop offset="2%" style="stop-color:#43B13D"/>
<stop offset="3.8%" style="stop-color:#75BD33"/>
<stop offset="5.59%" style="stop-color:#A0C72A"/>
<stop offset="7.4%" style="stop-color:#C2CF23"/>
<stop offset="9.22%" style="stop-color:#DDD61E"/>
<stop offset="11.07%" style="stop-color:#F0DA1A"/>
<stop offset="12.98%" style="stop-color:#FBDD18"/>
<stop offset="15%" style="stop-color:#FFDE17"/>
<stop offset="30%" style="stop-color:#F26522"/>
<stop offset="47%" style="stop-color:#00A14B"/>
<stop offset="64%" style="stop-color:#FFDE17"/>
<stop offset="80.12%" style="stop-color:#F26522"/>
<stop offset="100%" style="stop-color:#00A14B"/>
</linearGradient>
<rect x="69" y="62" fill="url(#SVGID_3_)" width="461" height="59"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="760.1406" x2="485.6914" y2="760.1406" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
<stop offset="0" style="stop-color:#231F20"/>
<stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
<stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
</linearGradient>
<rect x="70" y="289.051" fill="url(#SVGID_4_)" width="59" height="461"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="683.1396" x2="485.6914" y2="683.1396" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
<stop offset="0" style="stop-color:#00A14B"/>
<stop offset="0.0031" style="stop-color:#0BA449"/>
<stop offset="0.0203" style="stop-color:#43B13D"/>
<stop offset="0.038" style="stop-color:#75BD33"/>
<stop offset="0.0559" style="stop-color:#A0C72A"/>
<stop offset="0.074" style="stop-color:#C2CF23"/>
<stop offset="0.0922" style="stop-color:#DDD61E"/>
<stop offset="0.1107" style="stop-color:#F0DA1A"/>
<stop offset="0.1298" style="stop-color:#FBDD18"/>
<stop offset="0.15" style="stop-color:#FFDE17"/>
<stop offset="0.3" style="stop-color:#F26522"/>
<stop offset="0.47" style="stop-color:#00A14B"/>
<stop offset="0.64" style="stop-color:#FFDE17"/>
<stop offset="0.8012" style="stop-color:#F26522"/>
<stop offset="1" style="stop-color:#00A14B"/>
</linearGradient>
<rect x="147.001" y="289.051" fill="url(#SVGID_5_)" width="59" height="461"/>
<radialGradient id="SVGID_6_" cx="368.75" cy="409.5503" r="92.1995" gradientUnits="userSpaceOnUse">
<stop offset="0.1656" style="stop-color:#FFFFFF"/>
<stop offset="0.2576" style="stop-color:#CBCBCB"/>
<stop offset="0.3651" style="stop-color:#969696"/>
<stop offset="0.474" style="stop-color:#686868"/>
<stop offset="0.5821" style="stop-color:#434343"/>
<stop offset="0.6893" style="stop-color:#252525"/>
<stop offset="0.7953" style="stop-color:#111111"/>
<stop offset="0.8995" style="stop-color:#040404"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<circle fill="url(#SVGID_6_)" cx="368.75" cy="409.55" r="92.2"/>
<radialGradient id="SVGID_7_" cx="368.75" cy="619.5508" r="92.1997" fx="323.3488" fy="618.7006" gradientUnits="userSpaceOnUse">
<stop offset="0.1656" style="stop-color:#FFFFFF"/>
<stop offset="0.2576" style="stop-color:#CBCBCB"/>
<stop offset="0.3651" style="stop-color:#969696"/>
<stop offset="0.474" style="stop-color:#686868"/>
<stop offset="0.5821" style="stop-color:#434343"/>
<stop offset="0.6893" style="stop-color:#252525"/>
<stop offset="0.7953" style="stop-color:#111111"/>
<stop offset="0.8995" style="stop-color:#040404"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<circle fill="url(#SVGID_7_)" cx="368.75" cy="619.551" r="92.2"/>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Multiple Paths Test 1.html
+42
View File
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Paths Test</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g>
<circle cx="100" cy="400" r="100" style="fill:darkred;" id="circle" />
<g>
<rect x="200" y="20" rx="20" ry="10" width="150px" height="150px" style="fill:green" id="round" />
<circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
</g>
</g>
<g>
<rect x="250" y="180" width="150px" height="150px" fill="blue" style="stroke-dasharray: 10px, 4px; stroke-width:0px;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="ellipse" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" id="path" />
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4px" fill="none" id="path"/>
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4px" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text" text-anchor="start">I love SVG</text>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Multiple Paths Test 2.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Paths Test 2</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 175 200 l 150 0" stroke="red" stroke-width="3px" fill="none" />
<path id="quadcurveABC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5px" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g fill="black" stroke="none" text-anchor="middle">
<text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
<text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
<text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Nested Groups Test.html
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested Groups Test</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g>
<circle cx="25" cy="25" r="20" style="fill:orange;" id="circle" />
<g>
<circle cx="75" cy="25" r="20" style="fill:red;" id="circle" />
<g>
<circle cx="125" cy="25" r="20" style="fill:pink;" id="circle" />
<g>
<circle cx="175" cy="25" r="20" style="fill:blue;" id="circle" />
<g>
<circle cx="225" cy="25" r="20" style="fill:green;" id="circle" />
<g>
<circle cx="275" cy="25" r="20" style="fill:purple;" id="circle" />
<g>
<circle cx="25" cy="75" r="20" style="fill:black;" id="circle" />
<g>
<circle cx="75" cy="75" r="20" style="fill:indigo;" id="circle" />
<g>
<circle cx="125" cy="75" r="20" style="fill:gold;" id="circle" />
<g>
<circle cx="175" cy="75" r="20" style="fill:brown;" id="circle" />
<g>
<circle cx="225" cy="75" r="20" style="fill:darkred;" id="circle" />
<g>
<circle cx="275" cy="75" r="20" style="fill:darkgreen;" id="circle" />
<g>
<circle cx="25" cy="125" r="20" style="fill:darkgrey;" id="circle" />
<g>
<circle cx="75" cy="125" r="20" style="fill:violet;" id="circle" />
<g>
<circle cx="125" cy="125" r="20" style="fill:yellow;" id="circle" />
<g>
<circle cx="175" cy="125" r="20" style="fill:lightblue;" id="circle" />
<g>
<circle cx="225" cy="125" r="20" style="fill:lightgreen;" id="circle" />
<g>
<circle cx="275" cy="125" r="20" style="fill:darkblue;" id="circle" />
<g>
<circle cx="25" cy="175" r="20" style="fill:darkorange;" id="circle" />
<g>
<circle cx="75" cy="175" r="20" style="fill:lawngreen;" id="circle" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Polybezier.html
+43
View File
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rect Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
<style type="text/css">
.Border { fill:none; stroke:blue; stroke-width:1; }
.Connect { fill:none; stroke:#888888; stroke-width:2; }
.SamplePath { fill:none; stroke:red; stroke-width:5; }
.EndPoint { fill:none; stroke:#888888; stroke-width:2; }
.CtlPoint { fill:#888888; stroke:none; }
.AutoCtlPoint { fill:none; stroke:blue; stroke-width:4; }
.Label { font-size:22px; font-family: Verdana; }
</style>
</head>
<body>
<svg id="svg" width="500" height="500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline class="Connect" points="100,200 100,100" />
<polyline class="Connect" points="250,100 250,200" />
<polyline class="Connect" points="250,200 250,300" />
<polyline class="Connect" points="400,300 400,200" />
<path class="SamplePath" d="M100,200 C100,100 250,100 250,200
S400,300 400,200" />
<circle class="EndPoint" cx="100" cy="200" r="10" />
<circle class="EndPoint" cx="250" cy="200" r="10" />
<circle class="EndPoint" cx="400" cy="200" r="10" />
<circle class="CtlPoint" cx="100" cy="100" r="10" />
<circle class="CtlPoint" cx="250" cy="100" r="10" />
<circle class="CtlPoint" cx="400" cy="300" r="10" />
<circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
<text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
<text class="Label" x="325" y="350"
style="text-anchor:middle">S400,300 400,200</text>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Rect Testing.html
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rect Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var group = project.importSVG(document.getElementById('svg'));
console.log(JSON.stringify(group.children[0].data));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" data-paper-data='{"string":"----","number":1234,"array":["a ray","some rays"],"bool":true,"nil":null,"point":["Point",12,34],"size":["Size",12,34],"rectangle":["Rectangle",12,34,56,78],"deep":{"deeper":{"deepest":true}}}' />
<rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
<rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
<rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />
<rect x="300" y="10" width="50" height="50px" fill="gold" style="stroke-dasharray: 10, 4; stroke: black; stroke-width:5px" id="rect1" />
<rect x="300" y="300" width="100" height="100px" fill="pink" style="stroke-dasharray: 10, 4; stroke-width:50px;" id="rect2" />
<rect x="300" y="180" width="178" height="100px" fill="hotpink" style="stroke-dasharray: 10, 4; stroke-width:10px;" id="rect3" />
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Symbols.html
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols Test</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="595" height="841">
<symbol id="circle" viewBox="0 0 48 48" overflow="visible">
<path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/>
</symbol>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(0.5625 0 0 -0.5625 92 152)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)"/>
</svg>
<canvas id="canvas" width="595" height="841"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Testing.html
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Stroke Bounds</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g>
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10;stroke-dasharray: 10, 4;stroke-linecap: butt" id="line" />
<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
<circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
</g>
<g>
<rect x="250" y="180" width="150" height="150" fill="blue" style="stroke-dasharray: 10, 4; stroke-width:0;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="ellipse" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4" fill="none" id="path"/>
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Text Testing.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">Plain SVG Text</text>
<text x="20" y="50" fill="red" transform="rotate(30 20,40)" style="font:12px helvetica;">Rotated SVG Text</text>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Tiger.html
+742
View File
@@ -0,0 +1,742 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tiger</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var start = Date.now();
project.importSVG(document.getElementById('svg'));
console.log(Date.now() - start);
// console.log(project.exportJSON());
</script>
</head>
<body>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900" version="1.1" width="600px" height="600px">
<g id="g4" fill="none" transform="matrix(1.7656463,0,0,1.7656463,324.90716,255.00942)">
<g id="g6" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path8" d="m-122.3,84.285s0.1,1.894-0.73,1.875c-0.82-0.019-17.27-48.094-37.8-45.851,0,0,17.78-7.353,38.53,43.976z"/>
</g>
<g id="g10" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path12" d="m-118.77,81.262s-0.55,1.816-1.32,1.517c-0.77-0.298,0.11-51.104-19.95-55.978,0,0,19.22-0.864,21.27,54.461z"/>
</g>
<g id="g14" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path16" d="m-91.284,123.59s1.636,0.96,1.166,1.64c-0.471,0.67-49.642-12.13-59.102,6.23,0,0,3.68-18.89,57.936-7.87z"/>
</g>
<g id="g18" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path20" d="m-94.093,133.8s1.856,0.4,1.622,1.19c-0.233,0.79-50.939,4.13-54.129,24.53,0,0-2.46-19.08,52.507-25.72z"/>
</g>
<g id="g22" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path24" d="m-98.304,128.28s1.778,0.66,1.432,1.41-50.998-3.34-57.128,16.37c0,0,0.35-19.24,55.696-17.78z"/>
</g>
<g id="g26" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path28" d="m-109.01,110.07s1.31,1.38,0.67,1.9-44.38-25.336-58.53-10.29c0,0,8.74-17.147,57.86,8.39z"/>
</g>
<g id="g30" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path32" d="m-116.55,114.26s1.45,1.22,0.88,1.81c-0.58,0.59-46.97-20.148-59.32-3.6,0,0,6.74-18.023,58.44,1.79z"/>
</g>
<g id="g34" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path36" d="m-119.15,118.34s1.6,1,1.11,1.67c-0.49,0.66-49.27-13.56-59.25,4.51,0,0,4.22-18.77,58.14-6.18z"/>
</g>
<g id="g38" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path40" d="m-108.42,118.95s1.12,1.53,0.42,1.97c-0.7,0.43-40.77-30.818-56.73-17.71,0,0,10.87-15.884,56.31,15.74z"/>
</g>
<g id="g42" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path44" d="m-128.2,90s0.6,1.8-0.2,2-29.4-41.8-48.6-34.2c0,0,15.2-11.8,48.8,32.2z"/>
</g>
<g id="g46" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path48" d="m-127.5,96.979s0.97,1.629,0.23,1.996c-0.74,0.368-37.72-34.476-54.83-22.914,0,0,12.3-14.8,54.6,20.918z"/>
</g>
<g id="g50" stroke-width="0.17200001" stroke="#000" fill="#FFF">
<path id="path52" d="m-127.62,101.35s1.12,1.53,0.42,1.97c-0.7,0.43-40.77-30.818-56.73-17.713,0,0,10.87-15.881,56.31,15.743z"/>
</g>
<g id="g54" stroke="#000" fill="#FFF">
<path id="path56" d="m-129.83,103.06c0.5,6.05,1.49,12.62,3.23,15.74,0,0-3.6,12.4,5.2,25.6,0,0-0.4,7.2,1.2,10.4,0,0,4,8.4,8.8,9.2,3.88,0.65,12.607,3.72,22.468,5.12,0,0,17.132,14.08,13.932,26.88,0,0-0.4,16.4-4,18,0,0,11.6-11.2,2,5.6l-4.4,18.8s25.6-21.6,10-3.2l-10,26s19.6-18.4,12.4-10l-3.2,8.8s43.2-27.2,12.4,2.4c0,0,8-3.6,12.4-0.8,0,0,6.8-1.2,6,0.4,0,0-20.8,10.4-24.4,28.8,0,0,8.4-10,5.2,0.8l0.4,11.6s4-21.6,3.6,16c0,0,19.2-18,7.6,2.8v16.8s15.2-16.4,8.8-3.6c0,0,10-8.8,6,6.4,0,0-0.8,10.4,3.6-0.8,0,0,16-30.6,10-4.4,0,0-0.8,19.2,4,4.4,0,0,0.4,10.4,9.6,17.6,0,0-1.2-50.8,11.6-14.8l4,16.4s2.8-9.2,2.4-14.4l8,8s15.2-22.8,12-9.6c0,0-7.6,16-6,20.8,0,0,16.8-34.8,18-36.4,0,0-2,42.4,8.8,6.4,0,0,5.6,12,2.8,16.4,0,0,8-8,7.2-11.2,0,0,4.6-8.2,7.4,5.4,0,0,1.8,9.4,3.4,6.2,0,0,4,24,5.2,1.2,0,0,1.6-13.6-5.6-25.2,0,0,0.8-3.2-2-7.2,0,0,13.6,21.6,6.4-7.2,0,0,11.201,8,12.401,8,0,0-13.601-23.2-4.801-18.4,0,0-5.2-10.4,12.801,1.6,0,0-16.001-16,1.6-6.4,0,0,7.999,6.4,0.4-3.6,0,0-14.401-16,7.599,2,0,0,11.6,16.4,12.4,19.2,0,0-10-29.2-14.4-32,0,0,8.4-36.4,49.6-20.8,0,0,6.8,17.2,11.2-1.2,0,0,12.8-6.4,24,21.2,0,0,4-13.6,3.2-16.4,0,0,6.8,1.2,6,0,0,0,13.2,4.4,14.4,3.6,0,0,6.8,6.8,7.2,3.2,0,0,9.2,2.8,7.2-0.8,0,0,8.8,15.6,9.2,19.2l2.4-14,2,2.8s1.6-7.6,0.8-8.8,20,6.8,24.8,27.6l2,8.4s6-14.8,4.4-18.8c0,0,5.2,0.8,5.6,5.2,0,0,4-23.2-0.8-29.2,0,0,4.4-0.8,5.6,2.8v-7.2s7.2,0.8,7.2-1.6c0,0,4.4-4,6.4,0.8,0,0-12.4-35.2,6-16,0,0,7.2,10.8,3.6-8s-7.6-20.4-2.8-20.8c0,0,0.8-3.6-1.2-5.2s1.2,0,1.2,0,4.8,4-0.4-18c0,0,6.4,1.6-5.6-27.6,0,0,2.8-2.4-1.2-10.8,0,0,8,4.4,10.8,2.8,0,0-0.4-1.6-3.6-5.6,0,0-21.6-54.8-1.2-32.8,0,0,11.85,13.55,5.45-9.25,0,0-9.11-24.009-8.33-28.305l-429.55,23.015z"/>
</g>
<g id="g58" stroke="#000" fill="#cc7226">
<path id="path60" d="m299.72,80.245c0.62,0.181,2.83,1.305,4.08,2.955,0,0,6.8,10.8,1.6-7.6,0,0-9.2-28.8-0.4-17.6,0,0,6,7.2,2.8-6.4-3.86-16.427-6.4-22.8-6.4-22.8s11.6,4.8-15.2-34.8l8.8,3.6s-19.6-39.6-41.2-44.8l-8-6s38.4-38,25.6-74.8c0,0-6.8-5.2-16.4,4,0,0-6.4,4.8-12.4,3.2,0,0-30.8,1.2-32.8,1.2s-36.8-37.2-102.4-19.6c0,0-5.2,2-9.599,0.8,0,0-18.401-16-67.201,6.8,0,0-10,2-11.6,2s-4.4,0-12.4,6.4-8.4,7.2-10.4,8.8c0,0-16.4,11.2-21.2,12,0,0-11.6,6.4-16,16.4l-3.6,1.2s-1.6,7.2-2,8.4c0,0-4.8,3.6-5.6,9.2,0,0-8.8,6-8.4,10.4,0,0-1.6,5.2-2.4,10,0,0-7.2,4.8-6.4,7.6,0,0-7.6,14-6.4,20.8,0,0-6.4-0.4-9.2,2,0,0-0.8,4.8-2.4,5.2,0,0-2.8,1.2-0.4,5.2,0,0-1.6,2.8-2,4.4,0,0,0.8,2.8-3.6,8.4,0,0-6.4,18.8-4.4,24,0,0,0.4,4.8-2.4,6.4,0,0-3.6-0.4,4.8,11.6,0,0,0.8,1.2-2.4,3.6,0,0-17.2,3.6-19.6,20,0,0-13.6,14.8-13.6,20,0,2.305,0.27,5.452,0.97,10.06,0,0-0.57,8.34,27.03,9.14s402.72-31.355,402.72-31.355z"/>
</g>
<g id="g62" fill="#cc7226">
<path id="path64" d="m-115.6,102.6c-25-39.4-10.6,17-10.6,17,8.8,34.4,138.4-3.2,138.4-3.2s168.8-30.4,180-34.4,106.4,2.4,106.4,2.4l-5.6-16.8c-64.8-46.4-84-23.2-97.6-27.2s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2-31.74-22.951-16.8,8.8c16,34-58.4,39.2-75.2,28s7.2,18.4,7.2,18.4c18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4-8.8-2.4-8.31-23.101-40,3.2c-20,16.6-33.8-5.4-33.8-5.4l-2.8,11.6z"/>
</g>
<g id="g66" fill="#e87f3a">
<path id="path68" d="m133.51,25.346c-6.4,0.8-31.77-22.939-16.8,8.8,16.6,35.2-58.4,39.2-75.2,28-16.801-11.2,7.2,18.4,7.2,18.4,18.4,20.004-16.001,3.2-16.001,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4.004-8.8-2.4c-0.8-6.4-8.179-22.934-40,3.2-21.236,17.344-34.729-4.109-34.729-4.109l-3.2,10.113c-25-39.804-9.93,18.51-9.93,18.51,8.81,34.4,139.06-4.51,139.06-4.51s168.8-30.404,180-34.404,105.53,2.327,105.53,2.327l-5.53-17.309c-64.8-46.4-83.2-22.618-96.8-26.618s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
</g>
<g id="g70" fill="#ea8c4d">
<path id="path72" d="m134.82,27.091c-6.4,0.8-31.14-23.229-16.8,8.8,16.2,36.201-58.401,39.201-75.201,28.001s7.2,18.4,7.2,18.4c18.4,19.998-16,3.2-16,3.2-34.4-12.8-58.401,12.8-61.601,13.6s-8,3.998-8.8-2.4c-0.8-6.4-8.048-22.767-40,3.2-22.473,18.088-35.658-2.818-35.658-2.818l-3.6,8.616c-23.8-38.998-9.25,20.02-9.25,20.02,8.8,34.4,139.71-5.82,139.71-5.82s168.8-30.398,180-34.398,104.65,2.254,104.65,2.254l-5.45-17.818c-64.8-46.4-82.4-22.037-96-26.037s-11.2,5.6-14.4,6.401c-3.2,0.8-42.4-24.001-48.8-23.201z"/>
</g>
<g id="g74" fill="#ec9961">
<path id="path76" d="m136.13,28.837c-6.4,0.8-31.13-23.232-16.8,8.8,16.8,37.556-58.936,38.845-75.202,28-16.8-11.2,7.2,18.4,7.2,18.4,18.4,20.003-16,3.2-16,3.2-34.4-12.8-58.4,12.803-61.6,13.603s-8,4-8.8-2.403c-0.8-6.4-7.917-22.598-40.001,3.203-23.709,18.83-36.587-1.53-36.587-1.53l-4,7.13c-21.8-36.803-8.58,21.52-8.58,21.52,8.8,34.4,140.37-7.12,140.37-7.12s168.8-30.403,180-34.403,103.78,2.182,103.78,2.182l-5.38-18.327c-64.8-46.401-81.6-21.455-95.2-25.455s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
</g>
<g id="g78" fill="#eea575">
<path id="path80" d="m137.44,30.583c-6.4,0.8-30.63-23.454-16.8,8.8,16.8,39.2-58.403,39.2-75.203,28s7.2,18.4,7.2,18.4c18.4,19.997-16,3.2-16,3.2-34.4-12.8-58.4,12.797-61.6,13.597s-8,4-8.8-2.4c-0.8-6.397-7.785-22.428-40,3.2-24.946,19.58-37.507-0.23-37.507-0.23l-4.4,5.63c-19.8-34.798-7.91,23.04-7.91,23.04,8.8,34.4,141.02-8.44,141.02-8.44s168.8-30.397,180-34.397,102.91,2.109,102.91,2.109l-5.31-18.837c-64.8-46.4-80.8-20.872-94.4-24.872s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
</g>
<g id="g82" fill="#f1b288">
<path id="path84" d="m138.75,32.328c-6.4,0.8-32.37-22.651-16.8,8.8,19.2,38.8-58.404,39.2-75.204,28s7.2,18.4,7.2,18.4c18.4,20.002-16,3.2-16,3.2-34.4-12.8-58.4,12.802-61.6,13.602s-8,4-8.8-2.4c-0.8-6.402-7.654-22.265-40,3.2-26.182,20.33-38.436,1.05-38.436,1.05l-4.8,4.15c-18-33.202-7.24,24.54-7.24,24.54,8.8,34.4,141.68-9.74,141.68-9.74s168.8-30.402,180-34.402,102.03,2.036,102.03,2.036l-5.23-19.345c-64.8-46.4-80-20.291-93.6-24.291s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
</g>
<g id="g86" fill="#f3bf9c">
<path id="path88" d="m140.06,34.073c-6.4,0.8-32.75-22.46-16.8,8.8,20.4,40.001-58.405,39.201-75.205,28.001s7.2,18.4,7.2,18.4c18.4,19.996-16,3.2-16,3.2-34.4-12.8-58.4,12.796-61.6,13.596s-8,4-8.8-2.4c-0.8-6.396-7.523-22.092-40,3.2-27.419,21.08-39.365,2.35-39.365,2.35l-5.2,2.65c-16-30.196-6.56,26.06-6.56,26.06,8.8,34.4,142.32-11.06,142.32-11.06s168.8-30.396,180-34.396,101.16,1.963,101.16,1.963l-5.16-19.854c-64.8-46.4-79.2-19.709-92.8-23.709-13.6-4.001-11.2,5.6-14.4,6.4s-42.4-24.001-48.8-23.201z"/>
</g>
<g id="g90" fill="#f5ccb0">
<path id="path92" d="m141.36,35.819c-6.4,0.8-33.84-21.875-16.8,8.8,22,39.6-58.396,39.2-75.196,28s7.2,18.4,7.2,18.4c18.4,20.001-16,3.2-16,3.2-34.4-12.8-58.4,12.801-61.6,13.601s-8,4-8.8-2.4c-0.8-6.401-7.391-21.928-40,3.2-28.655,21.82-40.294,3.64-40.294,3.64l-5.6,1.16c-14.4-28.401-5.89,27.56-5.89,27.56,8.8,34.4,142.98-12.36,142.98-12.36s168.8-30.401,180-34.401,100.3,1.891,100.3,1.891l-5.1-20.364c-64.8-46.4-78.4-19.127-92-23.127s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
</g>
<g id="g94" fill="#f8d8c4">
<path id="path96" d="m142.67,37.565c-6.4,0.8-33.84-21.876-16.8,8.8,22,39.6-58.396,39.2-75.196,28s7.2,18.4,7.2,18.4c18.4,19.995-16,3.2-16,3.2-34.401-12.8-58.401,12.795-61.601,13.595s-8,4-8.8-2.4-7.259-21.755-40,3.2c-29.891,22.57-41.213,4.93-41.213,4.93l-6-0.33c-13.61-26.396-5.22,29.08-5.22,29.08,8.8,34.4,143.63-13.68,143.63-13.68s168.8-30.395,180-34.395,99.42,1.818,99.42,1.818l-5.01-20.873c-64.81-46.4-77.61-18.545-91.21-22.545s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
</g>
<g id="g98" fill="#fae5d7">
<path id="path100" d="m143.98,39.31c-6.4,0.8-33.45-22.087-16.8,8.8,22,40.8-58.397,39.2-75.197,28s7.2,18.4,7.2,18.4c18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6-3.201,0.8-8.001,4-8.801-2.4s-7.128-21.592-40,3.2c-31.127,23.31-42.142,6.22-42.142,6.22l-6.4-1.82c-13-24-4.55,30.58-4.55,30.58,8.8,34.4,144.29-14.98,144.29-14.98s168.8-30.4,180-34.4,98.55,1.746,98.55,1.746l-4.95-21.382c-64.8-46.401-76.8-17.964-90.4-21.964s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
</g>
<g id="g102" fill="#fcf2eb">
<path id="path104" d="m145.29,41.055c-6.4,0.8-32.37-22.644-16.8,8.8,21.2,42.801-58.398,39.201-75.198,28.001s7.2,18.4,7.2,18.4c18.4,20.004-16,3.2-16,3.2-34.4-12.8-58.4,12.804-61.6,13.604s-8,4-8.8-2.4-6.997-21.428-40,3.2c-32.365,24.05-43.072,7.5-43.072,7.5l-6.8-3.3c-12.8-23.204-3.87,32.09-3.87,32.09,8.8,34.4,144.94-16.29,144.94-16.29s168.8-30.4,180-34.404c11.2-4,97.67,1.674,97.67,1.674l-4.87-21.893c-64.8-46.4-76-17.381-89.6-21.381-13.6-4.001-11.2,5.6-14.4,6.4s-42.4-24.001-48.8-23.201z"/>
</g>
<g id="g106" fill="#FFF">
<path id="path108" d="m-115.8,119.6c-12.8-22-3.2,33.6-3.2,33.6,8.8,34.4,145.6-17.6,145.6-17.6s168.8-30.4,180-34.4,96.8,1.6,96.8,1.6l-4.8-22.4c-64.8-46.4-75.2-16.8-88.8-20.8s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2-31.62-23.007-16.8,8.8c22.23,47.707-60.759,37.627-75.2,28-16.8-11.2,7.2,18.4,7.2,18.4,18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4-8.8-2.4-6.865-21.256-40,3.2c-33.6,24.8-44,8.8-44,8.8l-7.2-4.8z"/>
</g>
<g id="g110" fill="#000">
<path id="path112" d="m-74.2,149.6s-7.2,11.6,13.6,24.8c0,0,1.4,1.4-16.6-2.8,0,0-6.2-2-7.8-12.4,0,0-4.8-4.4-9.6-10s20.4,0.4,20.4,0.4z"/>
</g>
<g id="g114" fill="#CCC">
<path id="path116" d="m65.8,102s17.698,26.82,17.1,31.6c-1.3,10.4-1.5,20,1.7,24,3.201,4,12.001,37.2,12.001,37.2s-0.4,1.2,11.999-36.8c0,0,11.6-16-8.4-34.4,0,0-35.2-28.8-34.4-21.6z"/>
</g>
<g id="g118" fill="#000">
<path id="path120" d="m-54.2,176.4s11.2,7.2-3.2,38.4l6.4-2.4s-0.8,11.2-4,13.6l7.2-3.2s4.8,8,0.8,12.8c0,0,16.8,8,16,14.4,0,0,6.4-8,2.4-14.4s-11.2-2.4-10.4-20.8l-8.8,3.2s5.6-8.8,5.6-15.2l-8,2.4s15.469-26.58,4.8-28c-6-0.8-8.8-0.8-8.8-0.8z"/>
</g>
<g id="g122" fill="#CCC">
<path id="path124" d="m-21.8,193.2s2.8-4.4,0-3.6-34,15.6-40,25.2c0,0,34.4-24.4,40-21.6z"/>
</g>
<g id="g126" fill="#CCC">
<path id="path128" d="m-11.4,201.2s2.8-4.4,0-3.6-34,15.6-40,25.2c0,0,34.4-24.4,40-21.6z"/>
</g>
<g id="g130" fill="#CCC">
<path id="path132" d="m1.8,186s2.8-4.4,0-3.6-34,15.6-40,25.2c0,0,34.4-24.4,40-21.6z"/>
</g>
<g id="g134" fill="#CCC">
<path id="path136" d="m-21.4,229.6s0-6-2.8-5.2-38.8,18.4-44.8,28c0,0,42-25.6,47.6-22.8z"/>
</g>
<g id="g138" fill="#CCC">
<path id="path140" d="m-20.2,218.8s1.2-4.8-1.6-4c-2,0-28.4,11.6-34.4,21.2,0,0,29.6-21.6,36-17.2z"/>
</g>
<g id="g142" fill="#CCC">
<path id="path144" d="m-34.6,266.4-10,7.6s10.4-7.6,14-6.4c0,0-6.8,11.2-7.6,16.4,0,0,10.4-12.8,16-12.4,0,0,7.6,0.4,7.6,11.2,0,0,5.6-10.4,8.8-10,0,0,1.2,6.4,0,13.2,0,0,4-7.6,8-6,0,0,6.4-2,5.6,9.6,0,0,0,10.4-0.8,13.2,0,0,5.6-26.4,8-26.8,0,0,8-1.2,12.8,7.6,0,0-4-7.6,0.8-5.6,0,0,10.8,1.6,14,8.4,0,0-6.8-12-1.2-8.8l8,6.4s8.4,21.2,10.4,22.8c0,0-7.6-21.6-6-21.6,0,0-2-12,3.2,2.8,0,0-3.2-14,2.4-13.2s10,10.8,18.4,8.4c0,0,9.601,5.6,11.601-63.6l-124,46.8z"/>
</g>
<g id="g146" fill="#000">
<path id="path148" d="m-29.8,173.6s14.8-6,54.8,0c0,0,7.2,0.4,14-8.4s33.6-16,40-14l9.601,6.4,0.8,1.2s12.399,10.4,12.799,18-14.399,55.6-24,71.6c-9.6,16-19.2,28.4-38.4,26,0,0-20.8-4-46.4,0,0,0-29.2-1.6-32-9.6s11.2-23.2,11.2-23.2,4.4-8.4,3.2-22.8-0.8-42.4-5.6-45.2z"/>
</g>
<g id="g150" fill="#e5668c">
<path id="path152" d="M-7.8,175.6c8.4,18.4-21.2,83.6-21.2,83.6-2,1.6,12.66,7.65,22.8,5.2,10.946-2.64,51.2,1.6,51.2,1.6,23.6-15.6,36.4-60,36.4-60s10.401-24-7.2-27.2c-17.6-3.2-82-3.2-82-3.2z"/>
</g>
<g id="g154" fill="#b23259">
<path id="path156" d="m-9.831,206.5c3.326-12.79,4.91-24.59,2.031-30.9,0,0,62.4,6.4,73.6-14.4,4.241-7.87,19.001,22.8,18.6,32.4,0,0-63,14.4-77.8,3.2l-16.431,9.7z"/>
</g>
<g id="g158" fill="#a5264c">
<path id="path160" d="m-5.4,222.8s2,7.2-0.4,11.2c0,0-1.6,0.8-2.8,1.2,0,0,1.2,3.6,7.2,5.2,0,0,2,4.4,4.4,4.8s7.2,6,11.2,4.8,15.2-5.2,15.2-5.2,5.6-3.2,14.4,0.4c0,0,2.375-0.8,2.8-4.8,0.5-4.7,3.6-8.4,5.6-10.4s11.6-14.8,10.4-15.2-68,8-68,8z"/>
</g>
<g id="g162" stroke="#000" fill="#ff727f">
<path id="path164" d="m-9.8,174.4s-2.8,22.4,0.4,30.8,2.4,10.4,1.6,14.4,3.6,14,9.2,20l12,1.6s15.2-3.6,24.4-0.8c0,0,8.994,1.34,12.4-13.6,0,0,4.8-6.4,12-9.2s14.4-44.4,10.4-52.4-18.4-12.4-34.4,3.2-18-1.2-48,6z"/>
</g>
<g id="g166" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path168" d="m-8.2,249.2s-0.8-2-5.2-2.4c0,0-22.4-3.6-30.8-16,0,0-6.8-5.6-2.4,6,0,0,10.4,20.4,17.2,23.2,0,0,16.4,4,21.2-10.8z"/>
</g>
<g id="g170" fill="#cc3f4c">
<path id="path172" d="m71.742,185.23c0.659-7.91,2.612-16.52,0.858-20.03-6.446-12.89-23.419-7.5-34.4,3.2-16,15.6-18-1.2-48,6,0,0-1.745,13.96-0.905,23.98,0,0,37.305-11.58,38.105-5.98,0,0,1.6-3.2,10.8-3.2s31.942-1.17,33.542-3.97z"/>
</g>
<g id="g174" stroke-width="2" stroke="#a51926">
<path id="path176" d="m28.6,175.2s4.8,4.8,1.2,14.4c0,0-14.4,16-12.4,30"/>
</g>
<g id="g178" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path180" d="m-19.4,260s-4.4-12.8,4.4-6l3.6,3.6c-1.2,1.6-6.8,5.6-8,2.4z"/>
</g>
<g id="g182" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path184" d="m-14.36,261.2s-3.52-10.24,3.52-4.8l2.88,2.88c-4.56,1.28,0,3.84-6.4,1.92z"/>
</g>
<g id="g186" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path188" d="m-9.56,261.2s-3.52-10.24,3.52-4.8l2.88,2.88c-3.36,1.28,0,3.84-6.4,1.92z"/>
</g>
<g id="g190" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path192" d="m-2.96,261.4s-3.52-10.24,3.52-4.8c0,0,4.383,2.33,2.881,2.88-2.961,1.08,0,3.84-6.401,1.92z"/>
</g>
<g id="g194" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path196" d="m3.52,261.32s-3.52-10.24,3.521-4.8l2.88,2.88c-0.96,1.28,0,3.84-6.401,1.92z"/>
</g>
<g id="g198" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path200" d="m10.2,262s-4.8-12.4,4.4-6l3.6,3.6c-1.2,1.6,0,4.8-8,2.4z"/>
</g>
<g id="g202" stroke-width="2" stroke="#a5264c">
<path id="path204" d="m-18.2,244.8s13.2-2.8,19.2,0.4c0,0,6,1.2,7.2,0.8s4.4-0.8,4.4-0.8"/>
</g>
<g id="g206" stroke-width="2" stroke="#a5264c">
<path id="path208" d="m15.8,253.6s12-13.6,24-9.2c7.016,2.57,6-0.8,6.8-3.6s1-7,6-10"/>
</g>
<g id="g210" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path212" d="m33,237.6s-4-10.8-6.8,2-6,16.4-7.6,19.2c0,0,0,5.2,8.4,4.8,0,0,10.8-0.4,11.2-3.2s-1.2-14.4-5.2-22.8z"/>
</g>
<g id="g214" stroke-width="2" stroke="#a5264c">
<path id="path216" d="m47,244.8s3.6-2.4,6-1.2"/>
</g>
<g id="g218" stroke-width="2" stroke="#a5264c">
<path id="path220" d="m53.5,228.4s2.9-4.9,7.7-5.7"/>
</g>
<g id="g222" fill="#b2b2b2">
<path id="path224" d="m-25.8,265.2s18,3.2,22.4,1.6l0.4,2-20.8-1.2s-11.6-5.6-2-2.4z"/>
</g>
<g id="g226" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path228" d="m-11.8,172,19.6,0.8s7.2,30.8,3.6,38.4c0,0-1.2,2.8-4-2.8,0,0-18.4-32.8-21.6-34.8s1.2-1.6,2.4-1.6z"/>
</g>
<g id="g230" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path232" d="m-88.9,169.3s8.9,1.7,21.5,4.3c0,0,4.8,22.4,8,27.2s-0.4,4.8-4,2-18.4-16.8-20.4-21.2-5.1-12.3-5.1-12.3z"/>
</g>
<g id="g234" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path236" d="m-67.039,173.82s5.8,1.55,6.809,3.76c1.008,2.22-1.202,5.51-1.202,5.51s-1,3.31-2.202,1.15c-1.202-2.17-4.074-9.83-3.405-10.42z"/>
</g>
<g id="g238" fill="#000">
<path id="path240" d="m-67,173.6s3.6,5.2,7.2,5.2,3.982-0.41,6.8,0.2c4.6,1,4.2-1,10.8,0.2,2.64,0.48,5.2-0.4,8,0.8s6,0.4,7.2-1.6,6-6.2,6-6.2-12.8,1.8-15.6,2.6c0,0-22.4,1.2-30.4-1.2z"/>
</g>
<g id="g242" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path244" d="m-22.4,173.8s-6.45,3.5-6.85,5.9,5.25,6.1,5.25,6.1,2.75,4.6,3.35,2.2-0.95-13.8-1.75-14.2z"/>
</g>
<g id="g246" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path248" d="m-59.885,179.26s7.007,11.19,7.224-0.02c0,0,0.557-1.26-1.203-1.28-6.075-0.07-4.554-4.18-6.021,1.3z"/>
</g>
<g id="g250" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path252" d="m-52.707,179.51s7.921,11.19,7.285-0.09c0,0,0.007-0.33-1.746-0.48-4.747-0.42-4.402-4.94-5.539,0.57z"/>
</g>
<g id="g254" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path256" d="m-45.494,179.52s7.96,10.63,7.291,0.96c0,0,0.119-1.23-1.535-1.53-3.892-0.71-4.103-3.95-5.756,0.57z"/>
</g>
<g id="g258" stroke-width="0.5" stroke="#000" fill="#FFC">
<path id="path260" d="m-38.618,179.6s7.9,11.56,8.248,1.78c0,0,1.644-1.38-0.102-1.6-5.818-0.74-5.02-5.19-8.146-0.18z"/>
</g>
<g id="g262" fill="#e5e5b2">
<path id="path264" d="m-74.792,183.13-7.658-1.53c-2.6-5-4.7-11.15-4.7-11.15s6.35,1,18.85,3.8c0,0,0.876,3.32,2.348,9.11l-8.84-0.23z"/>
</g>
<g id="g266" fill="#e5e5b2">
<path id="path268" d="m-9.724,178.47c-1.666-2.51-2.983-4.26-3.633-4.67-3.013-1.88,1.13-1.51,2.259-1.51l18.454,0.76s0.524,2.24,1.208,5.63c0,0-10.088-2.01-18.288-0.21z"/>
</g>
<g id="g270" fill="#cc7226">
<path id="path272" d="m43.88,40.321c27.721,3.96,53.241-31.68,55.001-41.361,1.759-9.68-8.36-21.56-8.36-21.56,1.32-3.08-3.52-17.16-8.8-26.4s-21.181-8.266-38.721-9.24c-15.84-0.88-34.32,22.44-35.64,24.2s4.84,40.041,6.16,45.761-1.32,32.12-1.32,32.12c34.24-9.1,3.96-7.48,31.68-3.52z"/>
</g>
<g id="g274" fill="#ea8e51">
<path id="path276" d="m8.088-33.392c-1.296,1.728,4.752,39.313,6.048,44.929s-1.296,31.536-1.296,31.536c32.672-8.88,3.888-7.344,31.104-3.456,27.217,3.888,52.273-31.104,54.001-40.609,1.728-9.504-8.208-21.168-8.208-21.168,1.296-3.024-3.456-16.848-8.64-25.92s-20.795-8.115-38.017-9.072c-15.552-0.864-33.696,22.032-34.992,23.76z"/>
</g>
<g id="g278" fill="#efaa7c">
<path id="path280" d="m8.816-32.744c-1.272,1.696,4.664,38.585,5.936,44.097s-1.272,30.952-1.272,30.952c31.404-9.16,3.816-7.208,30.528-3.392,26.713,3.816,51.305-30.528,53.001-39.857,1.696-9.328-8.056-20.776-8.056-20.776,1.272-2.968-3.392-16.536-8.48-25.44s-20.41-7.965-37.313-8.904c-15.264-0.848-33.072,21.624-34.344,23.32z"/>
</g>
<g id="g282" fill="#f4c6a8">
<path id="path284" d="m9.544-32.096c-1.248,1.664,4.576,37.857,5.824,43.265s-1.248,30.368-1.248,30.368c29.436-9.04,3.744-7.072,29.952-3.328,26.209,3.744,50.337-29.952,52.001-39.104,1.664-9.153-7.904-20.385-7.904-20.385,1.248-2.912-3.328-16.224-8.32-24.96s-20.025-7.815-36.609-8.736c-14.976-0.832-32.448,21.216-33.696,22.88z"/>
</g>
<g id="g286" fill="#f9e2d3">
<path id="path288" d="m10.272-31.448c-1.224,1.632,4.488,37.129,5.712,42.433s-1.224,29.784-1.224,29.784c27.868-8.92,3.672-6.936,29.376-3.264,25.705,3.672,49.369-29.376,51.001-38.353,1.632-8.976-7.752-19.992-7.752-19.992,1.224-2.856-3.264-15.912-8.16-24.48s-19.64-7.665-35.905-8.568c-14.688-0.816-31.824,20.808-33.048,22.44z"/>
</g>
<g id="g290" fill="#FFF">
<path id="path292" d="M44.2,36.8c25.2,3.6,48.401-28.8,50.001-37.6s-7.6-19.6-7.6-19.6c1.2-2.8-3.201-15.6-8.001-24s-19.254-7.514-35.2-8.4c-14.4-0.8-31.2,20.4-32.4,22s4.4,36.4,5.6,41.6-1.2,29.2-1.2,29.2c25.5-8.6,3.6-6.8,28.8-3.2z"/>
</g>
<g id="g294" fill="#CCC">
<path id="path296" d="m90.601,2.8s-27.801,7.6-39.401,6c0,0-15.8-6.6-24.6,15.2,0,0-3.6,7.2-5.6,9.2s69.601-30.4,69.601-30.4z"/>
</g>
<g id="g298" fill="#000">
<path id="path300" d="m94.401,0.6s-29.001,12.2-39.001,11.8c0,0-16.4-4.6-24.8,10,0,0-8.4,9.2-11.6,10.8,0,0-0.4,1.6,6-2.4l10.4,5.2s14.8,9.6,24.4-6.4c0,0,4-11.2,4-13.2s21.2-7.6,22.801-8c1.6-0.4,8.2-4.6,7.8-7.8z"/>
</g>
<g id="g302" fill="#99cc32">
<path id="path304" d="m47,36.514c-6.872,0-15.245-3.865-15.245-10.114,0-6.248,8.373-12.513,15.245-12.513,6.874,0,12.446,5.065,12.446,11.313,0,6.249-5.572,11.314-12.446,11.314z"/>
</g>
<g id="g306" fill="#659900">
<path id="path308" d="m43.377,19.83c-4.846,0.722-9.935,2.225-9.863,2.009,1.54-4.619,7.901-7.952,13.486-7.952,4.296,0,8.084,1.978,10.32,4.988,0,0-5.316-0.33-13.943,0.955z"/>
</g>
<g id="g310" fill="#FFF">
<path id="path312" d="m55.4,19.6s-4.4-3.2-4.4-1c0,0,3.6,4.4,4.4,1z"/>
</g>
<g id="g314" fill="#000">
<path id="path316" d="m45.4,27.726c-2.499,0-4.525-2.026-4.525-4.526,0-2.499,2.026-4.525,4.525-4.525,2.5,0,4.526,2.026,4.526,4.525,0,2.5-2.026,4.526-4.526,4.526z"/>
</g>
<g id="g318" fill="#cc7226">
<path id="path320" d="m-58.6,14.4s-3.2-21.2-0.8-25.6c0,0,10.8-10,10.4-13.6,0,0-0.4-18-1.6-18.8s-8.8-6.8-14.8-0.4c0,0-10.4,18-9.6,24.4v2s-7.6-0.4-9.2,1.6c0,0-1.2,5.2-2.4,5.6,0,0-2.8,2.4-0.8,5.2,0,0-2,2.4-1.6,6.4l7.6,4s2,14.4,12.8,19.6c4.836,2.329,8-4.4,10-10.4z"/>
</g>
<g id="g322" fill="#FFF">
<path id="path324" d="m-59.6,12.56s-2.88-19.08-0.72-23.04c0,0,9.72-9,9.36-12.24,0,0-0.36-16.2-1.44-16.92s-7.92-6.12-13.32-0.36c0,0-9.36,16.2-8.64,21.96v1.8s-6.84-0.36-8.28,1.44c0,0-1.08,4.68-2.16,5.04,0,0-2.52,2.16-0.72,4.68,0,0-1.8,2.16-1.44,5.76l6.84,3.6s1.8,12.96,11.52,17.64c4.352,2.095,7.2-3.96,9-9.36z"/>
</g>
<g id="g326" fill="#eb955c">
<path id="path328" d="m-51.05-42.61c-1.09-0.86-8.58-6.63-14.43-0.39,0,0-10.14,17.55-9.36,23.79v1.95s-7.41-0.39-8.97,1.56c0,0-1.17,5.07-2.34,5.46,0,0-2.73,2.34-0.78,5.07,0,0-1.95,2.34-1.56,6.24l7.41,3.9s1.95,14.04,12.48,19.11c4.714,2.27,7.8-4.29,9.75-10.14,0,0-3.12-20.67-0.78-24.96,0,0,10.53-9.75,10.14-13.26,0,0-0.39-17.55-1.56-18.33z"/>
</g>
<g id="g330" fill="#f2b892">
<path id="path332" d="m-51.5-41.62c-0.98-0.92-8.36-6.46-14.06-0.38,0,0-9.88,17.1-9.12,23.18v1.9s-7.22-0.38-8.74,1.52c0,0-1.14,4.94-2.28,5.32,0,0-2.66,2.28-0.76,4.94,0,0-1.9,2.28-1.52,6.08l7.22,3.8s1.9,13.68,12.16,18.62c4.594,2.212,7.6-4.18,9.5-9.88,0,0-3.04-20.14-0.76-24.32,0,0,10.26-9.5,9.88-12.92,0,0-0.38-17.1-1.52-17.86z"/>
</g>
<g id="g334" fill="#f8dcc8">
<path id="path336" d="m-51.95-40.63c-0.87-0.98-8.14-6.29-13.69-0.37,0,0-9.62,16.65-8.88,22.57v1.85s-7.03-0.37-8.51,1.48c0,0-1.11,4.81-2.22,5.18,0,0-2.59,2.22-0.74,4.81,0,0-1.85,2.22-1.48,5.92l7.03,3.7s1.85,13.32,11.84,18.13c4.473,2.154,7.4-4.07,9.25-9.62,0,0-2.96-19.61-0.74-23.68,0,0,9.99-9.25,9.62-12.58,0,0-0.37-16.65-1.48-17.39z"/>
</g>
<g id="g338" fill="#FFF">
<path id="path340" d="m-59.6,12.46s-2.88-18.98-0.72-22.94c0,0,9.72-9,9.36-12.24,0,0-0.36-16.2-1.44-16.92-0.76-1.04-7.92-6.12-13.32-0.36,0,0-9.36,16.2-8.64,21.96v1.8s-6.84-0.36-8.28,1.44c0,0-1.08,4.68-2.16,5.04,0,0-2.52,2.16-0.72,4.68,0,0-1.8,2.16-1.44,5.76l6.84,3.6s1.8,12.96,11.52,17.64c4.352,2.095,7.2-4.06,9-9.46z"/>
</g>
<g id="g342" fill="#CCC">
<path id="path344" d="m-62.7,6.2s-21.6-10.2-22.5-11c0,0,9.1,8.2,9.9,8.2s12.6,2.8,12.6,2.8z"/>
</g>
<g id="g346" fill="#000">
<path id="path348" d="m-79.8,0s18.4,3.6,18.4,8c0,2.912-0.243,16.331-5.6,14.8-8.4-2.4-4.8-16.8-12.8-22.8z"/>
</g>
<g id="g350" fill="#99cc32">
<path id="path352" d="m-71.4,3.8s8.978,1.474,10,4.2c0.6,1.6,1.263,9.908-4.2,11-4.552,0.911-6.782-9.31-5.8-15.2z"/>
</g>
<g id="g354" fill="#000">
<path id="path356" d="m14.595,46.349c-0.497-1.742,0.814-1.611,2.605-2.149,2-0.6,14.2-4.4,15-7s14,1.8,14,1.8c1.8,0.8,6.2,3.4,6.2,3.4,4.8,1.2,11.4,1.6,11.4,1.6,2.4,1,5.8,3.8,5.8,3.8,14.6,10.2,27.001,3,27.001,3,19.999-6.6,13.999-23.8,13.999-23.8-3-9,0.2-12.4,0.2-12.4,0.2-3.8,7.4,2.6,7.4,2.6,2.6,4.2,3.4,9.2,3.4,9.2,8,11.2,4.6-6.6,4.6-6.6,0.2-1-2.6-4.6-2.6-5.8s-1.8-4.6-1.8-4.6c-3-3.4-0.6-10.4-0.6-10.4,1.8-13.8-0.4-12-0.4-12-1.2-1.8-10.4,8.2-10.4,8.2-2.2,3.4-8.2,5-8.2,5-2.799,1.8-6.199,0.4-6.199,0.4-2.6-0.4-8.2,6.6-8.2,6.6,2.8-0.2,5.2,4.2,7.6,4.4s4.2-2.4,5.799-3c1.6-0.6,4.4,5.2,4.4,5.2,0.4,2.6-5.2,7.4-5.2,7.4-0.4,4.6-1.999,3-1.999,3-3-0.6-4.2,3.2-5.2,7.8s-5.2,5-5.2,5c-1.6,7.4-2.801,4.4-2.801,4.4-0.2-5.6-6.2,0.2-6.2,0.2-1.2,2-5.8-0.2-5.8-0.2-6.8-2-4.4-4-4.4-4,1.8-2.2,13,0,13,0,2.2-1.6-5.8-5.6-5.8-5.6-0.6-1.8,0.4-6.2,0.4-6.2,1.2-3.2,8-8.8,8-8.8,9.401-1.2,6.601-2.8,6.601-2.8-6.2-5.2-12.001,2.4-12.001,2.4-2.2,6.2-19.6,21.2-19.6,21.2-4.8,3.4-2.2-3.4-6.2,0s-24.6-5.6-24.6-5.6c-11.562-1.193-14.294,14.549-17.823,11.429,0,0,5.418,8.52,3.818,2.92z"/>
</g>
<g id="g358" fill="#000">
<path id="path360" d="m209.4-120s-25.6,8-28.4,26.8c0,0-2.4,22.8,18,40.4,0,0,0.4,6.4,2.4,9.6,0,0-1.6,4.8,17.2-2.8l27.2-8.4s6.4-2.4,11.6-11.2,20.4-27.6,16.8-52.8c0,0,1.2-11.2-4.8-11.6,0,0-8.4-1.6-15.6,6,0,0-6.8,3.2-9.2,2.8l-35.2,1.2z"/>
</g>
<g id="g362" fill="#000">
<path id="path364" d="m264.02-120.99s2.1-8.93-2.74-4.09c0,0-7.04,5.72-14.52,5.72,0,0-14.52,2.2-18.92,15.4,0,0-3.96,26.84,3.96,32.56,0,0,4.84,7.48,11.88,0.88s22.54-36.83,20.34-50.47z"/>
</g>
<g id="g366" fill="#323232">
<path id="path368" d="m263.65-120.63s2.09-8.75-2.66-3.99c0,0-6.92,5.61-14.26,5.61,0,0-14.26,2.16-18.58,15.12,0,0-3.89,26.354,3.89,31.97,0,0,4.75,7.344,11.66,0.864,6.92-6.48,22.11-36.184,19.95-49.574z"/>
</g>
<g id="g370" fill="#666">
<path id="path372" d="m263.27-120.27s2.08-8.56-2.58-3.9c0,0-6.78,5.51-13.99,5.51,0,0-14,2.12-18.24,14.84,0,0-3.81,25.868,3.82,31.38,0,0,4.66,7.208,11.45,0.848,6.78-6.36,21.66-35.538,19.54-48.678z"/>
</g>
<g id="g374" fill="#999">
<path id="path376" d="m262.9-119.92s2.07-8.37-2.51-3.79c0,0-6.65,5.41-13.73,5.41,0,0-13.72,2.08-17.88,14.56,0,0-3.75,25.372,3.74,30.78,0,0,4.58,7.072,11.23,0.832,6.66-6.24,21.23-34.892,19.15-47.792z"/>
</g>
<g id="g378" fill="#CCC">
<path id="path380" d="m262.53-119.56s2.06-8.18-2.43-3.7c0,0-6.53,5.31-13.47,5.31,0,0-13.46,2.04-17.54,14.28,0,0-3.67,24.886,3.67,30.19,0,0,4.49,6.936,11.02,0.816,6.52-6.12,20.79-34.246,18.75-46.896z"/>
</g>
<g id="g382" fill="#FFF">
<path id="path384" d="m262.15-119.2s2.05-8-2.35-3.6c0,0-6.4,5.2-13.2,5.2,0,0-13.2,2-17.2,14,0,0-3.6,24.4,3.6,29.6,0,0,4.4,6.8,10.8,0.8s20.35-33.6,18.35-46z"/>
</g>
<g id="g386" fill="#992600">
<path id="path388" d="m50.6,84s-20.4-19.2-28.4-20c0,0-34.4-4-49.2,14,0,0,17.6-20.4,45.2-14.8,0,0-21.6-4.4-34-1.2l-26.4,14-2.8,4.8s4-14.8,22.4-20.8c0,0,22.8-4.8,33.6,0,0,0-21.6-6.8-31.6-4.8,0,0-30.4-2.4-43.2,24,0,0,4-14.4,18.8-21.6,0,0,13.6-8.8,34-6,0,0,14.4,3.2,19.6,5.6s4-0.4-4.4-5.2c0,0-5.6-10-19.6-9.6,0,0-42.8,3.6-53.2,15.6,0,0,13.6-11.2,24-14,0,0,22.4-8,30.8-7.2,0,0,24.8,1,32.4-3,0,0-11.2,5-8,8.2s10,10.8,10,12,24.2,23.3,27.8,27.7l2.2,2.3z"/>
</g>
<g id="g390" fill="#CCC">
<path id="path392" d="m189,278s-15.5-36.5-28-46c0,0,26,16,29.5,34,0,0,0,10-1.5,12z"/>
</g>
<g id="g394" fill="#CCC">
<path id="path396" d="m236,285.5s-26.5-55-45-79c0,0,43.5,37.5,48.5,64l0.5,5.5-3-2.5s-0.5,9-1,12z"/>
</g>
<g id="g398" fill="#CCC">
<path id="path400" d="m292.5,237s-62.5-59.5-64-62c0,0,60.5,66,63.5,73.5,0,0-2-9,0.5-11.5z"/>
</g>
<g id="g402" fill="#CCC">
<path id="path404" d="m104,280.5s19.5-52,38.5-29.5c0,0,15,10,14.5,13,0,0-4-6.5-22-6,0,0-19-3-31,22.5z"/>
</g>
<g id="g406" fill="#CCC">
<path id="path408" d="m294.5,153s-45-28.5-52.5-30c-11.81-2.36,49.5,29,54.5,39.5,0,0,2-2.5-2-9.5z"/>
</g>
<g id="g410" fill="#000">
<path id="path412" d="m143.8,259.6s20.4-2,27.2-8.8l4.4,3.6,17.6-38.4,3.6,5.2s14.4-14.8,13.6-22.8,12.8,6,12.8,6-0.8-11.6,6.4-4.8c0,0-2.4-15.6,6-7.6,0,0-10.54-30.16,12-4.4,5.6,6.4,1.2-0.4,1.2-0.4s-26-48-4.4-33.6c0,0,2-22.8,0.8-27.2s-3.2-26.8-8-32,0.4-6.8,6-1.6c0,0-11.2-24,2-12,0,0-3.6-15.2-8-18,0,0-5.6-17.2,9.6-6.4,0,0-4.4-12.4-7.6-15.6,0,0-11.6-27.6-4.4-22.8l4.4,3.6s-6.8-14-0.4-9.6,6.4,4,6.4,4-21.2-33.2-0.8-15.6c0,0-8.16-13.918-11.6-20.8,0,0-18.8-20.4-4.4-14l4.8,1.6s-8.8-10-16.8-11.6,2.4-8,8.8-6,22,9.6,22,9.6,12.8,18.8,16.8,19.2c0,0-20-7.6-14,0.4,0,0,14.4,14,7.2,13.6,0,0-6,7.2-1.2,16,0,0-18.46-18.391-3.6,7.2l6.8,16.4s-24.4-24.8-13.2-2.8c0,0,17.2,23.6,19.2,24s6.4,9.2,6.4,9.2l-4.4-2,5.2,8.8s-11.2-12-5.2,1.2l5.6,14.4s-20.4-22-6.8,7.6c0,0-16.4-5.2-7.6,12,0,0-1.6,16-1.2,21.2s1.6,33.6-2.8,41.6,6,27.2,8,31.2,5.6,14.8-3.2,5.6-4.4-3.6-2.4,5.2,8,24.4,7.2,30c0,0-1.2,1.2-4.4-2.4,0,0-14.8-22.8-13.2-8.4,0,0-1.2,8-4.4,16.8,0,0-3.2,10.8-3.2,2,0,0-3.2-16.8-6-9.2s-6.4,13.6-9.2,16-8-20.4-9.2-10c0,0-12-12.4-16.8,4l-11.6,16.4s-0.4-12.4-1.6-6.4c0,0-30,6-40.4,1.6z"/>
</g>
<g id="g414" fill="#000">
<path id="path416" d="m109.4-97.2s-11.599-8-15.599-7.6,27.599-8.8,68.799,18.8c0,0,4.8,2.8,8.4,2.4,0,0,3.2,2.4,0.4,6,0,0-8.8,9.6,2.4,20.8,0,0,18.4,6.8,12.8-2,0,0,10.8,4,13.2,8s1.2,0,1.2,0l-12.4-12.4s-5.2-2-8-10.4-5.2-18.4-0.8-21.6c0,0-4,4.4-3.2,0.4s4.4-7.6,6-8,18-16.2,24.8-16.6c0,0-9.2,1.4-12.2,0.4s-29.6-12.4-35.6-13.6c0,0-16.8-6.6-4.8-4.6,0,0,35.8,3.8,54,17,0,0-7.2-8.4-25.6-15.4,0,0-22.2-12.6-57.4-7.6,0,0-17.8,3.2-25.6,5,0,0-2.599-0.6-3.199-1s-12.401-9.4-40.001-2.4c0,0-17,4.6-25.6,9.4,0,0-15.2,1.2-18.8,4.4,0,0-18.6,14.6-20.6,15.4s-13.4,8.4-14.2,8.8c0,0,24.6-6.6,27-9s19.8-5,22.2-3.6,10.8,0.8,1.2,1.4c0,0,75.6,14.8,76.4,16.8s4.8,0.8,4.8,0.8z"/>
</g>
<g id="g418" fill="#cc7226">
<path id="path420" d="m180.8-106.4s-10.2-7.4-12.2-7.4-14.4-10.2-18.6-9.8-16.4-9.6-43.8-1.4c0,0-0.6-2,3-2.8,0,0,6.4-2.2,6.8-2.8,0,0,20.2-4.2,27.4-0.6,0,0,9.2,2.6,15.4,8.8,0,0,11.2,3.2,14.4,2.2,0,0,8.8,2.2,9.2,4,0,0,5.8,3,4,5.6,0,0,0.4,1.6-5.6,4.2z"/>
</g>
<g id="g422" fill="#cc7226">
<path id="path424" d="m168.33-108.51c0.81,0.63,1.83,0.73,2.43,1.54,0.24,0.31-0.05,0.64-0.37,0.74-1.04,0.31-2.1-0.26-3.24,0.33-0.4,0.21-1.04,0.03-1.6-0.12-1.63-0.44-3.46-0.47-5.15,0.22-1.98-1.13-4.34-0.54-6.42-1.55-0.06-0.02-0.28,0.32-0.36,0.3-3.04-1.15-6.79-0.87-9.22-3.15-2.43-0.41-4.78-0.87-7.21-1.55-1.82-0.51-3.23-1.5-4.85-2.33-1.38-0.71-2.83-1.23-4.37-1.61-1.86-0.45-3.69-0.34-5.58-0.86-0.1-0.02-0.29,0.32-0.37,0.3-0.32-0.11-0.62-0.69-0.79-0.64-1.68,0.52-3.17-0.45-4.83-0.11-1.18-1.22-2.9-0.98-4.45-1.42-2.97-0.85-6.12,0.42-9.15-0.58,4.11-1.84,8.8-0.61,12.86-2.68,2.33-1.18,4.99-0.08,7.56-0.84,0.49-0.15,1.18-0.35,1.58,0.32,0.14-0.14,0.32-0.37,0.38-0.35,2.44,1.16,4.76,2.43,7.24,3.5,0.34,0.15,0.88-0.09,1.13,0.12,1.52,1.21,3.46,1.11,4.85,2.33,1.7-0.5,3.49-0.12,5.22-0.75,0.08-0.02,0.31,0.32,0.34,0.3,1.14-0.75,2.29-0.48,3.18-0.18,0.34,0.12,1,0.37,1.31,0.44,1.12,0.27,1.98,0.75,3.16,0.94,0.11,0.02,0.3-0.32,0.37-0.3,1.12,0.44,2.16,0.39,2.82,1.55,0.14-0.14,0.3-0.37,0.38-0.35,1.03,0.34,1.68,1.1,2.78,1.34,0.48,0.1,1.1,0.73,1.67,0.91,2.39,0.73,4.24,2.26,6.43,3.15,0.76,0.31,1.64,0.55,2.27,1.04z"/>
</g>
<g id="g426" fill="#cc7226">
<path id="path428" d="m91.696-122.74c-2.518-1.72-4.886-2.83-7.328-4.62-0.181-0.13-0.541,0.04-0.743-0.08-1.007-0.61-1.895-1.19-2.877-1.89-0.539-0.38-1.36-0.37-1.868-0.63-2.544-1.29-5.173-1.85-7.68-3.04,0.682-0.64,1.804-0.39,2.4-1.2,0.195,0.28,0.433,0.56,0.786,0.37,1.678-0.9,3.528-1.05,5.204-0.96,1.704,0.09,3.424,0.39,5.199,0.67,0.307,0.04,0.506,0.56,0.829,0.66,2.228,0.66,4.617,0.14,6.736,0.98,1.591,0.63,3.161,1.45,4.4,2.72,0.252,0.26-0.073,0.57-0.353,0.76,0.388-0.11,0.661,0.1,0.772,0.41,0.084,0.24,0.084,0.54,0,0.78-0.112,0.31-0.391,0.41-0.765,0.46-1.407,0.19,0.365-1.19-0.335-0.74-1.273,0.82-0.527,2.22-1.272,3.49-0.28-0.19-0.51-0.41-0.4-0.8,0.234,0.52-0.368,0.81-0.536,1.13-0.385,0.72-1.284,2.14-2.169,1.53z"/>
</g>
<g id="g430" fill="#cc7226">
<path id="path432" d="m59.198-115.39c-3.154-0.79-6.204-0.68-9.22-1.96-0.067-0.02-0.29,0.32-0.354,0.3-1.366-0.6-2.284-1.56-3.36-2.61-0.913-0.89-2.571-0.5-3.845-0.99-0.324-0.12-0.527-0.63-0.828-0.67-1.219-0.16-2.146-1.11-3.191-1.68,2.336-0.8,4.747-0.76,7.209-1.15,0.113-0.02,0.258,0.31,0.391,0.31,0.136,0,0.266-0.23,0.4-0.36,0.195,0.28,0.497,0.61,0.754,0.35,0.548-0.54,1.104-0.35,1.644-0.31,0.144,0.01,0.269,0.32,0.402,0.32,0.136,0,0.267-0.32,0.4-0.32,0.136,0,0.267,0.32,0.4,0.32,0.136,0,0.266-0.23,0.4-0.36,0.692,0.78,1.577,0.23,2.399,0.41,1.038,0.22,1.305,1.37,2.379,1.67,4.715,1.3,8.852,3.45,13.215,5.54,0.307,0.14,0.517,0.39,0.407,0.78,0.267,0,0.58-0.09,0.77,0.04,1.058,0.74,2.099,1.28,2.796,2.38,0.216,0.34-0.113,0.75-0.346,0.7-4.429-1-8.435-1.61-12.822-2.71z"/>
</g>
<g id="g434" fill="#cc7226">
<path id="path436" d="m45.338-71.179c-1.592-1.219-2.176-3.25-3.304-5.042-0.214-0.34,0.06-0.654,0.377-0.743,0.56-0.159,1.103,0.319,1.512,0.521,1.745,0.862,3.28,2.104,5.277,2.243,1.99,2.234,6.25,2.619,6.257,6,0.001,0.859-1.427-0.059-1.857,0.8-2.451-1.003-4.84-0.9-7.22-2.367-0.617-0.381-0.287-0.834-1.042-1.412z"/>
</g>
<g id="g438" fill="#cc7226">
<path id="path440" d="m17.8-123.76c0.135,0,7.166,0.24,7.149,0.35-0.045,0.31-7.775,1.36-8.139,1.19-0.164-0.08-7.676,2.35-7.81,2.22,0.268-0.14,8.534-3.76,8.8-3.76z"/>
</g>
<g id="g442" fill="#000">
<path id="path444" d="m33.2-114s-14.8,1.8-19.2,3-23,8.8-26,10.8c0,0-13.4,5.4-30.4,25.4,0,0,7.6-3.4,9.8-6.2,0,0,13.6-12.6,13.4-10,0,0,12.2-8.6,11.6-6.4,0,0,24.4-11.2,22.4-8,0,0,21.6-4.6,20.6-2.6,0,0,18.8,4.4,16,4.6,0,0-5.8,1.2,0.6,4.8,0,0-3.4,4.4-8.8,0.4s-2.4-1.8-7.4-0.8c0,0-2.6,0.8-7.2-3.2,0,0-5.6-4.6-14.4-1,0,0-30.6,12.6-32.6,13.2,0,0-3.6,2.8-6,6.4,0,0-5.8,4.4-8.8,5.8,0,0-12.8,11.6-14,13,0,0-3.4,5.2-4.2,5.6,0,0,6.4-3.8,8.4-5.8,0,0,14-10,19.4-10.8,0,0,4.4-3,5.2-4.4,0,0,14.4-9.2,18.6-9.2,0,0,9.2,5.2,11.6-1.8,0,0,5.8-1.8,11.4-0.6,0,0,3.2-2.6,2.4-4.8,0,0,1.6-1.8,2.6,2,0,0,3.4,3.6,8.2,1.6,0,0,4-0.2,2,2.2,0,0-4.4,3.8-16.2,4,0,0-12.4,0.6-28.8,8.2,0,0-29.8,10.4-39,20.8,0,0-6.4,8.8-11.8,10,0,0-5.8,0.8-11.8,8.2,0,0,9.8-5.8,18.8-5.8,0,0,4-2.4,0.2,1.2,0,0-3.6,7.6-2,13,0,0-0.6,5.2-1.4,6.8,0,0-7.8,12.8-7.8,15.2s1.2,12.2,1.6,12.8-1-1.6,2.8,0.8,6.6,4,7.4,6.8-2-5.4-2.2-7.2-4.4-9-3.6-11.4c0,0,1,1,1.8,2.4,0,0-0.6-0.6,0-4.2,0,0,0.8-5.2,2.2-8.4s3.4-7,3.8-7.8,0.4-6.6,1.8-4l3.4,2.6s-2.8-2.6-0.6-4.8c0,0-1-5.6,0.8-8.2,0,0,7-8.4,8.6-9.4s0.2-0.6,0.2-0.6,6-4.2,0.2-2.6c0,0-4,1.6-7,1.6,0,0-7.6,2-3.6-2.2s14-9.6,17.8-9.4l0.8,1.6,11.2-2.4-1.2,0.8s-0.2-0.2,4-0.6,10,1,11.4-0.8,4.8-2.8,4.4-1.4-0.6,3.4-0.6,3.4,5-5.8,4.4-3.6-8.8,7.4-10.2,13.6l10.4-8.2,3.6-3s3.6,2.2,3.8,0.6,4.8-7.4,6-7.2,3.2-2.6,3,0,7.4,8,7.4,8,3.2-1.8,4.6-0.4,5.6-19.8,5.6-19.8l25-10.6,43.6-3.4-16.999-6.8-61.001-11.4z"/>
</g>
<g id="g446" stroke-width="2" stroke="#4c0000">
<path id="path448" d="m51.4,85s-15-16.8-23.4-19.4c0,0-13.4-6.8-38,1"/>
</g>
<g id="g450" stroke-width="2" stroke="#4c0000">
<path id="path452" d="m24.8,64.2s-25.2-8-40.6-3.8c0,0-18.4,2-26.8,15.8"/>
</g>
<g id="g454" stroke-width="2" stroke="#4c0000">
<path id="path456" d="m21.2,63s-17-7.2-31.8-9.4c0,0-16.6-2.6-33.2,4.6,0,0-12.2,6-17.6,16.2"/>
</g>
<g id="g458" stroke-width="2" stroke="#4c0000">
<path id="path460" d="m22.2,63.4s-15.4-11-16.4-12.4c0,0-7-11-20-11.4,0,0-21.4,0.8-38.6,8.8"/>
</g>
<g id="g462" fill="#000">
<path id="path464" d="M20.895,54.407c1.542,1.463,28.505,30.393,28.505,30.393,35.2,36.6,7.2,2.4,7.2,2.4-7.6-4.8-16.8-23.6-16.8-23.6-1.2-2.8,14,7.2,14,7.2,4,0.8,17.6,20,17.6,20-6.8-2.4-2,4.8-2,4.8,2.8,2,23.201,17.6,23.201,17.6,3.6,4,7.599,5.6,7.599,5.6,14-5.2,7.6,8,7.6,8,2.4,6.8,8-4.8,8-4.8,11.2-16.8-5.2-14.4-5.2-14.4-30,2.8-36.8-13.2-36.8-13.2-2.4-2.4,6.4,0,6.4,0,8.401,2-7.2-12.4-7.2-12.4,2.4,0,11.6,6.8,11.6,6.8,10.401,9.2,12.401,7.2,12.401,7.2,17.999-8.8,28.399-1.2,28.399-1.2,2,1.6-3.6,8.4-2,13.6s6.4,17.6,6.4,17.6c-2.4,1.6-2,12.4-2,12.4,16.8,23.2,7.2,21.2,7.2,21.2-15.6-0.4-0.8,7.2-0.8,7.2,3.2,2,12,9.2,12,9.2-2.8-1.2-4.4,4-4.4,4,4.8,4,2,8.8,2,8.8-6,1.2-7.2,5.2-7.2,5.2,6.8,8-3.2,8.4-3.2,8.4,3.6,4.4-1.2,16.4-1.2,16.4-4.8,0-11.2,5.6-11.2,5.6,2.4,4.8-8,10.4-8,10.4-8.4,1.6-5.6,8.4-5.6,8.4-7.999,6-10.399,22-10.399,22-0.8,10.4-3.2,13.6,2,11.6,5.199-2,4.399-14.4,4.399-14.4-4.799-15.6,38-31.6,38-31.6,4-1.6,4.8-6.8,4.8-6.8,2,0.4,10.8,8,10.8,8,7.6,11.2,8,2,8,2,1.2-3.6-0.4-9.6-0.4-9.6,6-21.6-8-28-8-28-10-33.6,4-25.2,4-25.2,2.8,5.6,13.6,10.8,13.6,10.8l3.6-2.4c-1.6-4.8,6.8-10.8,6.8-10.8,2.8,6.4,8.8-1.6,8.8-1.6,3.6-24.4,16-10,16-10,4,1.2,5.2-5.6,5.2-5.6,3.6-10.4,0-24,0-24,3.6-0.4,13.2,5.6,13.2,5.6,2.8-3.6-6.4-20.4-2.4-18s8.4,4,8.4,4c0.8-2-9.2-14.4-9.2-14.4-4.4-2.8-9.6-23.2-9.6-23.2,7.2,3.6-2.8-11.6-2.8-11.6,0-3.2,6-14.4,6-14.4-0.8-6.8,0-6.4,0-6.4,2.8,1.2,10.8,2.8,4-3.6s0.8-11.2,0.8-11.2c4.4-2.8-9.2-2.4-9.2-2.4-5.2-4.4-4.8-8.4-4.8-8.4,8,2-6.4-12.4-8.8-16s7.2-8.8,7.2-8.8c13.2-3.6,1.6-6.8,1.6-6.8-19.6,0.4-8.8-10.4-8.8-10.4,6,0.4,4.4-2,4.4-2-5.2-1.2-14.8-7.6-14.8-7.6-4-3.6-0.4-2.8-0.4-2.8,16.8,1.2-12-10-12-10,8,0-10-10.4-10-10.4-2-1.6-5.2-9.2-5.2-9.2-6-5.2-10.8-12-10.8-12-0.4-4.4-5.2-9.2-5.2-9.2-11.6-13.6-17.2-13.2-17.2-13.2-14.8-3.6-20-2.8-20-2.8l-52.8,4.4c-26.4,12.8-18.6,33.8-18.6,33.8,6.4,8.4,15.6,4.6,15.6,4.6,4.6-6.2,16.2-4,16.2-4,20.401,3.2,17.801-0.4,17.801-0.4-2.4-4.6-18.601-10.8-18.801-11.4s-9-4-9-4c-3-1.2-7.4-10.4-7.4-10.4-3.2-3.4,12.6,2.4,12.6,2.4-1.2,1,6.2,5,6.2,5,17.401-1,28.001,9.8,28.001,9.8,10.799,16.6,10.999,8.4,10.999,8.4,2.8-9.4-9-30.6-9-30.6,0.4-2,8.6,4.6,8.6,4.6,1.4-2,2.2,3.8,2.2,3.8,0.2,2.4,4,10.4,4,10.4,2.8,13,6.4,5.6,6.4,5.6l4.6,9.4c1.4,2.6-4.6,10.2-4.6,10.2-0.2,2.8,0.6,2.6-5,10.2s-2.2,12-2.2,12c-1.4,6.6,7.4,6.2,7.4,6.2,2.6,2.2,6,2.2,6,2.2,1.8,2,4.2,1.4,4.2,1.4,1.6-3.8,7.8-1.8,7.8-1.8,1.4-2.4,9.6-2.8,9.6-2.8,1-2.6,1.4-4.2,4.8-4.8s-21.2-43.6-21.2-43.6c6.4-0.8-1.8-13.2-1.8-13.2-2.2-6.6,9.2,8,11.4,9.4s3.2,3.6,1.6,3.4-3.4,2-2,2.2,14.4,15.2,17.8,25.4,9.4,14.2,15.6,20.2,5.4,30.2,5.4,30.2c-0.4,8.8,5.6,19.4,5.6,19.4,2,3.8-2.2,22-2.2,22-2,2.2-0.6,3-0.6,3,1,1.2,7.8,14.4,7.8,14.4-1.8-0.2,1.8,3.4,1.8,3.4,5.2,6-1.2,3-1.2,3-6-1.6,1,8.2,1,8.2,1.2,1.8-7.8-2.8-7.8-2.8-9.2-0.6,2.4,6.6,2.4,6.6,8.6,7.2-2.8,2.8-2.8,2.8-4.6-1.8-1.4,5-1.4,5,3.2,1.6,20.4,8.6,20.4,8.6,0.4,3.8-2.6,8.8-2.6,8.8,0.4,4-1.8,7.4-1.8,7.4-1.2,8.2-1.8,9-1.8,9-4.2,0.2-11.6,14-11.6,14-1.8,2.6-12,14.6-12,14.6-2,7-20-0.2-20-0.2-6.6,3.4-4.6,0-4.6,0-0.4-2.2,4.4-8.2,4.4-8.2,7-2.6,4.4-13.4,4.4-13.4,4-1.4-7.2-4.2-7-5.4s6-2.6,6-2.6c8-2,3.6-4.4,3.6-4.4-0.6-4,2.4-9.6,2.4-9.6,11.6-0.8,0-17,0-17-10.8-7.6-11.8-13.4-11.8-13.4,12.6-8.2,4.4-20.6,4.6-24.2s1.4-25.2,1.4-25.2c-2-6.2-5-19.8-5-19.8,2.2-5.2,9.6-17.8,9.6-17.8,2.8-4.2,11.6-9,9.4-12s-10-1.2-10-1.2c-7.8-1.4-7.2,3.8-7.2,3.8-1.6,1-2.4,6-2.4,6-0.72,7.933-9.6,14.2-9.6,14.2-11.2,6.2-2,10.2-2,10.2,6,6.6-3.8,6.8-3.8,6.8-11-1.8-2.8,8.4-2.8,8.4,10.8,12.8,7.8,15.6,7.8,15.6-10.2,1,2.4,10.2,2.4,10.2s-0.8-2-0.6-0.2,3.2,6,4,8-3.2,2.2-3.2,2.2c0.6,9.6-14.8,5.4-14.8,5.4l-1.6,0.2c-1.6,0.2-12.8-0.6-18.6-2.8s-12.599-2.2-12.599-2.2-4,1.8-11.601,1.6c-7.6-0.2-15.6,2.6-15.6,2.6-4.4-0.4,4.2-4.8,4.4-4.6s5.8-5.4-2.2-4.8c-21.797,1.635-32.6-8.6-32.6-8.6-2-1.4-4.6-4.2-4.6-4.2-10-2,1.4,12.4,1.4,12.4,1.2,1.4-0.2,2.4-0.2,2.4-0.8-1.6-8.6-7-8.6-7-2.811-0.973-4.174-2.307-6.505-4.793z"/>
</g>
<g id="g466" fill="#4c0000">
<path id="path468" d="m-3,42.8s11.6,5.6,14.2,8.4,16.6,14.2,16.6,14.2-5.4-2-8-3.8-13.4-10-13.4-10-3.8-6-9.4-8.8z"/>
</g>
<g id="g470" fill="#99cc32">
<path id="path472" d="M-61.009,11.603c0.337-0.148-0.187-2.86-0.391-3.403-1.022-2.726-10-4.2-10-4.2-0.227,1.365-0.282,2.961-0.176,4.599,0,0,4.868,5.519,10.567,3.004z"/>
</g>
<g id="g474" fill="#659900">
<path id="path476" d="M-61.009,11.403c-0.449,0.158-0.015-2.734-0.191-3.203-1.022-2.726-10.2-4.3-10.2-4.3-0.227,1.365-0.282,2.961-0.176,4.599,0,0,4.268,5.119,10.567,2.904z"/>
</g>
<g id="g478" fill="#000">
<path id="path480" d="m-65.4,11.546c-0.625,0-1.131-1.14-1.131-2.546,0-1.405,0.506-2.545,1.131-2.545s1.132,1.14,1.132,2.545c0,1.406-0.507,2.546-1.132,2.546z"/>
</g>
<g id="g482" fill="#000">
<path id="path484" d="M-65.4,9z"/>
</g>
<g id="g486" fill="#000">
<path id="path488" d="m-111,109.6s-5.6,10,19.2,4c0,0,14-1.2,16.4-3.6,1.2,0.8,9.566,3.73,12.4,4.4,6.8,1.6,15.2-8.4,15.2-8.4s4.6-10.5,7.4-10.5-0.4,1.6-0.4,1.6-6.6,10.1-6.2,11.7c0,0-5.2,20-21.2,20.8,0,0-16.15,0.95-14.8,6.8,0,0,8.8-2.4,11.2,0,0,0,10.8-0.4,2.8,6l-6.8,11.6s0.14,3.92-10,0.4c-9.8-3.4-20.1-16.3-20.1-16.3s-15.95-14.55-5.1-28.5z"/>
</g>
<g id="g490" fill="#e59999">
<path id="path492" d="m-112.2,113.6s-2,9.6,34.8-0.8l6.8,0.8c2.4,0.8,14.4,3.6,16.4,2.4,0,0-7.2,13.6-18.8,12,0,0-13.2,1.6-12.8,6.4,0,0,4,7.2,8.8,9.6,0,0,2.8,2.4,2.4,5.6s-3.2,4.8-5.2,5.6-5.2-2.4-6.8-2.4-10-6.4-14.4-11.2-12.8-16.8-12.4-19.6,1.2-8.4,1.2-8.4z"/>
</g>
<g id="g494" fill="#b26565">
<path id="path496" d="m-109,131.05c2.6,3.95,5.8,8.15,8,10.55,4.4,4.8,12.8,11.2,14.4,11.2s4.8,3.2,6.8,2.4,4.8-2.4,5.2-5.6-2.4-5.6-2.4-5.6c-3.066-1.53-5.806-5.02-7.385-7.35,0,0,0.185,2.55-5.015,1.75s-10.4-3.6-12-6.8-4-5.6-2.4-2,4,7.2,5.6,7.6,1.2,1.6-1.2,1.2-5.2-0.8-9.6-6z"/>
</g>
<g id="g498" fill="#992600">
<path id="path500" d="m-111.6,110s1.8-13.6,3-17.6c0,0-0.8-6.8,1.6-11s4.4-10.4,7.4-15.8,3.2-9.4,7.2-11,10-10.2,12.8-11.2,2.6-0.2,2.6-0.2,6.8-14.8,20.4-10.8c0,0-16.2-2.8-0.4-12.2,0,0-4.8,1.1-1.5-5.9,2.201-4.668,1.7,2.1-9.3,13.9,0,0-5,8.6-10.2,11.6s-17.2,10-18.4,13.8-4.4,9.6-6.4,11.2-4.8,5.8-5.2,9.2c0,0-1.2,4-2.6,5.2s-1.6,4.4-1.6,6.4-2,4.8-1.8,7.2c0,0,0.8,19,0.4,21l2-3.8z"/>
</g>
<g id="g502" fill="#FFF">
<path id="path504" d="m-120.2,114.6s-2-1.4-6.4,4.6c0,0,7.3,33,7.3,34.4,0,0,1.1-2.1-0.2-9.3s-2.2-19.9-2.2-19.9l1.5-9.8z"/>
</g>
<g id="g506" fill="#992600">
<path id="path508" d="m-98.6,54s-17.6,3.2-17.2,32.4l-0.8,24.8s-1.2-25.6-2.4-27.2,2.8-12.8-0.4-6.8c0,0-14,14-6,35.2,0,0,1.5,3.3-1.5-1.3,0,0-4.6-12.6-3.5-19,0,0,0.2-2.2,2.1-5,0,0,8.6-11.7,11.3-14,0,0,1.8-14.4,17.2-19.6,0,0,5.7-2.3,1.2,0.5z"/>
</g>
<g id="g510" fill="#000">
<path id="path512" d="m40.8-12.2c0.66-0.354,0.651-1.324,1.231-1.497,1.149-0.344,1.313-1.411,1.831-2.195,0.873-1.319,1.066-2.852,1.648-4.343,0.272-0.7,0.299-1.655-0.014-2.315-1.174-2.481-1.876-4.93-3.318-7.356-0.268-0.45-0.53-1.244-0.731-1.842-0.463-1.384-1.72-2.375-2.58-3.695-0.288-0.441,0.237-1.366-0.479-1.45-0.897-0.105-2.346-0.685-2.579,0.341-0.588,2.587,0.423,5.11,1.391,7.552-0.782,0.692-0.448,1.613-0.296,2.38,0.71,3.606-0.488,6.958-1.249,10.432-0.023,0.104,0.319,0.302,0.291,0.364-1.222,2.686-2.674,5.131-4.493,7.512-0.758,0.992-1.63,1.908-2.127,2.971-0.368,0.787-0.776,1.753-0.526,2.741-3.435,2.78-5.685,6.625-8.296,10.471-0.462,0.68-0.171,1.889,0.38,2.158,0.813,0.398,1.769-0.626,2.239-1.472,0.389-0.698,0.742-1.348,1.233-1.991,0.133-0.175-0.046-0.594,0.089-0.715,2.633-2.347,4.302-5.283,6.755-7.651,1.95-0.329,3.487-1.327,5.235-2.34,0.308-0.179,0.832,0.07,1.122-0.125,1.753-1.177,1.751-3.213,1.857-5.123,0.05-0.884,0.246-2.201,1.386-2.812z"/>
</g>
<g id="g514" fill="#000">
<path id="path516" d="m31.959-16.666c0.124-0.077-0.031-0.5,0.078-0.716,0.162-0.324,0.565-0.512,0.727-0.836,0.109-0.216-0.054-0.596,0.082-0.738,2.333-2.447,2.59-5.471,1.554-8.444,1.024-0.62,1.085-1.882,0.66-2.729-0.853-1.7-1.046-3.626-2.021-5.169-0.802-1.269-2.38-2.513-3.751-1.21-0.421,0.4-0.742,1.187-0.464,1.899,0.064,0.163,0.349,0.309,0.322,0.391-0.107,0.324-0.653,0.548-0.659,0.82-0.03,1.496-0.984,3.007-0.354,4.336,0.772,1.629,1.591,3.486,2.267,5.262-1.234,2.116-0.201,4.565-1.954,6.442-0.136,0.146-0.127,0.532-0.005,0.734,0.292,0.486,0.698,0.892,1.184,1.184,0.202,0.121,0.55,0.123,0.75-0.001,0.578-0.362,0.976-0.849,1.584-1.225z"/>
</g>
<g id="g518" fill="#000">
<path id="path520" d="m94.771-26.977c1.389,1.792,1.679,4.587-0.37,5.977,0.55,3.309,3.901,1.33,5.999,0.8-0.11-0.388,0.12-0.732,0.4-0.737,1.06-0.015,1.74-1.047,2.8-0.863,0.44-1.557,2.07-2.259,2.72-3.639,1.72-3.695,1.13-7.968-1.45-11.214-0.2-0.254,0.01-0.771-0.11-1.133-0.76-2.211-2.82-2.526-4.76-3.214-1.176-3.875-1.837-7.906-3.599-11.6-1.614-0.25-2.312-1.989-3.649-2.709-1.333-0.719-1.901,0.86-1.86,1.906,0.007,0.205,0.459,0.429,0.289,0.794-0.076,0.164-0.336,0.275-0.336,0.409,0.001,0.135,0.222,0.266,0.356,0.4-0.918,0.82-2.341,1.297-2.636,2.442-0.954,3.71,1.619,6.835,3.287,10.036,0.591,1.135-0.145,2.406-0.905,3.614-0.438,0.695-0.33,1.822-0.054,2.678,0.752,2.331,2.343,4.07,3.878,6.053z"/>
</g>
<g id="g522" fill="#000">
<path id="path524" d="m57.611-8.591c-1.487,1.851-4.899,4.42-1.982,6.348,0.194,0.129,0.564,0.133,0.737-0.001,2.021-1.565,4.024-2.468,6.46-3.05,0.124-0.029,0.398,0.438,0.767,0.277,1.613-0.703,3.623-0.645,4.807-1.983,3.767,0.224,7.332-0.892,10.723-2.2,1.161-0.448,2.431-1.007,3.632-1.509,1.376-0.576,2.58-1.504,3.692-2.645,0.133-0.136,0.487-0.046,0.754-0.046-0.04-0.863,0.922-0.99,1.169-1.612,0.092-0.232-0.058-0.628,0.075-0.73,2.138-1.63,3.058-3.648,1.889-6.025-0.285-0.578-0.534-1.196-1.1-1.672-1.085-0.911-2.187-0.057-3.234-0.361-0.159,0.628-0.888,0.456-1.274,0.654-0.859,0.439-2.192-0.146-3.051,0.292-1.362,0.695-2.603,0.864-4.025,1.241-0.312,0.082-1.09-0.014-1.25,0.613-0.134-0.134-0.282-0.368-0.388-0.346-1.908,0.396-3.168,0.61-4.469,2.302-0.103,0.133-0.545-0.046-0.704,0.089-0.957,0.808-1.362,2.042-2.463,2.714-0.201,0.123-0.553-0.045-0.747,0.084-0.646,0.431-1.013,1.072-1.655,1.519-0.329,0.229-0.729-0.096-0.697-0.352,0.245-1.947,0.898-3.734,0.323-5.61,2.077-2.52,4.594-4.469,6.4-7.2,0.015-2.166,0.707-4.312,0.594-6.389-0.01-0.193-0.298-0.926-0.424-1.273-0.312-0.854,0.594-1.92-0.25-2.644-1.404-1.203-2.696-0.327-3.52,1.106-1.838,0.39-3.904,1.083-5.482-0.151-1.007-0.787-1.585-1.693-2.384-2.749-0.985-1.302-0.65-2.738-0.58-4.302,0.006-0.128-0.309-0.264-0.309-0.398,0.001-0.135,0.221-0.266,0.355-0.4-0.706-0.626-0.981-1.684-2-2,0.305-1.092-0.371-1.976-1.242-2.278-1.995-0.691-3.672,1.221-5.564,1.294-0.514,0.019-0.981-1.019-1.63-1.344-0.432-0.216-1.136-0.249-1.498,0.017-0.688,0.504-1.277,0.618-2.035,0.823-1.617,0.436-2.895,1.53-4.375,2.385-1.485,0.857-2.44,2.294-3.52,3.614-0.941,1.152-1.077,3.566,0.343,4.066,1.843,0.65,3.147-2.053,5.113-1.727,0.312,0.051,0.518,0.362,0.408,0.75,0.389,0.109,0.607-0.12,0.8-0.4,0.858,1.019,2.022,1.356,2.96,2.229,0.97,0.904,2.716,0.486,3.731,1.483,1.529,1.502,0.97,4.183,2.909,5.488-0.586,1.313-1.193,2.59-1.528,4.017-0.282,1.206,0.712,2.403,1.923,2.312,1.258-0.094,1.52-0.853,2.005-1.929,0.267,0.267,0.736,0.564,0.695,0.78-0.457,2.387-1.484,4.38-1.942,6.811-0.059,0.317-0.364,0.519-0.753,0.409-0.468,4.149-4.52,6.543-7.065,9.708-0.403,0.502-0.407,1.751,0.002,2.154,1.403,1.387,3.363-0.159,5.063-0.662,0.213-1.206,1.072-2.148,2.404-2.092,0.256,0.01,0.491-0.532,0.815-0.662,0.348-0.138,0.85,0.086,1.136-0.112,1.729-1.195,3.137-2.301,4.875-3.49,0.192-0.131,0.536,0.028,0.752-0.08,0.325-0.162,0.512-0.549,0.835-0.734,0.348-0.2,0.59,0.09,0.783,0.37-0.646,0.349-0.65,1.306-1.232,1.508-0.775,0.268-1.336,0.781-2.01,1.228-0.292,0.193-0.951-0.055-1.055,0.124-0.598,1.028-1.782,1.466-2.492,2.349z"/>
</g>
<g id="g526" fill="#000">
<path id="path528" d="m2.2-58s-9.238-2.872-20.4,22.8c0,0-2.4,5.2-4.8,7.2s-13.6,5.6-15.6,9.6l-10.4,16s14.8-16,18-18.4c0,0,8-8.4,4.8-1.6,0,0-14,10.8-12.8,20,0,0-5.6,14.4-6.4,16.4,0,0,16-32,18.4-33.2s3.6-1.2,2.4,2.4-1.6,20-4.4,22c0,0,8-20.4,7.2-23.6,0,0,3.2-3.6,5.6,1.6l-1.2,16,4.4,12s-2.4-11.2-0.8-26.8c0,0-2-10.4,2-4.8s13.6,11.6,13.6,16.4c0,0-5.2-17.6-14.4-22.4l-4,6-1.2-2s-3.6-0.8,0.8-7.6,4-7.6,4-7.6,6.4,7.2,8,7.2c0,0,13.2-7.6,14.4,16.8,0,0,6.8-14.4-2.4-21.2,0,0-14.8-2-13.6-7.2l7.2-12.4c3.6-5.2,2-2.4,2-2.4z"/>
</g>
<g id="g530" fill="#000">
<path id="path532" d="m-17.8-41.6-16,5.2-7.2,9.6s17.2-10,21.2-11.2,2-3.6,2-3.6z"/>
</g>
<g id="g534" fill="#000">
<path id="path536" d="m-57.8-35.2s-2,1.2-2.4,4-2.8,3.2-2,6,2.8,5.2,2.8,1.2,1.6-6,2.4-7.2,2.4-5.6-0.8-4z"/>
</g>
<g id="g538" fill="#000">
<path id="path540" d="m-66.6,26s-8.4-4-11.6-7.6-2.748,1.566-7.6,1.2c-5.847-0.441-4.8-16.4-4.8-16.4l-4,7.6s-1.2,14.4,6.8,12c3.907-1.172,5.2,0.4,3.6,1.2s5.6,1.2,2.8,2.8,11.6-3.6,9.2,6.8l5.6-7.6z"/>
</g>
<g id="g542" fill="#000">
<path id="path544" d="m-79.2,40.4s-15.4,4.4-19-5.2c0,0-4.8,2.4-2.6,5.4s3.4,3.4,3.4,3.4,5.4,1.2,4.8,2-3,4.2-3,4.2,10.2-6,16.4-9.8z"/>
</g>
<g id="g546" fill="#FFF">
<path id="path548" d="m149.2,118.6c-0.43,2.14-2.1,2.94-4,3.6-1.92-0.96-4.51-4.06-6.4-2-0.47-0.48-1.25-0.54-1.6-1.2-0.46-0.9-0.19-1.94-0.53-2.74-0.55-1.28-1.25-2.64-1.07-4.06,1.81-0.71,2.4-2.62,1.93-4.38-0.07-0.26-0.5-0.45-0.3-0.8,0.19-0.33,0.5-0.55,0.77-0.82-0.13,0.14-0.28,0.37-0.39,0.35-0.61-0.11-0.49-0.75-0.36-1.13,0.59-1.75,2.6-2.01,3.95-0.82,0.26-0.56,0.77-0.37,1.2-0.4-0.05-0.58,0.36-1.11,0.56-1.53,0.52-1.09,2.14,0.01,2.94-0.6,1.08-0.83,2.14-1.52,3.22-0.92,1.81,1.01,3.52,2.22,4.72,3.97,0.57,0.83,0.81,2.11,0.75,3.07-0.04,0.65-1.42,0.29-1.76,1.22-0.65,1.75,1.19,2.27,1.94,3.61,0.2,0.35-0.06,0.65-0.38,0.75-0.41,0.13-1.19-0.06-1.06,0.39,0.98,3.19-1.78,3.87-4.13,4.44z"/>
</g>
<g id="g550" fill="#FFF">
<path id="path552" d="m139.6,138.2c-0.01-1.74-1.61-3.49-0.4-5.2,0.14,0.14,0.27,0.36,0.4,0.36,0.14,0,0.27-0.22,0.4-0.36,1.5,2.22,5.15,3.14,5.01,5.99-0.03,0.45-1.11,1.37-0.21,2.01-1.81,1.35-1.87,3.72-2.8,5.6-1.24-0.28-2.45-0.65-3.6-1.2,0.35-1.48,0.24-3.17,1.06-4.49,0.43-0.7,0.14-1.78,0.14-2.71z"/>
</g>
<g id="g554" fill="#CCC">
<path id="path556" d="m-26.6,129.2s-16.858,10.14-2.8-5.2c8.8-9.6,18.8-15.2,18.8-15.2s10.4-4.4,14-5.6,18.8-6.4,22-6.8,12.8-4.4,19.6-0.4,14.8,8.4,14.8,8.4-16.4-8.4-20-6-10.8,2-16.8,5.2c0,0-14.8,4.4-18,6.4s-13.6,13.6-15.2,12.8,0.4-1.2,1.6-4-0.8-4.4-8.8,2-9.2,8.4-9.2,8.4z"/>
</g>
<g id="g558" fill="#000">
<path id="path560" d="m-19.195,123.23s1.41-13.04,9.888-11.37c0,0,8.226-4.17,10.948-6.14,0,0,8.139-1.7,9.449-2.32,18.479-8.698,33.198-4.179,33.745-5.299,0.546-1.119,20.171,5.999,23.78,10.079,0.391,0.45-10.231-5.59-19.929-7.48-8.273-1.617-29.875,0.24-40.781,5.78-2.973,1.51-11.918,7.29-14.449,7.18s-12.651,9.57-12.651,9.57z"/>
</g>
<g id="g562" fill="#CCC">
<path id="path564" d="m-23,148.8s-15.2-2.4,1.6-4c0,0,18-2,22-7.2,0,0,13.6-9.2,16.4-9.6s32.8-7.6,33.2-10,6-2.4,7.6-1.6,0.8,2-2,2.8-34,17.2-40.4,18.4-18,8.8-22.8,10-15.6,1.2-15.6,1.2z"/>
</g>
<g id="g566" fill="#000">
<path id="path568" d="m-3.48,141.4s-8.582-0.83,0.019-1.64c0,0,8.816-3.43,10.864-6.09,0,0,6.964-4.71,8.397-4.92,1.434-0.2,15.394-3.89,15.599-5.12s34.271-13.81,38.691-10.62c2.911,2.1-6.99,0.43-16.624,4.84-1.355,0.62-35.208,15.2-38.485,15.82-3.277,0.61-9.216,4.5-11.674,5.12-2.457,0.61-6.787,2.61-6.787,2.61z"/>
</g>
<g id="g570" fill="#000">
<path id="path572" d="m-11.4,143.6s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g574" fill="#000">
<path id="path576" d="m-18.6,145.2s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g578" fill="#000">
<path id="path580" d="m-29,146.8s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g582" fill="#000">
<path id="path584" d="m-36.6,147.6s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g586" fill="#000">
<path id="path588" d="m1.8,108,3.2,1.6c-1.2,1.6-4.4,1.2-4.4,1.2l1.2-2.8z"/>
</g>
<g id="g590" fill="#000">
<path id="path592" d="m-8.2,113.6s6.506-2.14,4,1.2c-1.2,1.6-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g594" fill="#000">
<path id="path596" d="m-19.4,118.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g598" fill="#000">
<path id="path600" d="m-27,124.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g602" fill="#000">
<path id="path604" d="m-33.8,129.2s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g606" fill="#000">
<path id="path608" d="m5.282,135.6s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
</g>
<g id="g610" fill="#000">
<path id="path612" d="m15.682,130.8s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
</g>
<g id="g614" fill="#000">
<path id="path616" d="m26.482,126.4s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
</g>
<g id="g618" fill="#000">
<path id="path620" d="m36.882,121.6s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
</g>
<g id="g622" fill="#000">
<path id="path624" d="m9.282,103.6s6.921-0.53,5.324,1.6c-1.597,2.12-5.592,1.86-5.592,1.86l0.268-3.46z"/>
</g>
<g id="g626" fill="#000">
<path id="path628" d="m19.282,100.4s6.921-0.534,5.324,1.6c-1.597,2.12-5.992,1.86-5.992,1.86l0.668-3.46z"/>
</g>
<g id="g630" fill="#000">
<path id="path632" d="m-3.4,140.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g634" fill="#992600">
<path id="path636" d="m-76.6,41.2s-4.4,8.8-4.8,12c0,0,0.8-8.8,2-10.8s2.8-1.2,2.8-1.2z"/>
</g>
<g id="g638" fill="#992600">
<path id="path640" d="m-95,55.2s-3.2,14.4-2.8,17.2c0,0-1.2-11.6-0.8-12.8s3.6-4.4,3.6-4.4z"/>
</g>
<g id="g642" fill="#CCC">
<path id="path644" d="m-74.2-19.4-0.2,3.2-2.2,0.2s14.2,12.6,14.8,20.2c0,0,0.8-8.2-12.4-23.6z"/>
</g>
<g id="g646" fill="#000">
<path id="path648" d="m-70.216-18.135c-0.431-0.416-0.212-1.161-0.62-1.421-0.809-0.516,1.298-0.573,1.07-1.289-0.383-1.206-0.196-1.227-0.318-2.503-0.057-0.598,0.531-2.138,0.916-2.578,1.446-1.652,0.122-4.584,1.762-6.135,0.304-0.289,0.68-0.841,0.965-1.259,0.659-0.963,1.843-1.451,2.793-2.279,0.318-0.276,0.117-1.103,0.686-1.011,0.714,0.115,1.955-0.015,1.91,0.826-0.113,2.12-1.442,3.84-2.722,5.508,0.451,0.704-0.007,1.339-0.291,1.896-1.335,2.62-1.146,5.461-1.32,8.301-0.005,0.085-0.312,0.163-0.304,0.216,0.353,2.335,0.937,4.534,1.816,6.763,0.366,0.93,0.837,1.825,0.987,2.752,0.111,0.686,0.214,1.519-0.194,2.224,2.035,2.89,0.726,5.541,1.895,9.072,0.207,0.625,1.899,2.539,1.436,2.378-2.513-0.871-2.625-1.269-2.802-2.022-0.146-0.623-0.476-2-0.713-2.602-0.064-0.164-0.235-2.048-0.313-2.17-1.513-2.382-0.155-2.206-1.525-4.564-1.428-0.68-2.394-1.784-3.517-2.946-0.198-0.204,0.945-0.928,0.764-1.141-1.092-1.289-2.245-2.056-1.909-3.549,0.155-0.69,0.292-1.747-0.452-2.467z"/>
</g>
<g id="g650" fill="#000">
<path id="path652" d="m-73.8-16.4s0.4,6.8,2.8,8.4,1.2,0.8-2-0.4-2-2-2-2-2.8,0.4-0.4,2.4,6,4.4,4.4,4.4-9.2-4-9.2-6.8-1-6.9-1-6.9,1.1-0.8,5.9-0.7c0,0,1.4,0.7,1.5,1.6z"/>
</g>
<g id="g654" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path656" d="m-74.6,2.2s-8.52-2.791-27,0.6c0,0,9.031-2.078,27.8,0.2,10.3,1.25-0.8-0.8-0.8-0.8z"/>
</g>
<g id="g658" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path660" d="m-72.502,2.129s-8.246-3.518-26.951-1.737c0,0,9.178-1.289,27.679,2.603,10.154,2.136-0.728-0.866-0.728-0.866z"/>
</g>
<g id="g662" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path664" d="m-70.714,2.222s-7.962-4.121-26.747-3.736c0,0,9.248-0.604,27.409,4.654,9.966,2.885-0.662-0.918-0.662-0.918z"/>
</g>
<g id="g666" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path668" d="m-69.444,2.445s-6.824-4.307-23.698-5.405c0,0,8.339,0.17,24.22,6.279,8.716,3.353-0.522-0.874-0.522-0.874z"/>
</g>
<g id="g670" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path672" d="m45.84,12.961s-0.93,0.644-0.716-0.537c0.215-1.181,28.423-14.351,32.037-14.101,0,0-30.248,13.206-31.321,14.638z"/>
</g>
<g id="g674" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path676" d="m42.446,13.6s-0.876,0.715-0.755-0.479,27.208-16.539,30.83-16.573c0,0-29.117,15.541-30.075,17.052z"/>
</g>
<g id="g678" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path680" d="m39.16,14.975s-0.828,0.772-0.786-0.428c0.042-1.199,19.859-16.696,29.671-18.57,0,0-18.03,8.127-28.885,18.998z"/>
</g>
<g id="g682" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path684" d="m36.284,16.838s-0.745,0.694-0.707-0.385c0.038-1.08,17.872-15.027,26.703-16.713,0,0-16.226,7.314-25.996,17.098z"/>
</g>
<g id="g686" fill="#CCC">
<path id="path688" d="m4.6,164.8s-15.2-2.4,1.6-4c0,0,18-2,22-7.2,0,0,13.6-9.2,16.4-9.6s19.2-4,19.6-6.4,6.4-4.8,8-4,1.6,10-1.2,10.8-21.6,8-28,9.2-18,8.8-22.8,10-15.6,1.2-15.6,1.2z"/>
</g>
<g id="g690" fill="#000">
<path id="path692" d="m77.6,127.4s-3,1.6-4.2,4.2c0,0-6.4,10.6-20.6,13.8,0,0-23,9-30.8,11,0,0-13.4,5-20.8,4.2,0,0-7,0.2-0.8,1.8,0,0,20.2-2,23.6-3.8,0,0,15.6-5.2,18.6-7.8s21.2-7.6,23.4-9.6,12-10.4,11.6-13.8z"/>
</g>
<g id="g694" fill="#000">
<path id="path696" d="m18.882,158.91s5.229-0.23,4.076,1.32-3.601,0.68-3.601,0.68l-0.475-2z"/>
</g>
<g id="g698" fill="#000">
<path id="path700" d="m11.68,160.26s5.228-0.22,4.076,1.33c-1.153,1.55-3.601,0.67-3.601,0.67l-0.475-2z"/>
</g>
<g id="g702" fill="#000">
<path id="path704" d="m1.251,161.51s5.229-0.23,4.076,1.32-3.601,0.68-3.601,0.68l-0.475-2z"/>
</g>
<g id="g706" fill="#000">
<path id="path708" d="m-6.383,162.06s5.229-0.23,4.076,1.32-3.601,0.67-3.601,0.67l-0.475-1.99z"/>
</g>
<g id="g710" fill="#000">
<path id="path712" d="m35.415,151.51s6.96-0.3,5.425,1.76c-1.534,2.07-4.793,0.9-4.793,0.9l-0.632-2.66z"/>
</g>
<g id="g714" fill="#000">
<path id="path716" d="m45.73,147.09s5.959-3.3,5.425,1.76c-0.27,2.55-4.793,0.9-4.793,0.9l-0.632-2.66z"/>
</g>
<g id="g718" fill="#000">
<path id="path720" d="m54.862,144.27s7.159-3.7,5.425,1.77c-0.778,2.44-4.794,0.9-4.794,0.9l-0.631-2.67z"/>
</g>
<g id="g722" fill="#000">
<path id="path724" d="m64.376,139.45s4.359-4.9,5.425,1.76c0.406,2.54-4.793,0.9-4.793,0.9l-0.632-2.66z"/>
</g>
<g id="g726" fill="#000">
<path id="path728" d="m26.834,156s5.228-0.23,4.076,1.32c-1.153,1.55-3.602,0.68-3.602,0.68l-0.474-2z"/>
</g>
<g id="g730" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path732" d="m62.434,34.603s-0.726,0.665-0.727-0.406c0-1.07,17.484-14.334,26.327-15.718,0,0-16.099,6.729-25.6,16.124z"/>
</g>
<g id="g734" fill="#000">
<path id="path736" d="m65.4,98.4s22.001,22.4,31.201,26c0,0,9.199,11.2,5.199,37.2,0,0-3.199,7.6-6.399-13.2,0,0,3.2-25.2-8-9.2,0,0-8.401-9.9-2.001-9.6,0,0,3.201,2,3.601,0.4s-7.601-15.2-24.801-29.6,1.2-2,1.2-2z"/>
</g>
<g id="g738" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path740" d="m7,137.2s-0.2-1.8,1.6-1,96,7,127.6,31c0,0-45.199-23.2-129.2-30z"/>
</g>
<g id="g742" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path744" d="m17.4,132.8s-0.2-1.8,1.6-1,138.4-0.2,162,32.2c0,0-22-25.2-163.6-31.2z"/>
</g>
<g id="g746" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path748" d="m29,128.8s-0.2-1.8,1.6-1,175.2-12.2,198.8,20.2c0,0-9.6-25.6-200.4-19.2z"/>
</g>
<g id="g750" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path752" d="m39,124s-0.2-1.8,1.6-1,124-37.8,147.6-5.4c0,0-13.4-24.6-149.2,6.4z"/>
</g>
<g id="g754" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path756" d="m-19,146.8s-0.2-1.8,1.6-1,19.6,3,21.6,41.8c0,0-7.2-42-23.2-40.8z"/>
</g>
<g id="g758" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path760" d="m-27.8,148.4s-0.2-1.8,1.6-1,16-3.8,13.2,35c0,0,1.2-35.2-14.8-34z"/>
</g>
<g id="g762" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path764" d="m-35.8,148.8s-0.2-1.8,1.6-1,17.2,1.4,4.8,23.8c0,0,9.6-24-6.4-22.8z"/>
</g>
<g id="g766" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path768" d="m11.526,104.46s-0.444,2,1.105,0.79c16.068-12.628,48.51-71.53,104.2-77.164,0,0-38.312-12.11-105.3,76.374z"/>
</g>
<g id="g770" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path772" d="m22.726,102.66s-1.363-1.19,0.505-1.81c1.868-0.63,114.31-73.13,153.6-65.164,0,0-27.11-7.51-154.1,66.974z"/>
</g>
<g id="g774" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path776" d="m1.885,108.77s-0.509,1.6,1.202,0.62c8.975-5.12,12.59-62.331,56.167-63.586,0,0-32.411-14.714-57.369,62.966z"/>
</g>
<g id="g778" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path780" d="m-18.038,119.79s-1.077,1.29,0.876,1.03c10.246-1.33,31.651-42.598,76.09-37.519,0,0-31.966-14.346-76.966,36.489z"/>
</g>
<g id="g782" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path784" d="m-6.8,113.67s-0.811,1.47,1.058,0.84c9.799-3.27,22.883-47.885,67.471-51.432,0,0-34.126-7.943-68.529,50.592z"/>
</g>
<g id="g786" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path788" d="m-25.078,124.91s-0.873,1.04,0.709,0.84c8.299-1.08,25.637-34.51,61.633-30.396,0,0-25.893-11.62-62.342,29.556z"/>
</g>
<g id="g790" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path792" d="m-32.677,130.82s-1.005,1.05,0.586,0.93c4.168-0.31,34.806-33.39,53.274-17.89,0,0-12.015-18.721-53.86,16.96z"/>
</g>
<g id="g794" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path796" d="m36.855,98.898s-1.201-1.355,0.731-1.74c1.932-0.384,122.63-58.097,160.59-45.231,0,0-25.94-10.874-161.32,46.971z"/>
</g>
<g id="g798" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path800" d="m3.4,163.2s-0.2-1.8,1.6-1,17.2,1.4,4.8,23.8c0,0,9.6-24-6.4-22.8z"/>
</g>
<g id="g802" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path804" d="m13.8,161.6s-0.2-1.8,1.6-1,19.6,3,21.6,41.8c0,0-7.2-42-23.2-40.8z"/>
</g>
<g id="g806" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path808" d="m20.6,160s-0.2-1.8,1.6-1,26.4,4.2,50,36.6c0,0-35.6-36.8-51.6-35.6z"/>
</g>
<g id="g810" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path812" d="m28.225,157.97s-0.437-1.76,1.453-1.2c1.89,0.55,22.324-1.35,60.421,32.83,0,0-46.175-34.94-61.874-31.63z"/>
</g>
<g id="g814" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path816" d="m38.625,153.57s-0.437-1.76,1.453-1.2c1.89,0.55,36.724,5.05,88.422,40.03,0,0-74.176-42.14-89.875-38.83z"/>
</g>
<g id="g818" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path820" d="m-1.8,142s-0.2-1.8,1.6-1,55.2,3.4,85.6,30.2c0,0-34.901-24.77-87.2-29.2z"/>
</g>
<g id="g822" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path824" d="m-11.8,146s-0.2-1.8,1.6-1,26.4,4.2,50,36.6c0,0-35.6-36.8-51.6-35.6z"/>
</g>
<g id="g826" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path828" d="m49.503,148.96s-0.565-1.72,1.361-1.3c1.926,0.41,36.996,2.34,91.116,33.44,0,0-77.663-34.4-92.477-32.14z"/>
</g>
<g id="g830" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path832" d="m57.903,146.56s-0.565-1.72,1.361-1.3c1.926,0.41,36.996,2.34,91.116,33.44,0,0-77.063-34.8-92.477-32.14z"/>
</g>
<g id="g834" stroke-width="0.1" stroke="#000" fill="#FFF">
<path id="path836" d="m67.503,141.56s-0.565-1.72,1.361-1.3c1.926,0.41,44.996,4.74,134.72,39.04,0,0-120.66-40.4-136.08-37.74z"/>
</g>
<g id="g838" fill="#000">
<path id="path840" d="m-43.8,148.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g842" fill="#000">
<path id="path844" d="m-13,162.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g846" fill="#000">
<path id="path848" d="m-21.8,162s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
</g>
<g id="g850" fill="#000">
<path id="path852" d="m-117.17,150.18s5.05,1.32,3.39,2.44-3.67-0.42-3.67-0.42l0.28-2.02z"/>
</g>
<g id="g854" fill="#000">
<path id="path856" d="m-115.17,140.58s5.05,1.32,3.39,2.44-3.67-0.42-3.67-0.42l0.28-2.02z"/>
</g>
<g id="g858" fill="#000">
<path id="path860" d="m-122.37,136.18s5.05,1.32,3.39,2.44-3.67-0.42-3.67-0.42l0.28-2.02z"/>
</g>
<g id="g862" fill="#CCC">
<path id="path864" d="m-42.6,211.2-5.6,2c-2,0-13.2,3.6-18.8,13.6,0,0,12.4-9.6,24.4-15.6z"/>
</g>
<g id="g866" fill="#CCC">
<path id="path868" d="m45.116,303.85c0.141,0.25,0.196,0.67,0.488,0.69,0.658,0.04,1.891,0.34,1.766-0.29-0.848-4.31-1.722-9.25-5.855-11.05-0.639-0.28-2.081,0.13-2.155,1.02-0.127,1.52-0.244,2.87,0.065,4.33,0.3,1.43,2.458,1.43,3.375,0.05,0.936,1.67,1.368,3.52,2.316,5.25z"/>
</g>
<g id="g870" fill="#CCC">
<path id="path872" d="m34.038,308.58c0.748,1.41,0.621,3.27,2.036,3.84,0.74,0.29,2.59-0.68,2.172-1.76-0.802-2.06-1.19-4.3-2.579-6.11-0.2-0.26,0.04-0.79-0.12-1.12-0.594-1.22-1.739-1.96-3.147-1.63-1.115,2.2,0.033,4.33,1.555,6.04,0.136,0.15-0.03,0.53,0.083,0.74z"/>
</g>
<g id="g874" fill="#CCC">
<path id="path876" d="m-5.564,303.39c-0.108-0.38-0.146-0.84,0.019-1.16,0.531-1.03,1.324-2.15,0.987-3.18-0.348-1.05-1.464-0.87-2.114-0.3-1.135,0.99-1.184,2.82-1.875,4.18-0.196,0.38-0.145,0.96-0.586,1.35-0.474,0.42-0.914,1.94-0.818,2.51,0.053,0.32-0.13,10.22,0.092,9.96,0.619-0.73,3.669-10.47,3.738-11.36,0.057-0.73,0.789-1.19,0.557-2z"/>
</g>
<g id="g878" fill="#CCC">
<path id="path880" d="m-31.202,296.6c2.634-2.5,5.424-5.46,4.982-9.17-0.116-0.98-1.891-0.45-2.078,0.39-0.802,3.63-2.841,6.29-5.409,8.68-2.196,2.05-4.058,8.39-4.293,8.9,3.697-5.26,5.954-8,6.798-8.8z"/>
</g>
<g id="g882" fill="#CCC">
<path id="path884" d="m-44.776,290.64c0.523-0.38,0.221-0.87,0.438-1.2,0.953-1.46,2.254-2.7,2.272-4.44,0.003-0.28-0.375-0.59-0.71-0.36-0.277,0.18-0.619,0.31-0.727,0.44-2.03,2.45-3.43,5.12-4.873,7.93-0.183,0.36-1.327,4.85-1.014,4.96,0.239,0.09,1.959-4.09,2.169-4.21,1.263-0.68,1.275-2.3,2.445-3.12z"/>
</g>
<g id="g886" fill="#CCC">
<path id="path888" d="m-28.043,310.18c0.444-0.87,2.02-2.07,1.907-2.96-0.118-0.93,0.35-2.37-0.562-1.68-1.257,0.94-4.706,2.29-4.976,8.1-0.026,0.57,2.948-2.12,3.631-3.46z"/>
</g>
<g id="g890" fill="#CCC">
<path id="path892" d="m-13.6,293c0.4-0.67,1.108-0.19,1.567-0.46,0.648-0.37,1.259-0.93,1.551-1.58,0.97-2.14,2.739-3.96,2.882-6.36-1.491-1.4-2.17,0.64-2.8,1.6-1.323-1.65-2.322,0.23-3.622,0.75-0.07,0.03-0.283-0.32-0.358-0.29-1.177,0.44-1.857,1.52-2.855,2.3-0.171,0.13-0.576-0.05-0.723,0.09-0.652,0.6-1.625,0.93-1.905,1.61-1.11,2.7-4.25,4.8-6.137,12.34,0.381,0.91,4.512-6.64,4.999-7.34,0.836-1.2,0.954,1.66,2.23,1,0.051-0.03,0.237,0.21,0.371,0.34,0.194-0.28,0.412-0.51,0.8-0.4,0-0.4-0.134-0.96,0.067-1.11,1.237-0.98,1.153-2.05,1.933-3.29,0.458,0.79,1.519,0.07,2,0.8z"/>
</g>
<g id="g894" fill="#CCC">
<path id="path896" d="m46.2,347.4s7.4-20.4,3-31.6c0,0,11.4,21.6,6.8,32.8,0,0-0.4-10.4-4.4-15.4,0,0-4,12.8-5.4,14.2z"/>
</g>
<g id="g898" fill="#CCC">
<path id="path900" d="m31.4,344.8s5.4-8.8-2.6-27.2c0,0-0.8,20.4-7.6,31.4,0,0,14.2-20.2,10.2-4.2z"/>
</g>
<g id="g902" fill="#CCC">
<path id="path904" d="m21.4,342.8s-0.2-20,0.2-23c0,0-3.8,16.6-14,26.2,0,0,14.4-12,13.8-3.2z"/>
</g>
<g id="g906" fill="#CCC">
<path id="path908" d="m11.8,310.8s6,13.6-4,32c0,0,6.4-12.2,1.6-19.2,0,0,2.6-3.4,2.4-12.8z"/>
</g>
<g id="g910" fill="#CCC">
<path id="path912" d="m-7.4,342.4s-1-15.6,0.8-17.8c0,0,0.2-6.4-0.2-7.4,0,0,4-6.2,4.2,1.2,0,0,1.4,7.8,4.2,12.4,0,0,3.6,5.4,3.4,11.8,0,0-10-30.2-12.4-0.2z"/>
</g>
<g id="g914" fill="#CCC">
<path id="path916" d="m-11,314.8s-6.6,10.8-8.4,29.8c0,0-1.4-6.2,2.4-20.6,0,0,4.2-15.4,6-9.2z"/>
</g>
<g id="g918" fill="#CCC">
<path id="path920" d="m-32.8,334.6s5-5.4,6.4-10.4c0,0,3.6-15.8-2.8-7.2,0,0,0.2,8-8,15.4,0,0,4.8-2.4,4.4,2.2z"/>
</g>
<g id="g922" fill="#CCC">
<path id="path924" d="m-38.6,329.6s3.4-17.4,4.2-18.2c0,0,1.8-3.4-1-0.2,0,0-8.8,19.2-12.8,25.8,0,0,8-9.2,9.6-7.4z"/>
</g>
<g id="g926" fill="#CCC">
<path id="path928" d="m-44.4,313s11.6-22.4-10.2,3.4c0,0,11-9.8,10.2-3.4z"/>
</g>
<g id="g930" fill="#CCC">
<path id="path932" d="m-59.8,298.4s4.8-18.8,7.4-18.6l1.6,1.6s-6,9.6-5.4,19.4c0,0-0.6-9.6-3.6-2.4z"/>
</g>
<g id="g934" fill="#CCC">
<path id="path936" d="m270.5,287s-12-10-14.5-13.5c0,0,13.5,18.5,13.5,25.5,0,0,2.5-7.5,1-12z"/>
</g>
<g id="g938" fill="#CCC">
<path id="path940" d="m276,265s-21-15-24.5-22.5c0,0,26.5,29.5,26.5,34,0,0,0.5-9-2-11.5z"/>
</g>
<g id="g942" fill="#CCC">
<path id="path944" d="m293,111s-12-8-13.5-6c0,0,10.5,6.5,13,15,0,0-1.5-9,0.5-9z"/>
</g>
<g id="g946" fill="#CCC">
<path id="path948" d="m301.5,191.5-17.5-12s19,17,19.5,21l-2-9z"/>
</g>
<g id="g950" stroke="#000">
<path id="path952" d="m-89.25,169,22,4.75"/>
</g>
<g id="g954" stroke="#000">
<path id="path956" d="m-39,331s-0.5-3.5-9.5,7"/>
</g>
<g id="g958" stroke="#000">
<path id="path960" d="m-33.5,336s2-6.5-4.5-2"/>
</g>
<g id="g962" stroke="#000">
<path id="path964" d="m20.5,344.5s1.5-11-10,2"/>
</g>
</g>
</svg>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Transform Testing.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g transform="scale(5) translate(15, 15) rotate(20) skewX(20) skewY(5)" >
<rect x="10" y="10" width="5" height="5" fill="firebrick" />
<circle r="10" fill="seagreen" stroke="blue"/>
<rect x="5" y="5" width="12" height="2" fill="grey" stroke="silver"/>
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/SVG Import/Viewbox.html
+38
View File
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Viewbox 1</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg width="300" height="200"
viewBox="100 100 1500 1000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<desc>Example ViewBox - uses the viewBox
attribute to automatically create an initial user coordinate
system which causes the graphic to scale to fit into the
viewport no matter what size the viewport is.</desc>
<!-- This rectangle goes from (0,0) to (1500,1000) in user space.
Because of the viewBox attribute above,
the rectangle will end up filling the entire area
reserved for the SVG content. -->
<rect x="0" y="0" width="1500" height="1000"
fill="yellow" stroke="blue" stroke-width="12" />
<!-- A large, red triangle -->
<path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
<!-- A text string that spans most of the viewport -->
<text x="100" y="600" font-size="200" font-family="Verdana" >
Stretch to fit
</text>
</svg>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Scripts/Arcs.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arcs</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var values = {
points: 20,
radius: 20,
initialRadius: 10
};
for (var i = 0; i < 30; i++) {
var path = new Path({
fillColor: i % 2 ? 'red' : 'black',
closed: true
});
var point = new Point({
length: values.initialRadius + values.radius * i,
angle: 0
});
for (var j = 0; j <= values.points; j++) {
point.angle += 360 / values.points;
if (j == 0) {
path.add(view.center + point);
} else {
path.arcTo(view.center + point);
}
}
project.activeLayer.insertChild(0, path);
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
paper.js/assets/paperjs/examples/Scripts/BlendModes.html
+77
View File
File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More