<!DOCTYPE html>
<html>
<head>
<!-- Built with RPD v2.0.0 <http://shamansir.github.io/rpd> -->
<meta charset='utf-8' />
<!-- gulp ==renderer html ==style quartz ==toolkit util ==target-name rpd ==compilation simple -->
<!-- RPD Renderer: html -->
<link rel="stylesheet" href="../src/render/html.css"></style>
<!-- RPD Style: quartz (html) -->
<link rel="stylesheet" href="../src/style/quartz/html.css"></style>
<!-- RPD Toolkit: util (html) -->
<link rel="stylesheet" href="../src/toolkit/util/html.css"></style>
<!-- Kefir -->
<script src="../node_modules/kefir/dist/kefir.min.js"></script>
<!-- d3-selection -->
<script src="../node_modules/d3-selection/build/d3-selection.min.js"></script>
<!-- RPD -->
<script src="../src/rpd.js"></script>
<!-- RPD Rendering Engine: -->
<script src="../src/render/shared.js"></script>
<!-- RPD Style: quartz (html) -->
<script src="../src/style/quartz/html.js"></script>
<!-- RPD Renderer: html -->
<script src="../src/render/html.js"></script>
<!-- RPD Toolkit: util -->
<script src="../src/toolkit/util/shared.js"></script>
<script src="../src/toolkit/util/toolkit.js"></script>
<!-- RPD Toolkit: util (html) -->
<script src="../src/toolkit/util/html.js"></script>
<style>
body {
height: 700px;
background-color: #3c464c;
}
#target-1, #target-2 {
position: relative;
float: left;
border: 2px solid #9a0;
width: 360px;
}
#target-1 .rpd-canvas, #target-2 .rpd-canvas {
width: 350px;
height: 350px;
border: 1px dotted #9a0;
}
#target-1 {
top: 40px;
left: 40px;
}
#target-2 {
top: 40px;
left: 440px;
}
</style>
</head>
<body>
<div id="target-1"></div>
<div id="target-2"></div>
<script>
Rpd.renderNext('html', document.getElementById('target-1'), { style: 'quartz' });
var firstTargetOne = Rpd.addPatch('target-1-1');
firstTargetOne.addNode('util/random');
firstTargetOne.addNode('util/random');
var firstTargetTwo = Rpd.addPatch('target-1-2');
firstTargetTwo.addNode('util/random');
firstTargetTwo.addNode('util/random');
Rpd.renderNext('html', document.getElementById('target-2'), { style: 'quartz' });
var secondTargetOne = Rpd.addPatch('target-2-1');
secondTargetOne.addNode('util/random');
var secondTargetTwo = Rpd.addClosedPatch('target-2-2');
secondTargetTwo.addNode('util/random');
</script>
</body>
</html>