The primary H, set on the grid it was cut from.
Modular marks / 003
4 modules · 8 marks
H-01 / Primary
ἕξις: to hold.
A hexis is not given; it is assembled from repeated acts. So is every HEXIS mark: one square grid, four modules (quarter, ring, fillet, waist), turned and repeated.
The H is rounded where it meets the world, square where it carries load, and pinched at the crossbar: the point at which it holds.
Four fillets pulled to the centre. The X appears as the space they leave.
Two arches offset by one module. A path that comes back, slightly further on.
One quarter, turned four times. Repetition with direction.
Six identical rings in rhythm. The fifth turns: the controlled deviation.
H and X in a single block: stems of quarters, a core of fillets.
Three bars, each shaped by the same arc. Layers laid down over time.
Four rings closing on each other. The settled state, complete.
Signature / for project footers
Every project of the studio is signed.
The signature stands in the footer of a site or an app we built. Point at HEXIS: the mark leaves the line and is set down on its plan module by module, the way it is drawn on our site.
It is one link and one style block: no scripts, no fonts, no requests to other servers. It takes its colour and size from the footer it stands in.
<style>.hxc{display:inline-flex;align-items:center;gap:.4em;min-height:44px;color:inherit;font:inherit;line-height:1.2;text-decoration:none;-webkit-tap-highlight-color:transparent}
.hxc-name{display:inline-flex;align-items:baseline;gap:.36em;font-weight:700;letter-spacing:.04em}
.hxc-word{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.8,.2,1)}
.hxc-seal{position:relative;z-index:1;flex:none;align-self:center;width:1em;height:1em}
.hxc-rig{position:absolute;left:50%;bottom:0;width:3.4em;height:3.4em;margin-left:-1.7em;transform:scale(.2941);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hxc-rig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .3s linear,fill .3s linear}
.hxc-plan{fill:none;stroke:currentColor;opacity:0}
.hxc-solid{position:absolute;inset:0}
.hxc-solid svg{fill:currentColor}
.hxc:hover .hxc-word,.hxc:focus-visible .hxc-word{background-size:100% 1px}
.hxc:hover .hxc-rig,.hxc:focus-visible .hxc-rig{transform:translateY(-1.5em)}
.hxc:hover .hxc-rig svg,.hxc:focus-visible .hxc-rig svg{transform:matrix(.9703,.1853,-.2419,.7433,0,0)}
.hxc:hover .hxc-plan,.hxc:focus-visible .hxc-plan{opacity:.3}
.hxc:hover .hxc-solid,.hxc:focus-visible .hxc-solid{filter:drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24) drop-shadow(0 1px 0 #963d24)}
.hxc:hover .hxc-solid svg,.hxc:focus-visible .hxc-solid svg{fill:#e2552d}
.hxc:hover .hxc-solid path,.hxc:focus-visible .hxc-solid path{animation:hxc-land .5s cubic-bezier(.2,.8,.2,1) calc(.16s + var(--i) * 55ms) backwards}
@keyframes hxc-land{from{opacity:0;transform:translate(-13px,-52px)}}
@media (prefers-reduced-motion:reduce){
.hxc-word,.hxc-rig,.hxc-rig svg{transition:none}
.hxc:hover .hxc-rig,.hxc:focus-visible .hxc-rig{transform:scale(.2941)}
.hxc:hover .hxc-rig svg,.hxc:focus-visible .hxc-rig svg{transform:none}
.hxc:hover .hxc-plan,.hxc:focus-visible .hxc-plan{opacity:0}
.hxc:hover .hxc-solid,.hxc:focus-visible .hxc-solid{filter:none}
.hxc:hover .hxc-solid path,.hxc:focus-visible .hxc-solid path{animation:none}
}</style>
<a class="hxc" href="https://hexis-agency.com" target="_blank" rel="noopener"><span>Created by</span><span class="hxc-name"><span class="hxc-seal" aria-hidden="true"><span class="hxc-rig"><svg class="hxc-plan" viewBox="0 0 120 120"><path vector-effect="non-scaling-stroke" d="M0 0V120M40 0V120M80 0V120M120 0V120M0 0H120M0 40H120M0 80H120M0 120H120"/></svg><span class="hxc-solid"><svg viewBox="0 0 120 120"><path style="--i:0" d="M40 40H0A40 40 0 0 1 40 0Z"/><path style="--i:1" d="M0 40H40V80H0Z"/><path style="--i:2" d="M40 80V120A40 40 0 0 1 0 80Z"/><path style="--i:3" d="M40 44Q60 60 80 44V76Q60 60 40 76Z"/><path style="--i:4" d="M80 40V0A40 40 0 0 1 120 40Z"/><path style="--i:5" d="M80 40H120V80H80Z"/><path style="--i:6" d="M80 80H120A40 40 0 0 1 80 120Z"/></svg></span></span></span><span class="hxc-word">HEXIS</span></span></a>