feat: redesign logo options as top-down git trees forming 'm'

A — Git Tree: branches fork from left trunk, feature branch detail
B — Bold Tree: thicker strokes, smooth curves, minimal nodes
C — Full Graph: realistic git log with many commits and a merge
This commit is contained in:
m
2026-02-06 00:40:43 +01:00
parent ce4d622bea
commit 2a85f0192d

View File

@@ -96,7 +96,7 @@
<div class="mgit-designs"> <div class="mgit-designs">
<!-- Design A: Classic Three-Branch --> <!-- Design A: Top-down git tree forming 'm' -->
<div class="mgit-design-card"> <div class="mgit-design-card">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
@@ -106,36 +106,54 @@
</linearGradient> </linearGradient>
</defs> </defs>
<rect width="200" height="200" fill="url(#gradA)" rx="40"/> <rect width="200" height="200" fill="url(#gradA)" rx="40"/>
<!-- Three branches forming 'm': left stem, middle peak, right peak --> <!--
<g stroke="#ffffff" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none"> Real git tree flowing TOP to BOTTOM:
<!-- Left vertical (stem of m) --> - Start node at top-left
<line x1="50" y1="60" x2="50" y2="155"/> - Main trunk goes down on the left
<!-- First arch: left to middle --> - First branch forks right, goes down as middle leg
<path d="M50,80 C50,50 100,50 100,80"/> - Second branch forks right from middle, goes down as right leg
<!-- Middle vertical --> Three vertical legs = the three strokes of 'm'
<line x1="100" y1="80" x2="100" y2="155"/> -->
<!-- Second arch: middle to right --> <g stroke="#ffffff" stroke-width="6" stroke-linecap="round" fill="none">
<path d="M100,80 C100,50 150,50 150,80"/> <!-- Left trunk: straight down -->
<!-- Right vertical --> <line x1="48" y1="42" x2="48" y2="158"/>
<line x1="150" y1="80" x2="150" y2="155"/> <!-- First fork: curves from left trunk to middle leg -->
<path d="M48,68 C58,68 78,58 88,68 L88,68"/>
<!-- Middle leg: down from fork -->
<line x1="88" y1="68" x2="88" y2="158"/>
<!-- Second fork: curves from middle to right leg -->
<path d="M88,95 C98,95 118,85 128,95"/>
<!-- Right leg: down from second fork -->
<line x1="128" y1="95" x2="128" y2="158"/>
<!-- Bonus: a small feature branch off the right -->
<path d="M128,125 C138,125 150,118 156,108"/>
</g> </g>
<!-- Commit nodes --> <!-- Commit nodes -->
<g fill="#ffffff"> <g fill="#ffffff">
<circle cx="50" cy="155" r="8"/> <!-- Root commit -->
<circle cx="100" cy="155" r="8"/> <circle cx="48" cy="42" r="7"/>
<circle cx="150" cy="155" r="8"/> <!-- Fork points on trunk -->
<circle cx="50" cy="80" r="6"/> <circle cx="48" cy="68" r="6"/>
<circle cx="100" cy="80" r="6"/> <circle cx="48" cy="110" r="5"/>
<circle cx="150" cy="80" r="6"/> <!-- Middle branch start + commits -->
<circle cx="75" cy="56" r="5"/> <circle cx="88" cy="68" r="6"/>
<circle cx="125" cy="56" r="5"/> <circle cx="88" cy="95" r="6"/>
<!-- Right branch start + commit -->
<circle cx="128" cy="95" r="6"/>
<circle cx="128" cy="125" r="5"/>
<!-- Feature branch tip -->
<circle cx="156" cy="108" r="5"/>
<!-- Bottom endpoints (HEAD of each branch) -->
<circle cx="48" cy="158" r="7"/>
<circle cx="88" cy="158" r="7"/>
<circle cx="128" cy="158" r="7"/>
</g> </g>
</svg> </svg>
<h3>A — Classic Branch</h3> <h3>A — Git Tree</h3>
<p>Clean arches with commit nodes</p> <p>Top-down branches forking into 'm'</p>
</div> </div>
<!-- Design B: Flowing Merge --> <!-- Design B: Tighter tree, thicker lines, fewer nodes -->
<div class="mgit-design-card"> <div class="mgit-design-card">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
@@ -145,25 +163,39 @@
</linearGradient> </linearGradient>
</defs> </defs>
<rect width="200" height="200" fill="url(#gradB)" rx="40"/> <rect width="200" height="200" fill="url(#gradB)" rx="40"/>
<!-- Flowing 'm' from continuous branch paths --> <!--
<g stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none"> Bolder version: thicker strokes, smoother curves,
<!-- Single continuous path forming 'm' --> only key nodes shown
<!-- Left stem up, arch over, down, arch over, down --> -->
<path d="M45,155 L45,75 C45,45 95,45 100,75 L100,155"/> <g stroke="#ffffff" stroke-width="8" stroke-linecap="round" fill="none">
<path d="M100,75 C100,45 155,45 155,75 L155,155"/> <!-- Left trunk -->
<line x1="45" y1="40" x2="45" y2="160"/>
<!-- First fork: smooth curve to middle -->
<path d="M45,72 C65,62 80,62 100,72"/>
<!-- Middle leg -->
<line x1="100" y1="72" x2="100" y2="160"/>
<!-- Second fork: smooth curve to right -->
<path d="M100,100 C120,90 135,90 155,100"/>
<!-- Right leg -->
<line x1="155" y1="100" x2="155" y2="160"/>
</g> </g>
<!-- Minimal commit nodes at endpoints only --> <!-- Key nodes only -->
<g fill="#ffffff"> <g fill="#ffffff">
<circle cx="45" cy="155" r="9"/> <circle cx="45" cy="40" r="9"/>
<circle cx="100" cy="155" r="9"/> <circle cx="45" cy="72" r="7"/>
<circle cx="155" cy="155" r="9"/> <circle cx="100" cy="72" r="7"/>
<circle cx="100" cy="100" r="7"/>
<circle cx="155" cy="100" r="7"/>
<circle cx="45" cy="160" r="9"/>
<circle cx="100" cy="160" r="9"/>
<circle cx="155" cy="160" r="9"/>
</g> </g>
</svg> </svg>
<h3>B — Smooth Flow</h3> <h3>B — Bold Tree</h3>
<p>Continuous branches, minimal nodes</p> <p>Thicker branches, key nodes only</p>
</div> </div>
<!-- Design C: Network Graph --> <!-- Design C: Realistic git log with extra commits -->
<div class="mgit-design-card"> <div class="mgit-design-card">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
@@ -173,41 +205,54 @@
</linearGradient> </linearGradient>
</defs> </defs>
<rect width="200" height="200" fill="url(#gradC)" rx="40"/> <rect width="200" height="200" fill="url(#gradC)" rx="40"/>
<!-- Network-style 'm': dots connected by lines like a git graph --> <!--
<g stroke="#ffffff" stroke-width="5" stroke-linecap="round" fill="none"> Most realistic: looks like `git log --graph`
<!-- Left branch: bottom to top --> Many small commits, branches diverge and continue
<line x1="48" y1="155" x2="48" y2="100"/> -->
<line x1="48" y1="100" x2="48" y2="65"/> <g stroke="#ffffff" stroke-width="4" stroke-linecap="round" fill="none">
<!-- Fork left to mid-left peak --> <!-- Left trunk (main) -->
<path d="M48,100 C48,70 80,55 80,55"/> <line x1="50" y1="35" x2="50" y2="165"/>
<path d="M80,55 C80,55 100,70 100,100"/> <!-- Branch 1 forks to middle -->
<!-- Mid vertical --> <path d="M50,55 C60,50 75,48 90,55"/>
<line x1="100" y1="100" x2="100" y2="155"/> <!-- Middle branch continues down -->
<!-- Fork mid to mid-right peak --> <line x1="90" y1="55" x2="90" y2="165"/>
<path d="M100,100 C100,70 132,55 132,55"/> <!-- Branch 2 forks to right -->
<path d="M132,55 C132,55 152,70 152,100"/> <path d="M90,85 C100,80 115,78 130,85"/>
<!-- Right branch --> <!-- Right branch continues down -->
<line x1="152" y1="100" x2="152" y2="155"/> <line x1="130" y1="85" x2="130" y2="165"/>
<!-- A merge back: right feature into right branch -->
<path d="M130,115 C140,110 150,105 155,95"/>
<path d="M155,95 L155,75"/>
</g> </g>
<!-- All the commit dots --> <!-- Many small commit dots -->
<g fill="#ffffff"> <g fill="#ffffff">
<!-- Bottom row --> <!-- Left trunk commits -->
<circle cx="48" cy="155" r="7"/> <circle cx="50" cy="35" r="6"/>
<circle cx="100" cy="155" r="7"/> <circle cx="50" cy="55" r="5"/>
<circle cx="152" cy="155" r="7"/> <circle cx="50" cy="80" r="4"/>
<!-- Fork points --> <circle cx="50" cy="105" r="4"/>
<circle cx="48" cy="100" r="7"/> <circle cx="50" cy="130" r="4"/>
<circle cx="100" cy="100" r="7"/> <circle cx="50" cy="165" r="6"/>
<!-- Peaks --> <!-- Middle branch commits -->
<circle cx="80" cy="55" r="7"/> <circle cx="90" cy="55" r="5"/>
<circle cx="132" cy="55" r="7"/> <circle cx="90" cy="75" r="4"/>
<!-- Mid-stem --> <circle cx="90" cy="85" r="5"/>
<circle cx="48" cy="65" r="5"/> <circle cx="90" cy="110" r="4"/>
<circle cx="152" cy="100" r="7"/> <circle cx="90" cy="135" r="4"/>
<circle cx="90" cy="165" r="6"/>
<!-- Right branch commits -->
<circle cx="130" cy="85" r="5"/>
<circle cx="130" cy="100" r="4"/>
<circle cx="130" cy="115" r="5"/>
<circle cx="130" cy="140" r="4"/>
<circle cx="130" cy="165" r="6"/>
<!-- Feature branch -->
<circle cx="155" cy="95" r="4"/>
<circle cx="155" cy="75" r="4"/>
</g> </g>
</svg> </svg>
<h3>C — Git Graph</h3> <h3>C — Full Graph</h3>
<p>Network nodes with branch forks</p> <p>Realistic git log with many commits</p>
</div> </div>
</div> </div>