Migrate aether post from 01441890152
This commit is contained in:
parent
ff7a3c7765
commit
0e532f7ebb
1 changed files with 178 additions and 0 deletions
|
|
@ -0,0 +1,178 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
title: "Super Formula Guilloché Patterns in javascript/svg"
|
||||||
|
redirect_from:
|
||||||
|
- /01441890152
|
||||||
|
---
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Super Formula Guilloché Patterns in javascript/svg</title>
|
||||||
|
<link rel="stylesheet" href="https://media.unpythonic.net/css/bootstrap.min.css">
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
#mask {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background-color: #000;
|
||||||
|
opacity: 0.7;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 58px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: black;
|
||||||
|
background-image: url('https://media.unpythonic.net/img/loading.gif');
|
||||||
|
opacity: 0.9;
|
||||||
|
z-index: 20;
|
||||||
|
display: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bigimg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#maskouter {
|
||||||
|
height: 100%;
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#maskinner {
|
||||||
|
vertical-align: middle;
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgleft, #imgright {
|
||||||
|
cursor: pointer;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: black;
|
||||||
|
z-index: 22;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgleft {
|
||||||
|
left: 0;
|
||||||
|
background-image: url('https://media.unpythonic.net/img/prevbtn.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgleft.disabled, #imgright.disabled { display: none; }
|
||||||
|
|
||||||
|
#imgright {
|
||||||
|
right: 0;
|
||||||
|
background-image: url('https://media.unpythonic.net/img/nextbtn.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgdesc {
|
||||||
|
position: fixed;
|
||||||
|
left: 64px;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #333;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
padding-left: 2em;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgdesc .filename {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgdesc .description {
|
||||||
|
color: #fff;
|
||||||
|
padding-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mask { z-index: 10990; }
|
||||||
|
#loading { z-index: 10991; }
|
||||||
|
#bigimg { z-index: 10992; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" src="https://media.unpythonic.net/js/jquery-1.6.4.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://media.unpythonic.net/js/bootstrap-dropdown.js"></script>
|
||||||
|
<script type="text/javascript" src="https://media.unpythonic.net/js/jquery.mousewheel.js"></script>
|
||||||
|
<script type="text/javascript" src="https://media.unpythonic.net/js/jquery.ba-hashchange.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://media.unpythonic.net/js/jquery.mobile.custom.min.js"></script>
|
||||||
|
<script type="text/javascript" src="https://media.unpythonic.net/js/gallery.js"></script>
|
||||||
|
<style><!--
|
||||||
|
div.floatimageleft, div.floatimageright {
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 2px;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
div.floatimageleft { clear: left; float: left; }
|
||||||
|
div.floatimageright { clear: right; float: right; }
|
||||||
|
div.floatimageleft img, div.floatimageright img { border: 0px; }
|
||||||
|
|
||||||
|
div.floatimageleft img.zoom, div.floatimageright img.zoom {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
--></style>
|
||||||
|
<style><!--
|
||||||
|
div.albumouter {
|
||||||
|
margin-right: 1ex;
|
||||||
|
margin-top: 1ex;
|
||||||
|
vertical-align: baseline;
|
||||||
|
display: -moz-inline-box;
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album { display: block; clear: both; }
|
||||||
|
|
||||||
|
.album a:link, .album a:hover, .album a:visited
|
||||||
|
{ text-decoration: none; }
|
||||||
|
.album a:hover { color: red; }
|
||||||
|
|
||||||
|
.albumimage {
|
||||||
|
display: block;
|
||||||
|
padding-left: 2px; padding-right: 2px;
|
||||||
|
padding-top: 3px; padding-bottom: 3px;
|
||||||
|
background: #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.albumimage img.zoom {
|
||||||
|
margin-left: 0px; margin-right: 0px;
|
||||||
|
padding-top: 4px; padding-right: 4px; }
|
||||||
|
.albumimage img { border: 0px;
|
||||||
|
display: block; margin-left: auto; margin-right:auto
|
||||||
|
}
|
||||||
|
--></style>
|
||||||
|
|
||||||
|
<!-- no summary found -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="float:right;clear:right"><!-- sufo.jpg--><div class=albumouter style=width:306px id=><div class=albumimage style="width:306px;margin-left:0px;"><a href="https://media.unpythonic.net/emergent-files/01441890152/sufo-medium.jpg" class="thickbox" rel="album" title="One possible pattern"><img src="https://media.unpythonic.net/emergent-files/01441890152/sufo-small.jpg" width=300 height=300></a><div ><div style="float: right" ><a href="https://media.unpythonic.net/emergent-files/01441890152/sufo-medium.jpg">(M)</a><a href="https://media.unpythonic.net/emergent-files/01441890152/sufo.jpg">(L)</a></div><a href="https://media.unpythonic.net/emergent-files/01441890152/sufo.jpg">One possible pattern</a></div></div></div>
|
||||||
|
</div>
|
||||||
|
I made <a href="http://media.unpythonic.net/sufograph/">this little graphical
|
||||||
|
toy</a> last month. I had intended to put a few finishing touches on it before
|
||||||
|
blogging about it, but instead it has languished.
|
||||||
|
|
||||||
|
<p>Enter a few numbers, press "update" and get a geometric pattern.
|
||||||
|
|
||||||
|
<p>Requires a browser that supports svg, which must be most of them by now. I
|
||||||
|
tested on Firefox and Chrome.
|
||||||
|
|
||||||
|
<p>(Updated to actually link to the toy)
|
||||||
|
<br><br><font size=-2>Entry first conceived on 10 September 2015, 13:02 UTC, last modified on 29 February 2016, 22:04 UTC</font>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue