Skip to content

Instantly share code, notes, and snippets.

@gistlyn

gistlyn/_layout.html

Last active June 25, 2020 06:55
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 gistlyn/4e06df1f1b9099526a7c97721aa7f69c to your computer and use it in GitHub Desktop.
Save gistlyn/4e06df1f1b9099526a7c97721aa7f69c to your computer and use it in GitHub Desktop.
Download ZIP
Explore and generate different Spirals with SVG
Raw
_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<style>
body {
background-color:white;
color:#000000;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
margin: 0;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
a {
color: #428bca;
text-decoration: none;
}
a:hover, a:focus {
color: #2a6496;
opacity: 0.8;
}
body, textarea, input, table, td {
font-size: 18px;
}
#body {
padding: 1rem;
}
</style>
</head>
<body>
<i hidden>{{ '/js/hot-fileloader.js' |> ifDebugIncludeScript }}</i>
{{ 'menu' |> partial({
'/': 'Home',
'/multi': 'Multi',
'/animated': 'Animated',
'/metadata': '/metadata',
})
}}
<div id="body" class="container">
<h2>Having fun with spirals...</h2>
{{ page }}
</div>
{{ scripts |> raw }}
</body>
</html>
Raw
_menu-partial.html
<style>
.navbar {
color: #FFF;
font-size: 22px;
font-weight: normal;
margin: 0;
padding: 0 0 0 0;
line-height: 60px;
min-height: 60px;
border-radius: 0px;
border-bottom: 1px solid #191e23;
background: #2c3742; /* Old browsers */
background: linear-gradient(to bottom, #2c3742 0%,#28303a 100%); /* W3C */
}
.navbar-nav {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 18px;
display: inline-block;
}
.navbar a.title, .navbar a.title:hover {
color: #fff;
padding-right: 1em;
opacity: 1;
padding: 0 0 0 35px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3e%3cpath fill='white' d='M88 216c81.7 10.2 273.7 102.3 304 232H0c99.5-8.1 184.5-137 88-232zm32-152c32.3 35.6 47.7 83.9 46.4 133.6C249.3 231.3 373.7 321.3 400 448h96C455.3 231.9 222.8 79.5 120 64z'%3e%3c/path%3e%3c/svg%3e");
background-repeat: no-repeat;
}
.navbar-nav li {
display: inline-block;
padding: 0 0 0 1rem;
}
.navbar a,.navbar a:hover {
color: #aaa;
}
.navbar li.active a {
color: #fff;
}
</style>
<div class="navbar">
<div class="container">
<a class="title" href="/">{{ hostServiceName }}</a>
<ul class="navbar-nav">
{{#each it.ownProps()}}
<li {{ {active: matchesPathInfo(Key)} |> htmlClass }}>
<a class="nav-link" href="{{Key}}">{{Value}}</a>
</li>
{{/each}}
</ul>
</div>
</div>
Raw
animated.html
{{ var from = (qs.from ?? 1).toInt() }}
<div style="text-align:right;margin:-54px 0 30px 0">
{{#if from > 1}} <a href="?from={{ max(from-1,0) }}" title="{{max(from-1,0)}}">previous</a> |{{/if}}
{{from}} | <a href="?from={{ from+1 }}" title="{{max(from-1,0)}}">next</a>
</div>
{{#each i in range(from, 4) }}
<svg height="640" width="240">
{{#each range(180) }}
{{ var x = 120 + 100 * cos((5) * it * 0.02827) }}
{{ var y = 320 + 300 * sin((1+i) * it * 0.02827) }}
<circle cx="{{x}}" cy="{{y}}" r="{{it*0.1}}" fill="rgb(0,{{it*1.4}},0)" stroke="black" stroke-width="1">
<animate attributeName="fill" values="green;yellow;red;green" dur="{{it%10}}s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;.5;1" dur="5s" repeatCount="indefinite" />
<animate attributeName="cx" values="{{x}};{{x*1.02}};{{x*0.98}};{{x}}" dur="3s" repeatCount="indefinite" />
<animate attributeName="cy" values="{{y}};{{y*1.02}};{{y*0.98}};{{y}}" dur="3s" repeatCount="indefinite" />
</circle>
{{/each}}
</svg>
{{/each}}
<div>
Jump to favorites:
{{#each [1,221,441,445,665,885,889,1109,1329,1333,1553,1665,1777,1997,2001,2217,2221,2441] }}
{{#if index > 0}} | {{/if}} {{#if from == it }} {{it}} {{else}} <a href="?from={{it}}">{{it}}</a> {{/if}}
{{/each}}
</div>
Raw
app.settings
debug true
name Spirals
CefConfig { width:1150, height:1050 }
appName spirals
description Explore and generate different Spirals with SVG
tags svg
Raw
index.html
{{ var from = (qs.from ?? 1).toInt() }}
<div style="text-align:right;margin:-54px 0 30px 0">
{{#if from > 1}} <a href="?from={{ max(from-1,0) }}" title="{{max(from-1,0)}}">previous</a> |{{/if}}
{{from}} | <a href="?from={{ from+1 }}" title="{{max(from-1,0)}}">next</a>
</div>
<svg height="640" width="240">
{{#each range(180) }}
{{ var x = 120 + 100 * cos((5) * it * 0.02827) }}
{{ var y = 320 + 300 * sin((from) * it * 0.02827) }}
<circle cx="{{x}}" cy="{{y}}" r="10" fill="rgb(0,100,0)" stroke="black" stroke-width="1"></circle>
{{/each}}
</svg>
<svg height="640" width="240">
{{#each range(180) }}
{{ var x = 120 + 100 * cos((5) * it * 0.02827) }}
{{ var y = 320 + 300 * sin((from) * it * 0.02827) }}
<circle cx="{{x}}" cy="{{y}}" r="10" fill="rgb(0,{{it*1.4}},0)" stroke="black" stroke-width="1"></circle>
{{/each}}
</svg>
<svg height="640" width="240">
{{#each range(180) }}
{{ var x = 120 + 100 * cos((5) * it * 0.02827) }}
{{ var y = 320 + 300 * sin((from) * it * 0.02827) }}
<circle cx="{{x}}" cy="{{y}}" r="{{it*0.1}}" fill="rgb(0,{{it*1.4}},0)" stroke="black" stroke-width="1"></circle>
{{/each}}
</svg>
<div>
Jump to favorites:
{{#each [1,5,101,221,222,224,298,441,443,558,663,665,666,783,888] }}
{{#if index > 0}} | {{/if}} {{#if from == it }} {{it}} {{else}} <a href="?from={{it}}">{{it}}</a> {{/if}}
{{/each}}
</div>
Raw
multi.html
{{ var from = (qs.from ?? 1).toInt() }}
<div style="text-align:right;margin:-54px 0 30px 0">
{{#if from > 1}} <a href="?from={{ max(from-4,0) }}" title="{{max(from-1,0)}}">previous</a> |{{/if}}
{{from}} | <a href="?from={{ from+4 }}" title="{{max(from-1,0)}}">next</a>
</div>
{{#each i in range(from, 4) }}
<svg height="640" width="240">
{{#each range(180) }}
{{ var x = 120 + 100 * cos((5) * it * 0.02827) }}
{{ var y = 320 + 300 * sin((1+i) * it * 0.02827) }}
<circle cx="{{x}}" cy="{{y}}" r="{{it*0.1}}" fill="rgb(0,{{it*1.4}},0)" stroke="black" stroke-width="1"></circle>
{{/each}}
</svg>
{{/each}}
<div>
Jump to favorites:
{{#each [1,221,441,445,665,885,889,1109,1329,1333,1553,1665,1777,1997,2001,2217,2221,2441] }}
{{#if index > 0}} | {{/if}} {{#if from == it }} {{it}} {{else}} <a href="?from={{it}}">{{it}}</a> {{/if}}
{{/each}}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment