forked from SiegristJ/swardley-script
-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.html
4 lines (4 loc) · 4.26 KB
/
map.html
1
2
3
4
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Wardley Mapping</title></head>><body>
<h1>Example Map</h1>
<svg width="640" height="480" viewbox="-20 0 620 420" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="grid"><g id="value chain" transform="translate(0,400) rotate(270)"><line x1="0" y1="0" x2="400" y2="0" stroke="black"/><line x1="-2em" y1="150" x2="400" y2="150" stroke="black" stroke-dasharray="5,5"/><line x1="-2em" y1="300" x2="400" y2="300" stroke="black" stroke-dasharray="5,5"/><line x1="-2em" y1="450" x2="400" y2="450" stroke="black" stroke-dasharray="5,5"/><text x="0" y="-0.2em" text-anchor="start">Invisible</text><text x="200" y="-0.2em" text-anchor="middle" font-weight="bold">Value Chain</text><text x="400" y="-0.2em" text-anchor="end">Visible</text></g><g id="Evolution" transform="translate(0,400)"><line x1="0" y1="0" x2="600" y2="0" stroke="black"/><text x="0" y="1em" text-anchor="start">Genesis</text><text x="150" y="1em" text-anchor="start"> Custom</text><text x="150" y="2em" text-anchor="start"> built</text><text x="300" y="1em" text-anchor="start"> Product</text><text x="300" y="2em" text-anchor="start"> (+ rental)</text><text x="450" y="1em" text-anchor="start"> Commodity</text><text x="450" y="2em" text-anchor="start"> (+ utility)</text><text x="600" y="1.5em" text-anchor="end" font-weight="bold">Evolution</text></g></g><g id="map"><g id="links"><line x1="240" y1="0" x2="180" y2="20.000000000000018" stroke="grey" /><line x1="240" y1="0" x2="225" y2="79.99999999999999" stroke="grey" /><line x1="240" y1="0" x2="390" y2="120.00000000000001" stroke="grey" /><line x1="240" y1="0" x2="375" y2="79.99999999999999" stroke="grey" /><line x1="180" y1="20.000000000000018" x2="225" y2="79.99999999999999" stroke="grey" /><line x1="225" y1="79.99999999999999" x2="390" y2="120.00000000000001" stroke="grey" /><line x1="375" y1="79.99999999999999" x2="390" y2="120.00000000000001" stroke="grey" /><line x1="390" y1="120.00000000000001" x2="345" y2="220.00000000000003" stroke="grey" /><line x1="390" y1="120.00000000000001" x2="420" y2="160" stroke="grey" /><line x1="345" y1="220.00000000000003" x2="435" y2="320" stroke="grey" /><line x1="420" y1="160" x2="435" y2="320" stroke="grey" /><line x1="435" y1="320" x2="348" y2="340" stroke="grey" /><line x1="435" y1="320" x2="540" y2="360" stroke="grey" /><line x1="348" y1="340" x2="540" y2="360" stroke="grey" /></g><g id="elements"><g id="Customer" transform="translate(240,0)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Customer</text> </g><g id="Online image maniputation" transform="translate(180,20.000000000000018)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Online image maniputation</text> </g><g id="Online photo storage" transform="translate(225,79.99999999999999)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Online photo storage</text> </g><g id="Print" transform="translate(375,79.99999999999999)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Print</text> </g><g id="Web site" transform="translate(390,120.00000000000001)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Web site</text> </g><g id="CRM" transform="translate(420,160)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">CRM</text> </g><g id="Platform" transform="translate(345,220.00000000000003)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Platform</text> </g><g id="Compute" transform="translate(435,320)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Compute</text> </g><g id="Data Centre" transform="translate(348,340)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Data Centre</text> </g><g id="Power" transform="translate(540,360)"><circle cx="0" cy="0" r="5" stroke="black" fill="white" /><text x="10" y="-5" text-anchor="start">Power</text> </g></g></g></g></svg>
</body></html>