Animated SVG Lasso Selection

This is an Animated SVG Lasso Selection. It simulates a digital cursor drawing marquee selections around hidden text nodes, triggering organic pop-in animations and complex spatial transforms. Its function is to provide a highly stylized, cinematic narrative intro, demonstrating the intersection of vector graphics and timeline-based JavaScript animation.

Specs

• Weight: ~125 KB (Dependencies: GSAP Core / TweenMax).
• Performance: High. The entire sequence manipulates SVG attributes (x, y, rx, ry, scale) and stroke-dashoffset directly through GSAP, bypassing expensive CSS layout recalculations.
• Theming / Customization: The visual design relies on hardcoded SVG fills (#5783FC, #ededed). Text is rendered as raw vector paths rather than <text> nodes, requiring vector editing tools to change the copy.
• Responsiveness: Scales naturally via the SVG viewBox="0 -50 800 600".
• Graceful Degradation: [!] Fails completely without JavaScript. The CSS explicitly sets <svg> to visibility: hidden;. Without the GSAP initialization script, the screen remains permanently blank. Furthermore, the use of vector paths instead of semantic text combined with a lack of ARIA attributes renders the content completely invisible to screen readers.

Anatomy

• HTML: A sprawling, monolithic <svg>. It defines reusable <defs> (masks, base shapes like #marqueeCircle). Three distinct groups (#playBubbleGroup, #withBubbleGroup, #codeBubbleGroup) house the raw text paths and their respective masks. It includes structural UI elements like #cursor and #crossHair.
• CSS: Stripped down. Resets the body and ensures the SVG fills the viewport while keeping overflow hidden.
• JS: The orchestrator. It uses document.querySelector to map the SVG nodes to variables, then chains three distinct TimelineMax sequences together (bubble1Tl, bubble2Tl, bubble3Tl).

Logic

The architectural highlight is the synchronization of the simulated cursor with the SVG shape expansion.

.to([cursor, crossHair], 1, {
  x: 400 - (crossHair.getBBox().width/2)
})
.from(marqueeCircle, 1, {
  attr:{ rx:0, ry:0 }
})
.to([cursor,crossHair], 1, {
  x: (Math.cos(45 * Math.PI / 180) * 123) + 400,
  y: (Math.cos(45 * Math.PI / 180) * 123) + 300  
},'-=1')

The script does not rely on motion paths. Instead, it manually moves the #cursor to the exact center of the screen (x: 400). Simultaneously, it animates the radii (rx, ry) of the invisible #marqueeCircle from 0 to 120. To maintain the illusion that the cursor is physically drawing this circle, the script calculates a point on the circle’s expanding circumference using basic trigonometry (Math.cos(angle) * radius + origin). It animates the cursor to this calculated edge exactly as the circle reaches its full size, creating a flawless mechanical synergy between the two independent SVG nodes.

Feel

Meticulous and authored. The animation runs like a pre-rendered motion graphics video rather than a standard web interaction. The precise alignment of the cursor, the elastic popping of the text bubbles, and the “drawing” of the structural lines (drawSVG) make the interface feel like a drafting board actively being used by an invisible designer. It is a masterclass in timeline synchronization.