splatter-plot
Version:
Layout elements using concentric rings in JS + SVG
282 lines (258 loc) • 12.4 kB
HTML
<html>
<head>
<script type="text/javascript" src="./dist/SplatterPlot.js"></script>
<style>
.github-fork-ribbon {
width: 12.1em;
height: 12.1em;
position: absolute;
overflow: hidden;
top: 0;
right: 0;
z-index: 9999;
pointer-events: none;
font-size: 13px;
text-decoration: none;
text-indent: -999999px;
}
.github-fork-ribbon.fixed {
position: fixed;
}
.github-fork-ribbon:hover, .github-fork-ribbon:active {
background-color: rgba(0, 0, 0, 0.0);
}
.github-fork-ribbon:before, .github-fork-ribbon:after {
/* The right and left classes determine the side we attach our banner to */
position: absolute;
display: block;
width: 15.38em;
height: 1.54em;
top: 3.23em;
right: -3.23em;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.github-fork-ribbon:before {
content: "";
/* Add a bit of padding to give some substance outside the "stitching" */
padding: .38em 0;
/* Set the base colour */
background-color: #a00;
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
/* Add a drop shadow */
-webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
pointer-events: auto;
}
.github-fork-ribbon:after {
/* Set the text from the data-ribbon attribute */
content: attr(data-ribbon);
/* Set the text properties */
color: #fff;
font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.54em;
text-decoration: none;
text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
text-align: center;
text-indent: 0;
/* Set the layout properties */
padding: .15em 0;
margin: .15em 0;
/* Add "stitching" effect */
border-width: .08em 0;
border-style: dotted;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.7);
}
.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {
right: auto;
left: 0;
}
.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {
top: auto;
bottom: 0;
}
.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after {
right: auto;
left: -3.23em;
}
.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
top: auto;
bottom: 3.23em;
}
.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
<style>
.demo_panel{
width:90%;
height: 90%;
margin-top: 5%;
border:0px;
border-radius: 20px;
background-color: #111;
}
.popup_panel{
width:10px;
height: 10px;
border:1px solid red;
position: absolute;
display: block;
}
.desc{ color:white }
h1{
margin-top: 5%;
font-size: 5em;
color: CCCCCC;
font-family: 'Comfortaa', cursive;
}
body{
margin: 0px;
margin-bottom:5%;
background-color: #2E2E2E;
text-align: center;
}
svg{
width: 100%;
height: 100%;
}
#panel_one circle{
fill: #FF0000;
}
#panel_one path{
fill: #990000;
}
#panel_two circle{
fill: #994400;
}
#panel_three , #panel_four {
background: #000000;
}
#panel_three path, #panel_four path{
fill: #FFFFFF;
}
</style>
</head>
<body bgcolor="#000000">
<a class="github-fork-ribbon right-top"
href="https://github.com/khrome/splatter-plot"
data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<h1>splatter-plot</h1>
<svg id="panel_one" class="demo_panel"></svg>
<div class="desc">
[<a href="https://en.wikipedia.org/wiki/The_finger">The Finger</a>]
[<a href="https://youtu.be/wKkFctXIXK8?t=63">An Anvil</a>]
[<a href="https://index.rpg.net/display-entry.phtml?mainid=7208">A Rocket</a>]
[<a href="https://www.thebootcave.com/">A Star</a>]
</div>
<svg id="panel_two" class="demo_panel"></svg>
<div class="desc">
[<a href="https://en.wikipedia.org/wiki/Church_of_the_SubGenius">Bob Dobbs</a>]
[<a href="https://en.wikipedia.org/wiki/Turtle%27s_Records_%26_Tapes">Turtles</a>]
[<a href="https://archive.info-mac.org/game/bolo/ladmo-060.hqx">Ladmo</a>]
</div>
<svg id="panel_three" class="demo_panel"></svg>
<div class="desc">Starfield distributed randomly between shells.</div>
<svg id="panel_four" class="demo_panel"></svg>
<div class="desc">Starfield distributed randomly throughout.</div>
<div id="demo_popup" class="popup_panel"></div>
<script>
var plot1 = new Splatter.Plot({
selector: '#panel_one',
shells:12,
radius: 20,
offset: 10,
//origin: {x:200, y:200},
animation: 2000,
spacing: 20,
margin: 0
});
var nodes = [
"M25.555,18.703l-2.187-1.458C23.736,15.625,24,13.834,24,12c0-5.916-4.684-9.805-6.884-11.304 c-0.675-0.461-1.557-0.461-2.232,0C12.684,2.195,8,6.084,8,12c0,2.019,0.207,3.795,0.509,5.327l-2.064,1.376 C6.167,18.889,6,19.201,6,19.535v4.077c0,0.57,0.467,1.001,0.998,1.001c0.104,0,0.211-0.017,0.318-0.052l3.346-1.115 C10.867,23.806,11,24,11,24l-0.561,1.684C10.223,26.331,10.705,27,11.388,27h9.225c0.683,0,1.164-0.669,0.949-1.316L21,24 c0,0,0.105-0.203,0.277-0.574l3.407,1.136c0.106,0.035,0.213,0.052,0.318,0.052c0.531,0,0.998-0.43,0.998-1.001v-4.077 C26,19.201,25.833,18.889,25.555,18.703z M16,16c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S18.757,16,16,16z M18,11 c0,1.103-0.897,2-2,2s-2-0.897-2-2c0-1.103,0.897-2,2-2S18,9.897,18,11z M16,7c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4 c2.209,0,4-1.791,4-4C20,8.791,18.209,7,16,7z M16,14c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S17.657,14,16,14z M11.837,28 h8.326c0,1.223-0.307,2.318-0.58,3.052c-0.202,0.542-0.81,0.807-1.338,0.573c-0.089-0.039-0.182-0.081-0.279-0.126 c-0.294-0.136-0.641-0.119-0.922,0.041c-0.157,0.089-0.3,0.167-0.424,0.231c-0.294,0.154-0.637,0.15-0.931-0.004 c-0.266-0.14-0.623-0.339-1.007-0.585c-0.334,0.171-0.652,0.32-0.927,0.441c-0.527,0.233-1.136-0.033-1.337-0.573 C12.144,30.318,11.837,29.223,11.837,28z",
"M 46,51 L 31,42 L 17,51 L 22,35 L 8,24 L 25,23 L 31,7 L 38,23 L 55,24 L 41,35 L 46,51 z",
"M 0,34 L 0,53 C 9,60 18,68 26,75 C 35,83 45,90 53,99 C 61,108 70,117 74,132 C 77,146 77,164 74,186 L 63,205 L 63,227 L 83,236 C 89,234 96,233 104,233 C 112,233 123,234 131,237 C 138,241 143,248 146,252 C 150,257 152,261 152,265 L 176,275 L 244,206 L 243,183 L 243,183 C 240,181 237,180 234,178 C 231,176 228,174 226,172 C 250,174 270,175 288,174 C 305,173 317,171 329,168 C 341,165 352,161 358,158 C 363,155 365,154 364,152 C 363,149 361,149 351,144 C 340,139 316,129 302,123 C 289,117 279,113 271,111 L 271,101 L 249,92 L 249,78 L 46,0 C 30,11 15,22 0,34 z",
"M 34,168 L 104,168 L 121,123 L 121,70 C 121,63 97,58 97,62 L 97,78 L 97,54 C 97,50 73,47 73,54 L 73,72 L 73,8 C 67,-2 50,2 50,8 L 50,73 L 50,54 C 50,48 26,48 26,54 L 26,104 L 26,78 C 26,71 3,71 3,78 L 3,105 L 34,168 z"
];
for(var lcv=0; lcv< plot1.length; lcv++){
plot1.add(new Splatter.ShapeNode({
path :nodes[Math.floor(Math.random()*nodes.length)]
}));
}
</script>
<script>
//*
var plot2 = new Splatter.Plot({
selector: '#panel_two',
shells: 5,
radius: 50,
offset: 10,
spacing: 30,
margin: 20
});
var images = [
"images/ladmo.png",
"images/dobbs.png",
"images/turtles.png"
];
for(var lcv=0; lcv< plot2.length; lcv++){
plot2.add(new Splatter.ImageNode({
src :images[Math.floor(Math.random()*images.length)]
}));
}//*/
</script>
<script>
//*
var plot3 = new Splatter.Plot({
selector: '#panel_three',
shells: 25,
radius: 5,
offset: 10,
spacing: 10,
margin: 5,
nonSequential : 'shell'
});
for(var lcv=0; lcv< plot3.length/10; lcv++){
plot3.add(new Splatter.ShapeNode({
path : "M 46,51 L 31,42 L 17,51 L 22,35 L 8,24 L 25,23 L 31,7 L 38,23 L 55,24 L 41,35 L 46,51 z"
}));
}//*/
</script>
<script>
//*
var plot4 = new Splatter.Plot({
selector: '#panel_four',
shells: 25,
radius: 5,
offset: 10,
spacing: 10,
margin: 5,
nonSequential : 'even'
});
for(var lcv=0; lcv< plot4.length/5; lcv++){
plot4.add(new Splatter.ShapeNode({
path : "M 46,51 L 31,42 L 17,51 L 22,35 L 8,24 L 25,23 L 31,7 L 38,23 L 55,24 L 41,35 L 46,51 z"
}));
}//*/
</script>
<br/>© 2010 -2018 Abbey Hawk Sparrow
</body>
</html>