Leading lines

리딩 라인

Arranging lines in the frame — a road, a railing, a shadow — so they converge on one point, pulling the eye straight to the subject.

Also known as: 시선 유도선Converging lines
···
html
<svg class="ll" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid meet">
  <polygon points="4,116 100,40 196,116" class="road"/>
  <path id="lp" d="M4,116 L100,40" fill="none" stroke-width="2"/>
  <path id="rp" d="M196,116 L100,40" fill="none" stroke-width="2"/>
  <path d="M40,116 L100,40" fill="none" stroke-width="1" stroke-dasharray="3 4" class="guide"/>
  <path d="M160,116 L100,40" fill="none" stroke-width="1" stroke-dasharray="3 4" class="guide"/>
  <circle cx="100" cy="40" r="5" class="vp"/>
  <circle r="3.2" class="dot">
    <animateMotion dur="2.6s" repeatCount="indefinite"><mpath href="#lp"/></animateMotion>
  </circle>
  <circle r="3.2" class="dot">
    <animateMotion dur="2.6s" begin="1.3s" repeatCount="indefinite"><mpath href="#rp"/></animateMotion>
  </circle>
</svg>
css
.ll{position:absolute;inset:0;width:100%;height:100%}
.ll path{stroke:var(--line)}
.ll .guide{stroke:var(--line);opacity:.5}
.ll .road{fill:color-mix(in oklab,var(--fg) 6%,var(--surface))}
.ll .vp{fill:var(--accent-2)}
.ll .dot{fill:var(--accent)}

In perspective, two parallel lines converge toward one point on the frame as they recede — the vanishing point. Put the subject right there, and the eye enters from an edge of the photo and rides those lines straight to it.

The lines themselves can be almost anything — road lane markings, a bridge railing, a building's roofline, a river's curve, even a shadow. The most common setup starts the lines at the bottom corners and lets them converge upward.

Too many lines converging toward different points scatters the eye instead of guiding it. Keep the convergence to one vanishing point, and put something worth looking at — a person, a light, a contrasting color — right where the lines meet.

When to use

Use it in a hero image to funnel attention toward a CTA or product, or whenever a photo needs one unmistakable point of focus.