tool-plot-hero-static.svg•7.91 kB
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 220" role="img" aria-label="Plot Studio banner">
<style>
svg { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
.title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.subtitle { font-size: 18px; font-weight: 500; opacity: 0.92; }
.grid-lines { stroke-width: 1; stroke-dasharray: 2 10; }
.wave-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 16 18; }
.wave-line-secondary { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 12 16; opacity: 0.6; }
.math-curve { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 18 24; }
.math-marker { stroke-width: 3; stroke-linecap: round; opacity: 0.7; }
.math-spark { fill: none; stroke-width: 3; stroke-linecap: round; }
.matrix-cell { rx: 4; }
.axes-line { stroke-width: 2; stroke-linecap: round; opacity: 0.6; }
.axes-plot { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 16; }
.plot-dot { r: 6; }
.plot-dot-secondary { r: 4; opacity: 0.6; }
.network-link { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 14; opacity: 0.6; }
.network-node { r: 7; }
.document-page { rx: 16; }
.document-page-secondary { rx: 16; opacity: 0.72; }
.document-line { rx: 3; height: 6; opacity: 0.7; }
.document-line.accent { opacity: 0.95; }
.document-bullet { opacity: 0.75; }
.pipeline-bar { height: 18; rx: 9; opacity: 0.35; }
.pipeline-highlight { height: 18; rx: 9; opacity: 0.65; }
.orbit-path { fill: none; stroke-width: 2; stroke-dasharray: 6 10; opacity: 0.5; }
.orbit-core { r: 10; }
.orbit-dot { r: 6; }
.dialog-bubble, .dialog-bubble-secondary { rx: 22; }
.dialog-tail, .dialog-tail-secondary { stroke-width: 0; }
.dialog-dot { opacity: 0.8; }
.dialog-line { height: 6; rx: 3; opacity: 0.7; }
.dag-node { rx: 12; height: 50; }
.dag-node.secondary { opacity: 0.7; }
.dag-node.accent { opacity: 0.85; }
.dag-connector { stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 12; opacity: 0.6; }
.particle { opacity: 0.7; }
.dial-ring { fill: none; stroke-width: 2; opacity: 0.6; stroke-dasharray: 4 8; }
.dial-tick { stroke-width: 2; opacity: 0.35; }
.dial-needle { stroke-width: 3; stroke-linecap: round; }
.dial-center { r: 6; }
.heatmap-cell { rx: 6; }
.tensor-line { stroke-width: 1.5; opacity: 0.35; }
.tensor-curve { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 14; }
.conversion-bar { height: 4; rx: 2; opacity: 0.4; }
.conversion-arrow { opacity: 0.75; }
.conversion-node { opacity: 0.8; }
.conversion-node.secondary { opacity: 0.6; }
.sparkline-track { fill: none; stroke-width: 1; opacity: 0.25; }
.sparkline-path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 16; }
.sparkline-dot { opacity: 0.9; }
.icon-tile { rx: 18; opacity: 0.24; }
.icon-tile.secondary { opacity: 0.26; }
.icon-tile.tertiary { opacity: 0.22; }
.icon-math { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 12; }
.icon-math-point { opacity: 0.8; }
.icon-plot { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 14; }
.icon-plot-dot { opacity: 0.8; }
.icon-network { stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 12; opacity: 0.6; }
.icon-network-node { opacity: 0.85; }
.animate-dash { stroke-dashoffset: 0; }
.animate-pulse { transform-origin: center; }
.animate-float { transform-origin: center; }
.animate-orbit { transform-origin: center; }
.animate-slide { transform-origin: center; }
.animate-twinkle { transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
svg * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}
.title { fill: #f7faff; }
.subtitle { fill: #cfe0ff; }
.grid-lines { stroke: #5d7899; }
.wave-line { stroke: #34d399; }
.wave-line-secondary { stroke: #60a5fa; }
.math-curve { stroke: #34d399; }
.math-marker { stroke: #60a5fa; }
.math-spark { stroke: #facc15; }
.matrix-cell { fill: #60a5fa; }
.axes-line { stroke: #5d7899; }
.axes-plot { stroke: #34d399; }
.plot-dot { fill: #60a5fa; }
.plot-dot-secondary { fill: #facc15; }
.network-link { stroke: #60a5fa; }
.network-node { fill: #34d399; }
.document-page { fill: #34d39933; stroke: #34d39933; }
.document-page-secondary { fill: #60a5fa33; }
.document-line { fill: #cfe0ff; }
.document-line.accent { fill: #60a5fa; }
.document-bullet { fill: #34d399; }
.pipeline-bar { fill: #34d39933; }
.pipeline-highlight { fill: #60a5fa66; }
.orbit-path { stroke: #60a5fa; }
.orbit-core { fill: #facc15; }
.orbit-dot { fill: #34d399; }
.dialog-bubble { fill: #34d39930; }
.dialog-bubble-secondary { fill: #60a5fa26; }
.dialog-tail { fill: #34d39930; }
.dialog-tail-secondary { fill: #60a5fa26; }
.dialog-dot { fill: #34d399; }
.dag-node { fill: #34d39924; }
.dag-node.secondary { fill: #60a5fa24; }
.dag-node.accent { fill: #facc1533; }
.dag-connector { stroke: #60a5fa; }
.particle { fill: #facc15; }
.dial-ring { stroke: #60a5fa; }
.dial-tick { stroke: #cfe0ff; }
.dial-needle { stroke: #34d399; }
.dial-center { fill: #facc15; }
.heatmap-cell { fill: #60a5fa; }
.tensor-line { stroke: #cfe0ff; }
.tensor-curve { stroke: #34d399; }
.conversion-bar { fill: #cfe0ff; }
.conversion-arrow { fill: #60a5fa; }
.conversion-node { fill: #34d399; }
.conversion-node.secondary { fill: #facc15; }
.sparkline-track { stroke: #5d7899; }
.sparkline-path { stroke: #60a5fa; }
.sparkline-dot { fill: #facc15; }
.icon-tile { fill: #34d39933; }
.icon-tile.secondary { fill: #60a5fa33; }
.icon-tile.tertiary { fill: #facc1529; }
.icon-math { stroke: #60a5fa; }
.icon-math-point { fill: #facc15; }
.icon-plot { stroke: #34d399; }
.icon-plot-dot { fill: #facc15; }
.icon-network { stroke: #60a5fa; }
.icon-network-node { fill: #34d399; }
.orbit-group { transform-origin: center; }
</style>
<defs>
<linearGradient id="tool-plot-hero-bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#071223"/>
<stop offset="100%" stop-color="#142b46"/>
</linearGradient>
<filter id="tool-plot-hero-glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="960" height="220" fill="url(#tool-plot-hero-bg)" rx="24"/>
<g transform="translate(60,92)">
<text class="title" x="0" y="0">Plot Studio</text>
<text class="subtitle" x="2" y="34">Charts · Fields · Phase space</text>
</g>
<g class="grid-lines">
<path d="M360 40 H 900"/>
<path d="M360 90 H 900"/>
<path d="M360 140 H 900"/>
<path d="M360 190 H 900"/>
<path d="M420 20 V 210"/>
<path d="M520 20 V 210"/>
<path d="M640 20 V 210"/>
<path d="M760 20 V 210"/>
<path d="M880 20 V 210"/>
</g>
<g transform="translate(600,70)">
<line class="axes-line" x1="0" y1="100" x2="200" y2="100"/>
<line class="axes-line" x1="0" y1="100" x2="0" y2="0"/>
<path class="axes-plot animate-dash" style="--duration:9s" d="M0 90 L40 60 L80 70 L110 30 L150 55 L180 20"/>
<circle class="plot-dot animate-float" style="--duration:5s" cx="150" cy="55" r="6"/>
<circle class="plot-dot-secondary animate-float" style="--duration:6s" cx="80" cy="70" r="4"/>
</g>
<g transform="translate(600,170)">
<path class="sparkline-track" d="M0 18 H220"/>
<path class="sparkline-path animate-dash" style="--duration:7s" d="M0 20 L40 12 L80 26 L120 8 L160 14 L200 4"/>
<circle class="sparkline-dot animate-float" style="--duration:4.5s" cx="200" cy="4" r="5"/>
</g>
<g transform="translate(360,150)">
<path class="wave-line animate-dash" style="--duration:8s" d="M0 25 C 50 -5, 110 55, 170 25 S 290 55, 350 25 S 470 -5, 530 25 S 650 55, 710 25 S 830 -5, 890 25"/>
<path class="wave-line-secondary animate-dash" style="--duration:10s" d="M0 45 C 60 15, 120 65, 180 45 S 300 65, 360 45 S 480 15, 540 45 S 660 65, 720 45 S 840 15, 900 45"/>
</g>
</svg>
