-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (104 loc) · 14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<title>parametric.svg – SVG on rocket fuel.</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bower_components/papier/dist/papier-1.1.0.css">
<link rel="stylesheet" href="bower_components/tidy/dist/tidy.invasive.css">
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<body>
<h1 class="center">
<a href="https://github.com/parametric-svg/spec">
<svg id="logo" class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" width="680" height="190"
xmlns:parametric="https://parametric-svg.github.io/v0.2"
>
<defs>
<ref param="stretchDown" parametric:default="0" />
<clipPath id="svg-shadow-clip"><rect x="518"
parametric:width="91 + stretchOut"
width="91"
parametric:height="59 + 2 * stretchDown"
height="59"
parametric:y="68 - stretchDown"
y="68"
/></clipPath>
</defs>
<g id="parametric" fill="#4d4d4d">
<path d="m 97.139644,125.51104 c -8.35048,-10e-6 -14.438657,-3.12726 -18.264544,-9.38179 l -0.349322,0 0.149709,4.19186 c 0.133061,2.46189 0.199599,5.15666 0.199613,8.08431 l 0,20.65988 -4.940408,0 0,-78.79701 4.191861,0 0.948159,7.73498 0.299419,0 c 3.726081,-5.85525 9.681183,-8.78289 17.865313,-8.78295 7.319086,6e-5 12.891586,2.41204 16.717536,7.23595 3.85913,4.79075 5.78871,11.77718 5.78877,20.95931 -6e-5,8.91604 -2.02945,15.83593 -6.08818,20.7597 -4.02557,4.8905 -9.53154,7.33575 -16.517926,7.33576 m -0.0998,-4.39148 c 5.555836,0 9.847496,-2.06266 12.874996,-6.18799 3.06068,-4.12531 4.59104,-9.89743 4.59109,-17.31638 -5e-5,-15.93568 -5.75554,-23.90354 -17.266476,-23.90359 -6.32109,5e-5 -10.96207,1.74666 -13.92297,5.23983 -2.960931,3.45999 -4.441388,9.11567 -4.441374,16.96706 l 0,1.5969 c -1.4e-5,8.48355 1.413906,14.53845 4.241764,18.16473 2.86109,3.6263 7.50208,5.43944 13.92297,5.43944"/>
<path d="m 161.56934,124.51297 -1.24757,-8.58333 -0.39923,0 c -2.72807,3.49322 -5.53928,5.97174 -8.43363,7.43556 -2.86114,1.43056 -6.25454,2.14583 -10.18023,2.14584 -5.32302,-10e-6 -9.46497,-1.36402 -12.42588,-4.09206 -2.96092,-2.72803 -4.44138,-6.50403 -4.44137,-11.32801 -1e-5,-5.28971 2.19573,-9.39839 6.58721,-12.32607 4.42472,-2.92762 10.81232,-4.47461 19.16279,-4.64099 l 10.32995,-0.29941 0,-3.59303 c -4e-5,-5.15661 -1.04801,-9.04905 -3.1439,-11.67733 -2.09596,-2.62818 -5.47274,-3.94229 -10.13033,-3.94234 -5.0236,5e-5 -10.23016,1.39733 -15.61967,4.19186 l -1.84642,-4.29167 c 5.95509,-2.79452 11.84365,-4.19181 17.6657,-4.19186 5.95507,5e-5 10.39645,1.54705 13.32413,4.64099 2.96088,3.09404 4.44133,7.918 4.44138,14.4719 l 0,36.07995 -3.64293,0 m -19.96124,-3.49322 c 5.78873,1e-5 10.34654,-1.64679 13.67345,-4.9404 3.3601,-3.32687 5.04017,-7.93458 5.04022,-13.82317 l 0,-5.33963 -9.4816,0.39923 c -7.61856,0.36598 -13.058,1.56365 -16.31831,3.59302 -3.22708,1.99615 -4.84062,5.1234 -4.84061,9.38179 -1e-5,3.39342 1.03132,6.03828 3.094,7.93459 2.09591,1.86305 5.04019,2.79458 8.83285,2.79457"/>
<path d="m 197.9036,69.22032 c 2.29551,6e-5 4.7574,0.23294 7.38566,0.69865 l -0.94816,4.74079 c -2.26231,-0.56552 -4.60775,-0.8483 -7.03634,-0.84835 -4.62438,5e-5 -8.41701,1.9629 -11.3779,5.88857 -2.96094,3.92575 -4.4414,8.88279 -4.44138,14.87112 l 0,29.94187 -4.94041,0 0,-54.24468 4.19186,0 0.49903,9.78101 0.34932,0 c 2.22899,-3.9922 4.60771,-6.78677 7.13615,-8.38372 2.5284,-1.63012 5.58912,-2.4452 9.18217,-2.44526"/>
<path d="m 243.02081,124.51297 -1.24758,-8.58333 -0.39922,0 c -2.72807,3.49322 -5.53928,5.97174 -8.43363,7.43556 -2.86114,1.43056 -6.25455,2.14583 -10.18023,2.14584 -5.32302,-10e-6 -9.46497,-1.36402 -12.42588,-4.09206 -2.96092,-2.72803 -4.44138,-6.50403 -4.44137,-11.32801 -1e-5,-5.28971 2.19573,-9.39839 6.58721,-12.32607 4.42472,-2.92762 10.81232,-4.47461 19.16279,-4.64099 l 10.32995,-0.29941 0,-3.59303 c -4e-5,-5.15661 -1.04801,-9.04905 -3.1439,-11.67733 -2.09597,-2.62818 -5.47274,-3.94229 -10.13033,-3.94234 -5.0236,5e-5 -10.23016,1.39733 -15.61968,4.19186 l -1.84641,-4.29167 c 5.95509,-2.79452 11.84365,-4.19181 17.6657,-4.19186 5.95507,5e-5 10.39645,1.54705 13.32413,4.64099 2.96088,3.09404 4.44133,7.918 4.44138,14.4719 l 0,36.07995 -3.64293,0 m -19.96124,-3.49322 c 5.78873,1e-5 10.34654,-1.64679 13.67345,-4.9404 3.3601,-3.32687 5.04017,-7.93458 5.04021,-13.82317 l 0,-5.33963 -9.48159,0.39923 c -7.61856,0.36598 -13.058,1.56365 -16.31831,3.59302 -3.22708,1.99615 -4.84062,5.1234 -4.84061,9.38179 -1e-5,3.39342 1.03132,6.03828 3.094,7.93459 2.09591,1.86305 5.04019,2.79458 8.83285,2.79457"/>
<path d="m 325.76496,124.51297 0,-35.58092 c -8e-5,-5.28969 -1.03141,-9.14886 -3.09399,-11.57752 -2.06274,-2.42857 -5.22326,-3.64288 -9.4816,-3.64293 -5.55593,5e-5 -9.66462,1.53041 -12.32606,4.59109 -2.66155,3.06077 -3.9923,7.8681 -3.99225,14.422 l 0,31.78828 -5.04022,0 0,-37.07801 c -4e-5,-9.14886 -4.1919,-13.72331 -12.57558,-13.72336 -5.68898,5e-5 -9.83094,1.66349 -12.42588,4.99031 -2.59497,3.29365 -3.89245,8.58338 -3.89244,15.86919 l 0,29.94187 -4.94041,0 0,-54.24468 4.09206,0 1.04796,7.43556 0.29942,0 c 1.49708,-2.69472 3.62628,-4.77401 6.3876,-6.23789 2.76128,-1.49704 5.80537,-2.24558 9.13227,-2.24564 8.55003,6e-5 14.03936,3.21049 16.46803,9.6313 l 0.19961,0 c 1.76319,-3.09394 4.12527,-5.47265 7.08624,-7.13614 2.99413,-1.66338 6.38754,-2.4951 10.18024,-2.49516 5.92176,6e-5 10.36314,1.58032 13.32413,4.7408 2.96084,3.16058 4.44129,8.18415 4.44137,15.07074 l 0,35.48111 -4.8905,0"/>
<path d="m 363.94564,125.51104 c -7.88472,-10e-6 -14.03943,-2.42862 -18.46415,-7.28586 -4.39148,-4.85722 -6.58722,-11.66068 -6.58721,-20.41037 -10e-6,-8.64984 2.12919,-15.56973 6.3876,-20.7597 4.25838,-5.22314 9.99723,-7.83473 17.21657,-7.83479 6.38756,6e-5 11.42777,2.22906 15.12064,6.68702 3.69278,4.45806 5.5392,10.51296 5.53925,18.16473 l 0,3.99225 -39.07414,0 c 0.0665,7.45222 1.7965,13.14117 5.18992,17.06687 3.42666,3.92571 8.31717,5.88857 14.67152,5.88856 3.09396,1e-5 5.80536,-0.21624 8.13421,-0.64874 2.36204,-0.43248 5.33959,-1.36401 8.93265,-2.79457 l 0,4.49128 c -3.06077,1.33075 -5.88861,2.22901 -8.48353,2.69477 -2.59499,0.49903 -5.4561,0.74854 -8.58333,0.74855 M 362.49845,73.6118 c -5.22322,5e-5 -9.41507,1.73002 -12.57559,5.18992 -3.16054,3.42672 -5.00695,8.38376 -5.53924,14.87113 l 33.53489,0 c -4e-5,-6.28776 -1.36406,-11.19489 -4.09205,-14.72142 -2.72808,-3.55971 -6.50408,-5.33958 -11.32801,-5.33963"/>
<path d="m 406.26826,121.11956 c 3.12724,0 5.85527,-0.26615 8.18411,-0.79845 l 0,3.99225 c -2.39537,0.79845 -5.15668,1.19767 -8.28391,1.19768 -4.79072,-10e-6 -8.33384,-1.28085 -10.62937,-3.84254 -2.26228,-2.56169 -3.39342,-6.58721 -3.39341,-12.07656 l 0,-35.03198 -8.0344,0 0,-2.89438 8.0344,-2.24564 2.49516,-12.27617 2.54506,0 0,13.12452 15.91909,0 0,4.29167 -15.91909,0 0,34.33334 c -2e-5,4.1586 0.73189,7.23596 2.19573,9.23207 1.46381,1.99613 3.75935,2.99419 6.88663,2.99419"/>
<path d="m 441.45475,69.22032 c 2.29551,6e-5 4.75739,0.23294 7.38566,0.69865 l -0.94816,4.74079 c -2.26231,-0.56552 -4.60775,-0.8483 -7.03634,-0.84835 -4.62438,5e-5 -8.41701,1.9629 -11.37791,5.88857 -2.96093,3.92575 -4.44139,8.88279 -4.44137,14.87112 l 0,29.94187 -4.94041,0 0,-54.24468 4.19186,0 0.49903,9.78101 0.34932,0 c 2.22899,-3.9922 4.6077,-6.78677 7.13615,-8.38372 2.5284,-1.63012 5.58912,-2.4452 9.18217,-2.44526"/>
<path d="m 458.5763,124.51297 -4.94041,0 0,-54.24468 4.94041,0 0,54.24468 m -5.63905,-69.31542 c -1e-5,-3.19373 1.04795,-4.79063 3.14389,-4.7907 1.03132,7e-5 1.82977,0.41593 2.39535,1.24758 0.59882,0.83179 0.89824,2.01283 0.89826,3.54312 -2e-5,1.49716 -0.29944,2.6782 -0.89826,3.54312 -0.56558,0.86505 -1.36403,1.29754 -2.39535,1.29748 -2.09594,6e-5 -3.1439,-1.61347 -3.14389,-4.8406"/>
<path d="m 492.2657,125.51104 c -7.75164,-10e-6 -13.82318,-2.44526 -18.21463,-7.33576 -4.39148,-4.8905 -6.58722,-11.71058 -6.58721,-20.46028 -1e-5,-8.98252 2.2789,-15.96895 6.83672,-20.95931 4.5578,-5.02352 10.79569,-7.53531 18.71367,-7.53537 4.69086,6e-5 9.18213,0.81514 13.47384,2.44526 l -1.34738,4.39147 c -4.69093,-1.56358 -8.76635,-2.3454 -12.22627,-2.34545 -6.65377,5e-5 -11.69398,2.06271 -15.12064,6.18799 -3.42669,4.0921 -5.14003,9.99729 -5.14002,17.7156 -10e-6,7.31915 1.71333,13.058 5.14002,17.21658 3.42666,4.12533 8.21736,6.18799 14.3721,6.18798 4.92374,1e-5 9.49818,-0.88161 13.72335,-2.64486 l 0,4.59109 c -3.45999,1.6967 -8.00116,2.54505 -13.62355,2.54506"/>
</g>
<rect id="rectangle" x="518"
parametric:width="91 + stretchOut"
width="91"
parametric:fill="fill"
fill="#9eab05"
parametric:height="59 + 2 * stretchDown"
height="59"
parametric:y="68 - stretchDown"
y="68"
/>
<path id="dimension" fill="none" stroke="#4d4d4d" stroke-linecap="square"
parametric:d=" 'm 518.5,' + (51 - stretchDown)
+ 'l 0,5'
+ 'm 0,-2.5'
+ 'l ' + (90 + stretchOut) + ',0'
+ 'm 0,-2.5'
+ 'l 0,5'
"
d=" m 518.5,51
l 0,5
m 0,-2.5
l 90,0
m 0,-2.5
l 0,5
"
/>
<g id="svg-shadow" clip-path="url(#svg-shadow-clip)">
<g id="shadow" fill-opacity=".2">
<path d="m 535.13281,92.038798 -0.1582,6.451172 6.89062,6.88671 -0.34179,2.00782 -8.5293,0.86132 L 10579.41,10154.644 l 64.981,0 L 580.19336,90.405986 l -13.51758,1.789062 -2.61133,-2.681641 -5.9414,7.824219 -7.77344,-7.824219 -1.74414,4.404297 -3.42188,-3.457031 z"/>
<path d="m 528.67773,106.25168 -2.33593,2.73243 10045.6972,10045.65989 5.03,0 z"/>
</g>
<g id="svg" fill="#fff">
<path d="m 525.90167,107.59667 c 0,-0.59596 0.13342,-1.04515 0.40027,-1.34757 0.27574,-0.31132 0.66711,-0.46697 1.17411,-0.46698 0.5159,10e-6 0.91617,0.15566 1.2008,0.46698 0.29353,0.30242 0.44029,0.75161 0.4403,1.34757 -1e-5,0.57816 -0.14677,1.02289 -0.4403,1.33422 -0.29353,0.31131 -0.6938,0.46697 -1.2008,0.46697 -0.45363,0 -0.83167,-0.13787 -1.13409,-0.41361 -0.29353,-0.28463 -0.44029,-0.74717 -0.44029,-1.38758" style="line-height:125%;-inkscape-font-specification:'Open Sans';text-align:end" font-size="21.661"/>
<path d="m 545.4824,103.71407 c -10e-6,1.7345 -0.6271,3.0954 -1.88125,4.08273 -1.25419,0.98732 -2.98422,1.48098 -5.19013,1.48098 -2.20591,0 -4.01156,-0.34245 -5.41694,-1.02735 l 0,-3.01535 c 0.88948,0.41806 1.83232,0.74718 2.82855,0.98734 1.00511,0.24015 1.93907,0.36023 2.80187,0.36023 1.26305,0 2.19256,-0.24016 2.78853,-0.72048 0.60483,-0.48032 0.90725,-1.12519 0.90727,-1.93462 -2e-5,-0.72936 -0.27576,-1.34756 -0.82722,-1.85457 -0.55149,-0.507 -1.69003,-1.10739 -3.41561,-1.8012 -1.77897,-0.72047 -3.03314,-1.54324 -3.76251,-2.46831 -0.72938,-0.92504 -1.09407,-2.0369 -1.09406,-3.33556 -10e-6,-1.62773 0.57816,-2.90858 1.73449,-3.84255 1.15632,-0.93394 2.70846,-1.40092 4.65643,-1.40094 1.8679,2e-5 3.72692,0.40918 5.57705,1.22749 l -1.01401,2.60173 c -1.7345,-0.72936 -3.2822,-1.09405 -4.64309,-1.09406 -1.0318,1e-5 -1.81455,0.22683 -2.34824,0.68045 -0.53368,0.44475 -0.80053,1.03626 -0.80052,1.77452 -10e-6,0.50701 0.10672,0.94286 0.32021,1.30753 0.21346,0.35581 0.56482,0.69381 1.05404,1.01402 0.48921,0.32022 1.36978,0.74272 2.64175,1.2675 1.43207,0.59596 2.48165,1.15189 3.14876,1.66778 0.6671,0.51591 1.15632,1.09852 1.46765,1.74783 0.31131,0.64932 0.46697,1.41429 0.46698,2.29486"/>
<path d="m 560.76413,89.50461 3.30888,0 -6.83122,19.50633 -3.36224,0 -6.80454,-19.50633 3.28219,0 4.06938,12.12808 c 0.21347,0.57816 0.44028,1.32533 0.68045,2.24149 0.24016,0.90728 0.39581,1.58329 0.46698,2.02801 0.11568,-0.67599 0.29352,-1.45874 0.53369,-2.34822 0.24015,-0.88948 0.43583,-1.54769 0.58706,-1.97466 l 4.06937,-12.0747"/>
<path d="m 573.18396,98.43055 7.17811,0 0,9.7932 c -1.17413,0.38248 -2.30377,0.65377 -3.38892,0.81387 -1.07629,0.16011 -2.24151,0.24016 -3.49566,0.24016 -2.9531,0 -5.23016,-0.87169 -6.83122,-2.61508 -1.60108,-1.75227 -2.40161,-4.22058 -2.4016,-7.40493 -1e-5,-3.13985 0.90281,-5.59482 2.70846,-7.36491 1.80564,-1.77894 4.29174,-2.66842 7.4583,-2.66844 2.0369,2e-5 3.96708,0.39139 5.79053,1.17412 l -1.12074,2.6551 c -1.5833,-0.72936 -3.16658,-1.09405 -4.74984,-1.09406 -2.0814,1e-5 -3.72694,0.65378 -4.93662,1.9613 -1.2097,1.30755 -1.81455,3.09541 -1.81455,5.36357 0,2.38382 0.54258,4.19836 1.62776,5.44364 1.09405,1.23637 2.66399,1.85456 4.7098,1.85456 1.03179,0 2.13475,-0.12897 3.30887,-0.38693 l 0,-5.03001 -4.04268,0 0,-2.73516"/>
</g>
</g>
</svg>
</a>
</h1>
<article class="tidy-readable left">
<p>
<input type="number" id="stretch-out" class="demo" placeholder="type any number of pixels…">
<input type="text" id="fill" class="demo rolled-up" placeholder="you can also change the color…">
<input type="number" id="stretch-down" class="demo rolled-up" placeholder="liked the way it stretched? have another shot…">
</p>
<p>
An open, language-agnostic extension of the SVG standard.
</p>
<p>
Create and view parametric graphics using the tools you know and love. Declare parametric bindings directly in your drawings. It's as easy as editing a spreadsheet.
</p>
<p>
The parametric graphic used in this page is a totally valid SVG file – and yet contains all parametric bindings. See the raw SVG <a href="https://cdn.rawgit.com/parametric-svg/identity/v1.0.0/logo/basic.svg">here</a> – and try opening it with any viewer or editor.
</p>
<p class="center">
<a href="https://github.com/parametric-svg/-/tree/master/packages/element"><button class="bg-citron">
Star and download on GitHub
</button></a>
<br><br>
<a href="https://github.com/parametric-svg/-/tree/master/packages/spec/#/"><button class="bg-subtle">
Or peek at the spec
</button></a>
</p>
</article>
<script src="assets/scripts.js"></script>
</body>