mirror of
https://github.com/jart/cosmopolitan.git
synced 2025-08-09 11:20:30 +00:00
gensvg single file with mk update
gensvg single file with mk update
This commit is contained in:
Theta Nil
parent
81201b793c
commit
e3499c75da
11 changed files with 2 additions and 666 deletions
|
|
@ -1,55 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/1/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local function render()
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local primary = math.random(360)
|
|
||||||
Write('<svg class="canvas" background="hsl('.. primary ..', 50%, 50%)" viewBox="0 0 ' .. xsize .. ' ' .. ysize .. '">')
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>An SVG Canvas</h2>")
|
|
||||||
render()
|
|
||||||
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml([[ Write('<svg class="canvas" viewBox="0 0 ' .. xsize .. ' ' .. ysize .. '">')]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/2">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/2/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
local function render()
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,90%%,90%%);"',
|
|
||||||
seed * 360)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>Add Random Color</h2>")
|
|
||||||
Write("<h4>Refresh for a new random seed</h4>")
|
|
||||||
render()
|
|
||||||
|
|
||||||
Write("seed: " .. seed)
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml(
|
|
||||||
[[local style = string.format('style="background-color: hsl(%s,90%%,90%%);"', seed * 360)]]))
|
|
||||||
Write('</br>')
|
|
||||||
Write(EscapeHtml(
|
|
||||||
[[Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' .. ysize .. '">')]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/1">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/3">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/3/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
|
|
||||||
local function rect(x, y, w, h, rx)
|
|
||||||
return string.format('<rect x="%s" y="%s" width="%s" height="%s" rx="%s">',
|
|
||||||
x, y, w, h, rx)
|
|
||||||
end
|
|
||||||
|
|
||||||
local function writeBlock(i, j)
|
|
||||||
Write('<g class="draw-block">')
|
|
||||||
Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize))
|
|
||||||
Write('</g>')
|
|
||||||
end
|
|
||||||
|
|
||||||
local function render()
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,90%%,90%%);"',
|
|
||||||
seed * 360)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>Add A Grid of SVG Rectangles</h2>")
|
|
||||||
render()
|
|
||||||
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml(
|
|
||||||
[[string.format('<rect x="%s" y="%s" width="%s" height="%s" rx="%s">', x, y, w, h, rx)]]))
|
|
||||||
Write('</br>')
|
|
||||||
Write(EscapeHtml(
|
|
||||||
[[for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/2">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/4">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/4/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
|
|
||||||
local function rect(x, y, w, h, rx)
|
|
||||||
return string.format('<rect x="%s" y="%s" width="%s" height="%s" rx="%s">',
|
|
||||||
x, y, w, h, math.random(5,12))
|
|
||||||
end
|
|
||||||
|
|
||||||
local function writeBlock(i, j)
|
|
||||||
Write('<g class="draw-block">')
|
|
||||||
Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize))
|
|
||||||
Write('</g>')
|
|
||||||
end
|
|
||||||
|
|
||||||
local function render()
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,90%%,90%%);"',
|
|
||||||
seed * 360)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>Randomize Plumpness</h2>")
|
|
||||||
render()
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml(
|
|
||||||
[[string.format('<rect x="%s" y="%s" width="%s" height="%s" rx="%s">', x, y, w, h, math.random(5,15))]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/3">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/5">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/5/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
local sat = 80
|
|
||||||
local light = 60
|
|
||||||
|
|
||||||
local function rect(x, y, w, h, rx)
|
|
||||||
local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"',
|
|
||||||
seed * 360 - 180, sat, light, math.random(100)/100.0)
|
|
||||||
return string.format(
|
|
||||||
'<rect x="%s" y="%s" width="%s" height="%s" rx="%s" %s>', x, y,
|
|
||||||
w, h, math.random(5, 12), style)
|
|
||||||
end
|
|
||||||
|
|
||||||
local function writeBlock(i, j)
|
|
||||||
Write('<g class="draw-block">')
|
|
||||||
Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize))
|
|
||||||
Write('</g>')
|
|
||||||
end
|
|
||||||
|
|
||||||
local function render()
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"',
|
|
||||||
seed * 360, sat, light)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>SVG fill 🙈</h2>")
|
|
||||||
render()
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml(
|
|
||||||
[[string.format('fill="hsla(%s, %s%%, %s%%, %s)"', seed * 360 - 180, sat, light, math.random(100)/100.0))]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/4">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/6">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/6/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
local sat = 80
|
|
||||||
local light = 60
|
|
||||||
|
|
||||||
local function rect(x, y, w, h, rx)
|
|
||||||
local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"',
|
|
||||||
seed * 360 - 180, sat, light, math.random(100)/100.0)
|
|
||||||
return string.format(
|
|
||||||
'<rect x="%s" y="%s" width="%s" height="%s" rx="%s" %s>', x, y,
|
|
||||||
w, h, math.random(5, 12), style)
|
|
||||||
end
|
|
||||||
|
|
||||||
local function writeBlock(i, j)
|
|
||||||
if math.random() < 0.25 then return end
|
|
||||||
Write('<g class="draw-block">')
|
|
||||||
Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, sqsize, sqsize))
|
|
||||||
Write('</g>')
|
|
||||||
end
|
|
||||||
|
|
||||||
local function render()
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"',
|
|
||||||
seed * 360, sat, light)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>Let's Skip Some</h2>")
|
|
||||||
render()
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml(
|
|
||||||
[[if math.random() < 0.25 then return end]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/5">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/7">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/7/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
local sat = 80
|
|
||||||
local light = 60
|
|
||||||
|
|
||||||
local function rect(x, y, w, h, rx)
|
|
||||||
local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"',
|
|
||||||
seed * 360 - 180, sat, light,
|
|
||||||
math.random(100) / 100.0)
|
|
||||||
return string.format(
|
|
||||||
'<rect x="%s" y="%s" width="%s" height="%s" rx="%s" %s>', x, y,
|
|
||||||
w, h, math.random(5, 12), style)
|
|
||||||
end
|
|
||||||
|
|
||||||
local function writeBlock(i, j)
|
|
||||||
if math.random() < 0.25 then return end
|
|
||||||
local cellsize = (math.random() > 0.25) and sqsize or 3 * sqsize
|
|
||||||
Write('<g class="draw-block">')
|
|
||||||
Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, cellsize, cellsize))
|
|
||||||
Write('</g>')
|
|
||||||
end
|
|
||||||
|
|
||||||
local function render()
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"',
|
|
||||||
seed * 360, sat, light)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>Embiggen Some</h2>")
|
|
||||||
Write('<code>')
|
|
||||||
Write('</code>')
|
|
||||||
render()
|
|
||||||
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml([[local cellsize = (math.random() > 0.25) and sqsize or 3 * sqsize]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/6">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/8">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/8/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
local sat = 80
|
|
||||||
local light = 60
|
|
||||||
|
|
||||||
local function rect(x, y, w, h, rx)
|
|
||||||
local style = string.format('fill="hsla(%s, %s%%, %s%%, %s)"',
|
|
||||||
seed * 360 - 180, sat, light,
|
|
||||||
math.random(100) / 100.0)
|
|
||||||
return string.format(
|
|
||||||
'<rect x="%s" y="%s" width="%s" height="%s" rx="%s" %s>', x, y,
|
|
||||||
w, h, math.random(5, 12), style)
|
|
||||||
end
|
|
||||||
|
|
||||||
local function writeBlock(i, j)
|
|
||||||
if math.random() < 0.25 then return end
|
|
||||||
local cellsize = (math.random() > 0.25) and sqsize or 3 * sqsize
|
|
||||||
Write('<g class="draw-block">')
|
|
||||||
Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, cellsize, cellsize))
|
|
||||||
Write('</g>')
|
|
||||||
end
|
|
||||||
|
|
||||||
local function render()
|
|
||||||
nrows = nrows * 5
|
|
||||||
ncols = ncols * 5
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"',
|
|
||||||
seed * 360, sat, light)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>Zoom Out</h2>")
|
|
||||||
Write('<code>')
|
|
||||||
Write('</code>')
|
|
||||||
render()
|
|
||||||
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml([[nrows = nrows * 5]]))
|
|
||||||
Write('</br>')
|
|
||||||
Write(EscapeHtml([[ncols = ncols * 5]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/7">Back</a>')
|
|
||||||
Write('<a class="button" href="/gensvg/9">Next</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
local top = [[
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang=en>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="description">
|
|
||||||
<style>
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;}
|
|
||||||
body {margin: 0 auto;font-family: Roboto, Helvetica, Arial, sans-serif;color: #444444;line-height: 1;max-width: 960px;padding: 30px;}
|
|
||||||
h1, h2, h3, h4 {color: #111111;font-weight: 400;}
|
|
||||||
h1, h2, h3, h4, h5, p {margin-bottom: 24px;padding: 0;}
|
|
||||||
h1 {font-size: 48px;}
|
|
||||||
h2 {font-size: 36px;margin: 24px 0 6px;}
|
|
||||||
.button {min-height:1rem;border: none;border-radius: 0.25rem;background: #1E88E5;color: white;font-family: sans-serif;font-size: 1rem;line-height: 1.2;white-space: nowrap;text-decoration: none;padding: 0.25rem 0.5rem;margin: 0.25rem;cursor: pointer;}
|
|
||||||
body {height: 100vh;display: grid;place-items: center;background: hsl(0, 0%, 93%);}
|
|
||||||
.canvas {width: 75vmin;height: 75vmin;background: hsl(350, 70%, 80%);}
|
|
||||||
.shadow {filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, .25));}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local bottom = [[
|
|
||||||
<a href="https://github.com/jart/cosmopolitan/tree/master/tool/net/demo/gensvg/9/index.lua">Show The Code</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
]]
|
|
||||||
|
|
||||||
local nrows = 10
|
|
||||||
local ncols = 10
|
|
||||||
local sqsize = 20
|
|
||||||
local seed = math.random()
|
|
||||||
local sat = 80
|
|
||||||
local light = 70
|
|
||||||
|
|
||||||
local function rect(x, y, w, h, rx)
|
|
||||||
local style = string.format('class="shadow" fill="hsla(%s, %s%%, %s%%, %s)"',
|
|
||||||
seed * 360 - 180, sat, light,
|
|
||||||
math.random(100) / 100.0)
|
|
||||||
return string.format(
|
|
||||||
'<rect x="%s" y="%s" width="%s" height="%s" rx="%s" %s>', x, y,
|
|
||||||
w, h, math.random(5, 12), style)
|
|
||||||
end
|
|
||||||
|
|
||||||
local function writeBlock(i, j)
|
|
||||||
if math.random() < 0.45 then return end
|
|
||||||
local cellsize = (math.random() > 0.25) and sqsize or math.random(1,4) * sqsize
|
|
||||||
Write('<g class="draw-block">')
|
|
||||||
Write(rect(i * sqsize - sqsize, j * sqsize - sqsize, cellsize, cellsize))
|
|
||||||
Write('</g>')
|
|
||||||
end
|
|
||||||
|
|
||||||
local function render()
|
|
||||||
nrows = nrows * 3
|
|
||||||
ncols = ncols * 3
|
|
||||||
local xsize = nrows * sqsize
|
|
||||||
local ysize = ncols * sqsize
|
|
||||||
local style = string.format('style="background-color: hsl(%s,%s%%,%s%%);"',
|
|
||||||
seed * 360, sat, light)
|
|
||||||
Write('<svg class="canvas" ' .. style .. ' viewBox="0 0 ' .. xsize .. ' ' ..
|
|
||||||
ysize .. '">')
|
|
||||||
for i = 1, nrows, 1 do for j = 1, ncols, 1 do writeBlock(i, j) end end
|
|
||||||
Write('</svg>')
|
|
||||||
end
|
|
||||||
|
|
||||||
Write(top)
|
|
||||||
Write("<h2>CSS drop-shadow filter</h2>")
|
|
||||||
Write('<code>')
|
|
||||||
Write('</code>')
|
|
||||||
render()
|
|
||||||
|
|
||||||
Write('<code>')
|
|
||||||
Write(EscapeHtml([[.shadow { filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .25)); }]]))
|
|
||||||
Write('</code>')
|
|
||||||
Write('<div>')
|
|
||||||
Write('<a class="button" href="/gensvg/8">Back</a>')
|
|
||||||
Write('</div>')
|
|
||||||
Write(bottom)
|
|
||||||
|
|
@ -193,6 +193,7 @@ o/$(MODE)/tool/net/demo/closedsource.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/printpayload.lua.zip.o \
|
o/$(MODE)/tool/net/demo/printpayload.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/redbean-form.lua.zip.o \
|
o/$(MODE)/tool/net/demo/redbean-form.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/redbean-xhr.lua.zip.o \
|
o/$(MODE)/tool/net/demo/redbean-xhr.lua.zip.o \
|
||||||
|
o/$(MODE)/tool/net/demo/gensvg.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/redbean.png.zip.o \
|
o/$(MODE)/tool/net/redbean.png.zip.o \
|
||||||
o/$(MODE)/tool/net/favicon.ico.zip.o \
|
o/$(MODE)/tool/net/favicon.ico.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/404.html.zip.o: \
|
o/$(MODE)/tool/net/demo/404.html.zip.o: \
|
||||||
|
|
@ -245,6 +246,7 @@ o/$(MODE)/tool/net/redbean-demo.com.dbg: \
|
||||||
o/$(MODE)/tool/net/demo/crashreport.lua.zip.o \
|
o/$(MODE)/tool/net/demo/crashreport.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/closedsource.lua.zip.o \
|
o/$(MODE)/tool/net/demo/closedsource.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/printpayload.lua.zip.o \
|
o/$(MODE)/tool/net/demo/printpayload.lua.zip.o \
|
||||||
|
o/$(MODE)/tool/net/đemo/gensvg.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/redbean-form.lua.zip.o \
|
o/$(MODE)/tool/net/demo/redbean-form.lua.zip.o \
|
||||||
o/$(MODE)/tool/net/demo/redbean-xhr.lua.zip.o \
|
o/$(MODE)/tool/net/demo/redbean-xhr.lua.zip.o \
|
||||||
o/$(MODE)/tool/.zip.o \
|
o/$(MODE)/tool/.zip.o \
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue