Skip to content

Instantly share code, notes, and snippets.

@msurguy

msurguy/mandalas.html

Forked from u840903/mandalas.html
Created September 25, 2020 17:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msurguy/c6b1626f4697c1f474329a8d535a6a75 to your computer and use it in GitHub Desktop.
Save msurguy/c6b1626f4697c1f474329a8d535a6a75 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mandalas.html
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.494db61b6ee6b0adfe5f.css">.comments-module--comments--23mG5{padding:91.125px}.comments-module--comments--23mG5 h1{text-transform:uppercase;font-family:sans-serif;font-size:12px}.comments-module--comment--29KbI{font-size:18px;line-height:1.5em;margin-bottom:136.6875px;display:block}.comments-module--comment--29KbI p{max-width:540px}.comments-module--comment--29KbI h1,.comments-module--comment--29KbI h2,.comments-module--comment--29KbI h3,.comments-module--comment--29KbI pre{font-size:18px}.comments-module--header--3yRmu{display:block;text-transform:uppercase;font-family:sans-serif;font-size:12px}.comments-module--user--1iX8T{font-weight:700;color:#000}body,html{margin:0;padding:0;width:100%;height:100%}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1em}.index-module--page--3hrmN{padding-bottom:91.125px}@media only screen and (max-width:740px){.index-module--page--3hrmN{padding:18px}}.button-module--button--38F6g{background:#000;color:#fff;padding:.618em 1em;border-radius:3px;text-decoration:none;font-family:monospace;text-transform:uppercase;font-weight:700}.tagList-module--tagList--2fcx1{padding:91.125px 91.125px 0;font-size:18px;line-height:1.5em;display:block}@media only screen and (max-width:740px){.tagList-module--tagList--2fcx1{padding:18px}}.tagList-module--tagList--2fcx1 ul{list-style-type:circle}.navigation-module--postList--3EdaB{padding:91.125px 91.125px 0;font-size:18px;line-height:1.5em;display:block}@media only screen and (max-width:740px){.navigation-module--postList--3EdaB{padding:18px}}.post-module--post--3bj6H{padding:91.125px 91.125px 0;font-size:18px;line-height:1.5em;display:block}@media only screen and (max-width:740px){.post-module--post--3bj6H{padding:18px}}.post-module--post--3bj6H>p,.post-module--post--3bj6H div>*{max-width:540px}.post-module--post--3bj6H div,.post-module--post--3bj6H div>pre{max-width:none}.post-module--post--3bj6H .post-module--lead--1xeKF{font-style:italic}.post-module--post--3bj6H .post-module--source--2zJRw{font-weight:700}.post-module--post--3bj6H p{margin-bottom:27px}.post-module--post--3bj6H blockquote:before{content:"\201C";font-size:91.125px;line-height:91.125px;font-family:Georgia;height:60.75px;display:block}.post-module--post--3bj6H blockquote cite{display:block}.post-module--post--3bj6H img{max-width:100%}.post-module--postMini--2GfW_{padding:0 91.125px;margin-bottom:27px;display:block;max-width:540px}@media only screen and (max-width:740px){.post-module--postMini--2GfW_{padding:0 18px}}.post-module--postMini--2GfW_ h1{font-size:18px;margin:0}.post-module--postMini--2GfW_ h1 a{color:#000;text-decoration:none}.post-module--postMini--2GfW_ span{font-size:12px;color:#000;text-transform:uppercase;font-family:monospace}.post-module--postMini--2GfW_ p{font-size:18px;margin:0;padding-bottom:18px}iframe{border:0;min-width:100%!important;max-width:100%!important;overflow:hidden}p del{background:#000;text-decoration:none}p del::-moz-selection{background-color:#000;color:#fff}p del::selection{background-color:#000;color:#fff}.post-module--post--3bj6H h2{font-size:18px;margin-top:72px}p a,p a:visited{color:#00f}blockquote{margin:1.618em 0}blockquote p{margin:0}blockquote footer a{font-style:normal}.post-module--post--3bj6H table{border:1px solid #eee;border-collapse:collapse;margin:0;padding:0;width:100%;table-layout:fixed;font-size:13px;line-height:15px;font-family:monospace}table tr{background:#f7f7f7}table td,table th{padding:.618em 1.618em}table tr:nth-child(2){background:#fefefe}table thead tr{background:#eee}table th{text-align:left}.gatsby-resp-image-link{max-width:540px!important}code[class*=language-],pre[class*=language-]{padding:0;color:#000;font-family:monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;font-size:18px;line-height:1.2em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}@media only screen and (max-width:500px){code[class*=language-],pre[class*=language-]{font-size:12px}}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{background:#c1def1}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{background:#c1def1}pre[class*=language-]{margin:.5em 0;overflow:auto;background-color:#fff}:not(pre)>code[class*=language-]{padding:1px .2em;background:#f8f8f8;border:1px solid #ddd}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:green;font-style:italic}.token.namespace{opacity:.7}.pl-s,.token.string{color:#a31515}.token.operator,.token.punctuation{color:#393a34}.pl-c1,.token.boolean,.token.constant,.token.inserted,.token.number,.token.symbol,.token.url,.token.variable{color:#36acaa}.language-autohotkey .token.selector,.language-json .token.boolean,.language-json .token.number,.pl-k,.token.atrule,.token.attr-value,.token.keyword,code[class*=language-css]{color:#00f}.token.function{color:#393a34}.language-autohotkey .token.tag,.token.deleted{color:#9a050f}.language-autohotkey .token.keyword,.token.selector{color:#00009f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.language-json .token.property,.token.class-name{color:#2b91af}.token.selector,.token.tag{color:maroon}.token.attr-name,.token.entity,.token.property,.token.regex{color:red}.token.directive.tag .tag{background:#ff0;color:#393a34}.line-numbers .line-numbers-rows{border-right-color:#a5a5a5}.line-numbers-rows>span:before{color:#2b91af}.line-highlight{background:rgba(193,222,241,.2);background:-webkit-gradient(linear,left top,right top,color-stop(70%,rgba(193,222,241,.2)),to(rgba(221,222,241,0)));background:linear-gradient(90deg,rgba(193,222,241,.2) 70%,rgba(221,222,241,0))}.heading-module--heading--3lYjE{font-size:40.5px;line-height:1.2em;max-width:540px}.heading-module--heading--3lYjE a{text-decoration:none;color:#000}@media only screen and (max-width:540px){.heading-module--heading--3lYjE{font-size:27px}}.postList-module--postList--d2P4A{padding:91.125px 91.125px 0;font-size:18px;line-height:1.5em;display:block}@media only screen and (max-width:740px){.postList-module--postList--d2P4A{padding:18px}}</style><meta name="generator" content="Gatsby 2.13.50"/><title data-react-helmet="true">Multiplication Table Based Mandalas Generator</title><link data-react-helmet="true" rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/><link data-react-helmet="true" rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/><meta data-react-helmet="true" name="description" content="My tool for creating multiplication table based mandalas."/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/><style type="text/css">.gatsby-resp-image-image{width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;color:transparent;}</style><script>window.dataLayer = window.dataLayer || [];window.dataLayer.push({"platform":"gatsby"}); (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', 'GTM-NL88NJ7');</script><link as="script" rel="preload" href="/webpack-runtime-009f4abb32f9f3c5733e.js"/><link as="script" rel="preload" href="/app-6e97e7a34e9829263fd3.js"/><link as="script" rel="preload" href="/styles-5a0a8e42646d85946437.js"/><link as="script" rel="preload" href="/1-7d629d2109dfb29457f9.js"/><link as="script" rel="preload" href="/2-322197485969064818ac.js"/><link as="script" rel="preload" href="/component---src-templates-post-js-31804482ca67c8bde708.js"/><link as="fetch" rel="preload" href="/page-data/mandalas/page-data.json" crossorigin="use-credentials"/></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NL88NJ7" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><div class="index-module--page--3hrmN"><div class="post-module--post--3bj6H"><h1 class="heading-module--heading--3lYjE"><a aria-current="page" class="" href="/mandalas/">Multiplication Table Based Mandalas Generator</a></h1><div><p>Inspired by Mathologer’s video <a href="https://www.youtube.com/watch?v=qhbuKbxJsk8">Times Tables, Mandelbrot and the Heart of Mathematics</a> I have done a lot of <a href="https://www.instagram.com/janjarfalk/?hl=en">mandala</a>-like drawings on my <a href="https://shop.evilmadscientist.com/productsmenu/890">Axidraw A3/V3</a> plotter.</p>
<p>Almost all my pieces are generated using the Javascript tool below I created. The source code is on <a href="https://github.com/janjarfalk/multiplication-mandalas">Github</a>.</p>
<p>Play around with the sliders or try these configurations
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=2&start=50&end=100&modulo=360&rotation=0&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=0" target="mandalas">Wave</a>,
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=842&start=33.3&end=66.8&modulo=1260&rotation=-90&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=0" target="mandalas">Lighthouse</a>,
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=720&start=0&end=100&modulo=360&rotation=90&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=0" target="mandalas">Sunrise</a>,
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=466&start=0&end=100&modulo=838&rotation=90&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=0" target="mandalas">Lotus Flower</a>,
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=241&start=0&end=100&modulo=720&rotation=0&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=0" target="mandalas">Ring</a>,
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=3&start=0&end=100&modulo=360&rotation=0&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=1" target="mandalas">Overlapping Cardioids</a>,
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=6&start=0&end=100&modulo=360&rotation=0&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=1" target="mandalas">Flower</a>,
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html#table=51&start=0&end=100&modulo=414&rotation=0&minLength=0&keepEveryNLines=1&keepEveryNLinesShift=0&center=1" target="mandalas">Flower II</a>.
<a href="https://jan.jarfalk.se/multiplication-mandalas/index.html" target="mandalas">Reset</a>.</p>
<iframe name="mandalas" src="https://jan.jarfalk.se/multiplication-mandalas/index.html" height="699"></iframe></div></div><div class="tagList-module--tagList--2fcx1"><h2>Keywords</h2><ul><li><a href="/experiments">experiments</a></li><li><a href="/js">js</a></li><li><a href="/plotter">plotter</a></li></ul></div><div class="navigation-module--postList--3EdaB"><h1>Navigation</h1><ul><li><a href="/">Home</a></li><li><a href="https://twitter.com/janjarfalk">Twitter</a> ↪</li><li><a href="https://www.instagram.com/janjarfalk">Instagram</a> ↪</li></ul></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/mandalas/";window.webpackCompilationHash="fb43d5dc3c2def475329";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-6e97e7a34e9829263fd3.js"],"component---src-templates-post-js":["/component---src-templates-post-js-31804482ca67c8bde708.js"],"component---src-templates-tag-js":["/component---src-templates-tag-js-20a987e46b370e8df970.js"],"component---src-pages-index-js":["/component---src-pages-index-js-717ef3d14bcf7f847354.js"],"component---src-pages-404-js":["/component---src-pages-404-js-5e79e7ca9dbec20d1730.js"]};/*]]>*/</script><script src="/component---src-templates-post-js-31804482ca67c8bde708.js" async=""></script><script src="/2-322197485969064818ac.js" async=""></script><script src="/1-7d629d2109dfb29457f9.js" async=""></script><script src="/styles-5a0a8e42646d85946437.js" async=""></script><script src="/app-6e97e7a34e9829263fd3.js" async=""></script><script src="/webpack-runtime-009f4abb32f9f3c5733e.js" async=""></script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment