Revision control
Copy as Markdown
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
width="340"
height="130"
<style>
svg .box-style { stroke: black; fill: white }
svg .line-style { stroke: red; fill: none }
svg .fill-style { stroke: none; fill: red }
svg .np-line-style { stroke: blue; fill: none }
svg .np-fill-style { stroke: none; fill: blue }
svg .text-style { font: 20px arial; fill: black }
svg .small-text-style { font: 12px monospace; fill: black }
svg.dark .box-style { stroke: #f2f2f2; fill: black }
svg.dark .line-style { stroke: red; fill: none }
svg.dark .fill-style { stroke: none; fill: red }
svg.dark .np-line-style { stroke: #4080ff; fill: none; stroke-width: 1.5 }
svg.dark .np-fill-style { stroke: none; fill: #4080ff }
svg.dark .text-style { font: 20px arial; fill: #f2f2f2 }
svg.dark .small-text-style { font: 12px monospace; fill: #f2f2f2 }
[data-theme="dark"] svg .box-style { stroke: #f2f2f2; fill: black }
[data-theme="dark"] svg .line-style { stroke: red; fill: none }
[data-theme="dark"] svg .fill-style { stroke: none; fill: red }
[data-theme="dark"] svg .np-line-style { stroke: #4080ff; fill: none; stroke-width: 1.5 }
[data-theme="dark"] svg .np-fill-style { stroke: none; fill: #4080ff }
[data-theme="dark"] svg .text-style { font: 20px arial; fill: #f2f2f2 }
[data-theme="dark"] svg .small-text-style { font: 12px monospace; fill: #f2f2f2 }
[data-theme="light"] svg .box-style { stroke: black; fill: white }
[data-theme="light"] svg .line-style { stroke: red; fill: none }
[data-theme="light"] svg .fill-style { stroke: none; fill: red }
[data-theme="light"] svg .np-line-style { stroke: blue; fill: none }
[data-theme="light"] svg .np-fill-style { stroke: none; fill: blue }
[data-theme="light"] svg .text-style { font: 20px arial; fill: black }
[data-theme="light"] svg .small-text-style { font: 12px monospace; fill: black }
</style>
<g transform="translate(10.5, 10.5)">
<path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
class="box-style" />
<text x="35" y="36" font-family="arial" font-size="20px"
class="text-style">A</text>
</g>
<g transform="translate(90.5, 10.5)">
<path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
class="box-style" />
<text x="35" y="36" font-family="arial" font-size="20px"
class="text-style">B</text>
<path d="M 0,60 c 0,30 50,40 80,30" stroke="blue" fill="none"
class="np-line-style" />
<path d="M 0,60 l -2,14 l 11,-4 z" stroke="none" fill="blue"
class="np-fill-style" />
<text x="-15" y="110"
class="small-text-style">previous()</text>
</g>
<g transform="translate(170.5, 10.5)">
<path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
class="box-style" />
<text x="35" y="36" font-family="arial" font-size="20px"
class="text-style">C</text>
<path d="M 0,60 v 50" stroke="red"
class="line-style" />
<path d="M 0,60 l -5,10 l 10,0 z" stroke="none" fill="red"
class="fill-style" />
<text x="30" y="110"
class="small-text-style">next()</text>
</g>
<g transform="translate(250.5, 10.5)">
<path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
class="box-style" />
<text x="35" y="36" font-family="arial" font-size="20px"
class="text-style">D</text>
<path d="M 0,60 c 0,30 -50,40 -80,30" stroke="blue" fill="none"
class="np-line-style" />
<path d="M 0,60 l 2,14 l -11,-4 z" stroke="none" fill="blue"
class="np-fill-style" />
</g>
</svg>