Scroll Constellation Connect Dots — SVG Draw-On Line Effect

<section class="con-stage" id="conStage">
  <div class="con-intro"><p>Scroll ↓ to connect the stars into a constellation</p></div>
  <svg class="con-svg" id="conSvg" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <g id="conStars"></g>
    <g id="conLines"></g>
  </svg>
  <div class="con-label" id="conLabel">URSA MINOR</div>
</section>
<section class="con-bottom"><p>The little bear, fully charted.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#02040d;color:#eaf2ff;font-family:system-ui,-apple-system,sans-serif}
.con-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#4a5a8a;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.con-stage{height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#0a1030 0%,#02040d 75%)}
.con-intro{position:absolute;top:10%;left:0;right:0;display:flex;justify-content:center;text-align:center;padding:0 24px;pointer-events:none;z-index:6;color:#a9c0ff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
.con-svg{width:min(85vw,760px);height:auto;max-height:70vh}
.con-star{filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
.con-line{fill:none;stroke:#8fb4ff;stroke-width:1.4;filter:drop-shadow(0 0 3px rgba(143,180,255,.7))}
.con-label{position:absolute;bottom:14%;left:0;right:0;text-align:center;font-size:15px;letter-spacing:.3em;color:#cdd8ff;opacity:0;transition:opacity .6s ease;text-shadow:0 0 12px rgba(140,170,255,.6)}
.con-label.visible{opacity:1}

gsap.registerPlugin(ScrollTrigger);

var starsGroup = document.getElementById('conStars');
var linesGroup = document.getElementById('conLines');
var label = document.getElementById('conLabel');
var introEl = document.querySelector('.con-intro');

// A simplified Ursa Minor (Little Dipper) layout in a 400x300 viewBox.
var stars = [
  { x: 60,  y: 60 },
  { x: 100, y: 50 },
  { x: 140, y: 70 },
  { x: 180, y: 100 },
  { x: 210, y: 140 },
  { x: 250, y: 150 },
  { x: 260, y: 190 },
];
// Edges connect stars in drawing order (index pairs) — the "handle" then
// the "bowl" of the dipper shape.
var edges = [
  [0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6], [6, 4],
];

// Random background clutter stars for atmosphere; these never connect.
var BG = 60;
for (var b = 0; b < BG; b++) {
  var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  c.setAttribute('cx', Math.random() * 400);
  c.setAttribute('cy', Math.random() * 300);
  c.setAttribute('r', (0.4 + Math.random() * 0.8).toFixed(2));
  c.setAttribute('fill', '#ffffff');
  c.setAttribute('opacity', (0.25 + Math.random() * 0.4).toFixed(2));
  starsGroup.appendChild(c);
}

// Foreground constellation stars, drawn on top of clutter, starting dim.
var starEls = stars.map(function (s) {
  var el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  el.setAttribute('cx', s.x);
  el.setAttribute('cy', s.y);
  el.setAttribute('r', 3.2);
  el.setAttribute('fill', '#ffffff');
  el.setAttribute('class', 'con-star');
  el.style.opacity = '0.25';
  starsGroup.appendChild(el);
  return el;
});

// One line per edge, each drawn with stroke-dasharray/stroke-dashoffset so
// it can be revealed progressively by scroll ("draw-on").
var lineEls = edges.map(function (e) {
  var a = stars[e[0]], b2 = stars[e[1]];
  var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  line.setAttribute('x1', a.x); line.setAttribute('y1', a.y);
  line.setAttribute('x2', b2.x); line.setAttribute('y2', b2.y);
  line.setAttribute('class', 'con-line');
  var len = Math.hypot(b2.x - a.x, b2.y - a.y);
  line.setAttribute('stroke-dasharray', len);
  line.setAttribute('stroke-dashoffset', len);
  linesGroup.appendChild(line);
  return { el: line, len: len };
});

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: '#conStage',
    start: 'top top',
    end: '+=380%',
    scrub: 0.6,
    pin: true,
    onUpdate: function (self) {
      if (introEl) introEl.style.opacity = (self.progress > 0.02) ? '0' : '1';
      label.classList.toggle('visible', self.progress > 0.94);
    },
  },
});

// Each edge gets its own slice of the timeline: the star at its start
// brightens, then the line draws on via dashoffset, staggered one after
// another so the shape visibly connects itself point by point.
var step = 1 / edges.length;
edges.forEach(function (e, i) {
  var t0 = i * step;
  tl.to(starEls[e[0]].style, { opacity: 1, duration: step * 0.4 }, t0)
    .to(lineEls[i].el, { strokeDashoffset: 0, duration: step * 0.85, ease: 'none' }, t0 + step * 0.1)
    .to(starEls[e[1]].style, { opacity: 1, duration: step * 0.4 }, t0 + step * 0.5);
});