00bf7da344
Replace the stacked desktop layout with a phone-first product flow featuring an image-led hero, inline privacy proof, compact semantic search, swipeable feature cards with live pagination, expandable technical details, and touch-friendly navigation and calls to action. Add the standalone Phokus aperture SVG asset.
44 lines
2.2 KiB
XML
44 lines
2.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256" role="img" aria-label="Phokus">
|
|
<title>Phokus</title>
|
|
|
|
<!--
|
|
Phokus app mark — a camera iris.
|
|
The hexagon in the middle is the lens OPENING; each blade edge sweeps from a
|
|
corner of the opening out to the rim, all leaning the same way (the pinwheel).
|
|
|
|
Tuning knobs (edit and re-open in any browser/Figma):
|
|
* opening roundness -> the "52" radius in the opening <path> arcs.
|
|
smaller (toward 30) = rounder/softer hole; larger (toward 90) = flatter, sharper.
|
|
* blade curve -> the "110" radius in each blade <path>.
|
|
smaller = more pronounced curve; larger = straighter blade.
|
|
* blade sweep amount -> the +40deg baked into the blade endpoint (70.71,-84.27).
|
|
* curve DIRECTION -> the final flag in each "A r r 0 0 X" command (0<->1 flips the bow).
|
|
* weight -> stroke-width on the <g>.
|
|
* color -> stroke on the <g>; swap "#e9e9ec" for currentColor to inherit.
|
|
A brand-accent focal dot is provided at the bottom (commented out).
|
|
-->
|
|
|
|
<rect x="8" y="8" width="240" height="240" rx="52" fill="#0e0f14"/>
|
|
|
|
<g transform="translate(128 128)" fill="none" stroke="#e9e9ec" stroke-width="9"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
|
|
<!-- outer rim -->
|
|
<circle r="110"/>
|
|
|
|
<!-- lens opening: soft, arc-rounded hexagon -->
|
|
<path d="M0,-46 A52,52 0 0 0 39.84,-23 A52,52 0 0 0 39.84,23 A52,52 0 0 0 0,46 A52,52 0 0 0 -39.84,23 A52,52 0 0 0 -39.84,-23 A52,52 0 0 0 0,-46 Z"/>
|
|
|
|
<!-- blades: one curved edge, swept six times -->
|
|
<g transform="rotate(0)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
|
|
<g transform="rotate(60)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
|
|
<g transform="rotate(120)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
|
|
<g transform="rotate(180)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
|
|
<g transform="rotate(240)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
|
|
<g transform="rotate(300)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
|
|
</g>
|
|
|
|
<!-- optional brand focal point -->
|
|
<!-- <circle cx="128" cy="128" r="9" fill="#e6a23c"/> -->
|
|
</svg>
|