Skip to content

Instantly share code, notes, and snippets.

@lassebenni

lassebenni/cloud_service_types_visual.html

Created March 10, 2026 21:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lassebenni/ca6d22b2e4164c125fca85f6c1444a41 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lassebenni/ca6d22b2e4164c125fca85f6c1444a41 to your computer and use it in GitHub Desktop.
Download ZIP
Visual for: Cloud Service Types
Raw
cloud_service_types_visual.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloud Service Types</title>
<style>
body {
background-color: #1e1e1e;
color: #ffffff;
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
svg {
background-color: #252526;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
max-width: 100%;
height: auto;
}
.text-title { font-size: 24px; font-weight: bold; fill: #ffffff; }
.text-subtitle { font-size: 14px; fill: #aaaaaa; }
.col-title { font-size: 18px; font-weight: bold; fill: #ffffff; }
.box-managed { fill: #0078d4; rx: 4; } /* Azure Blue */
.box-user { fill: #107c10; rx: 4; } /* Green */
.box-text { font-size: 14px; fill: #ffffff; text-anchor: middle; dominant-baseline: middle; font-weight: 500; }
.legend-box { rx: 2; }
.legend-text { font-size: 14px; fill: #dddddd; }
.example-text { font-size: 13px; fill: #888888; font-style: italic; }
</style>
</head>
<body>
<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<text x="400" y="45" class="text-title" text-anchor="middle">Cloud Service Models</text>
<text x="400" y="70" class="text-subtitle" text-anchor="middle">Level of Abstraction and Management Responsibility</text>
<!-- Legend -->
<rect x="260" y="95" width="20" height="20" class="box-user legend-box" />
<text x="290" y="110" class="legend-text">You manage</text>
<rect x="410" y="95" width="20" height="20" class="box-managed legend-box" />
<text x="440" y="110" class="legend-text">Provider manages</text>
<!-- Columns Setup -->
<!-- IaaS Column -->
<text x="200" y="160" class="col-title" text-anchor="middle">IaaS</text>
<!-- PaaS Column -->
<text x="400" y="160" class="col-title" text-anchor="middle">PaaS</text>
<!-- SaaS Column -->
<text x="600" y="160" class="col-title" text-anchor="middle">SaaS</text>
<!-- Layer 3: Application & Data (Top) -->
<rect x="120" y="180" width="160" height="55" class="box-user" />
<text x="200" y="207" class="box-text">Application &amp; Data</text>
<rect x="320" y="180" width="160" height="55" class="box-user" />
<text x="400" y="207" class="box-text">Application &amp; Data</text>
<rect x="520" y="180" width="160" height="55" class="box-managed" />
<text x="600" y="207" class="box-text">Application &amp; Data</text>
<!-- Layer 2: Operating System & Runtime (Middle) -->
<rect x="120" y="245" width="160" height="55" class="box-user" />
<text x="200" y="272" class="box-text">OS &amp; Runtime</text>
<rect x="320" y="245" width="160" height="55" class="box-managed" />
<text x="400" y="272" class="box-text">OS &amp; Runtime</text>
<rect x="520" y="245" width="160" height="55" class="box-managed" />
<text x="600" y="272" class="box-text">OS &amp; Runtime</text>
<!-- Layer 1: Infrastructure (Bottom) -->
<rect x="120" y="310" width="160" height="55" class="box-managed" />
<text x="200" y="337" class="box-text">Infrastructure</text>
<rect x="320" y="310" width="160" height="55" class="box-managed" />
<text x="400" y="337" class="box-text">Infrastructure</text>
<rect x="520" y="310" width="160" height="55" class="box-managed" />
<text x="600" y="337" class="box-text">Infrastructure</text>
<!-- Examples -->
<text x="200" y="395" class="example-text" text-anchor="middle">e.g., Azure Virtual Machines</text>
<text x="400" y="395" class="example-text" text-anchor="middle">e.g., Azure Container Apps</text>
<text x="600" y="395" class="example-text" text-anchor="middle">e.g., Microsoft 365, Slack</text>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment