File:Catalan number-path reflection.svg
Jump to navigation
Jump to search
Size of this PNG preview of this SVG file: 46 × 64 pixels. Other resolutions: 172 × 240 pixels | 345 × 480 pixels | 552 × 768 pixels | 736 × 1,024 pixels | 1,472 × 2,048 pixels.
Original file (SVG file, nominally 46 × 64 pixels, file size: 1 KB)
Summary
| Description |
English: Reflection-based proof of Catalan numbers Catalan number#Second proof |
| Date | |
| Source | Own work |
| Author | Javalenok |
Source code
<html>
<svg width="46" height="64" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 0 0 V 8 H 8" fill="none" stroke="lightgray" stroke-width="0.5"></path>
</pattern>
<g id="canvas">
<rect width="46" height="53" fill="url(#grid)" />
<path d="M 0,0 L 64,64" stroke="black" stroke-width="0.3"></path>
<path d="M 0,8 L 80, 88" stroke="red" stroke-width="0.3"></path>
<path id="path0" d="M 0,0 h8 v16" stroke="black" stroke-width=".9" fill="none">
</path>
<g stroke="black" stroke-width=".9" fill="none">
<path id="path1" d="M 8,16 ">
<animate id="first" attributeType="CSS" attributeName="stroke"
begin="0s;second.end+1s" from="black" to="rgba(230,230,230,1)" dur="200ms" fill = "freeze" />
<animate id="second" attributeType="CSS" attributeName="stroke"
begin="first.end+1s" from="rgba(230,230,230,1)" to="black" dur="200ms" fill = "freeze" />
</path></g>
<path id="path2" d="M 8,16" stroke="black" stroke-width=".9" fill="none">
<animate attributeType="CSS" attributeName="stroke"
begin="first.begin" from="rgba(230,230,230,1)" to="black" dur="200ms" fill = "freeze" />
<animate id="second" attributeType="CSS" attributeName="stroke"
begin="second.begin" from="black" to="rgba(230,230,230,1)" dur="200ms" fill = "freeze" />
</path>
</g>
</defs>
<use x=00 y=00 xlink:href="#canvas" transform="translate(002, 53) scale(1,-1)"/>
</svg>
<textarea id="area1" rows=15 cols=50></textarea>
<script language="javascript">
var svgNS = "http://www.w3.org/2000/svg";
var canvas = document.querySelector("svg")
function svg(name, props) {
var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
for (key in props)
if(key=="xlink:href"){
element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', props[key]);
}else{
element.setAttribute(key, props[key]);
}
//alert(element.outerHTML)
return canvas.appendChild(element);
}
function arrow(x, y, angle) {
var transform = "rotate(" + angle + ", "+ x + ", "+ y + ")"
svg("use", {x:x, y:y, "xlink:href":"#myarrow", transform:transform})
//alert(canvas.outerHTML)
}
var grid = document.querySelector("#grid").width.baseVal.value
var path = "hhvvvhh"
function pave(pathid) {
if (pathid == 2) path = path.replace(/h/g,1).replace(/v/g, 'h').replace(/1/g, 'v')
var svgpath = document.querySelector("#path" + pathid)
var d = svgpath.getAttribute("d")
for (var i = 0; i != path.length ;i++) {
d += " " + path[i] + grid
}
//arrowhead
if (path[path.length-1] == 'v')
d += " l -1.5,-1.5,3,0,-1.5,1.5"
else
d += " l -1.5,1.5,0,-3,1.5,1.5"
svgpath.setAttribute("d", d)
}
pave(1)
pave(2)
document.querySelector("#area1").value = canvas.outerHTML
</script>
</body></html>
Javascript updates SVG canvas on page load and exposes resulting file in textarea. In the second edition I actually highlighted the path flipping with animation but it seems does not play in Wikipedia.
Licensing
I, the copyright holder of this work, hereby publish it under the following license:
This file is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- You are free:
- to share – to copy, distribute and transmit the work
- to remix – to adapt the work
- Under the following conditions:
- attribution – You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
- share alike – If you remix, transform, or build upon the material, you must distribute your contributions under the same or compatible license as the original.
File history
Click on a date/time to view the file as it appeared at that time.
| Date/Time | Thumbnail | Dimensions | User | Comment | |
|---|---|---|---|---|---|
| current | 11:52, 18 January 2015 | | 46 × 64 (1 KB) | wikimediacommons>Javalenok | Highlight flipped sections without animation |
File usage
The following page uses this file:
