<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000"><path d="M101.85 141.28h74.46L206.4 243.4l34.34-102.73h61.39l34.34 102.73 30.09-102.12h73.25l-69.6 214.27h-62l-37.38-105.77-37.38 105.77h-62l-69.6-214.27z"/><path d="M451.98 141.28h71.12v75.07h65.04v-75.07h71.12v212.75h-71.12v-76.29H523.1v76.29h-71.12V141.28z"/><path d="M746.79 278.66l-80.24-137.37h79.63l36.47 69.9 36.77-69.9h78.72L817.9 277.75v76.29h-71.12v-75.38z"/><g><path d="M360.62 590.72l23.7-28.26c14.41 11 30.91 15.55 46.46 15.55 7.96 0 11.38-2.09 11.38-5.69v-.38c0-3.79-4.17-5.88-18.39-8.72-29.77-6.07-55.94-14.6-55.94-42.67v-.38c0-25.22 19.72-44.75 56.32-44.75 25.6 0 44.56 6.07 59.92 18.2l-21.62 29.96c-12.52-9.1-27.5-13.08-39.82-13.08-6.64 0-9.67 2.28-9.67 5.5v.38c0 3.6 3.6 5.88 17.64 8.53 33.94 6.26 56.7 16.12 56.7 42.86v.38c0 27.88-22.95 44.94-58.6 44.94-26.93.01-51.2-7.58-68.08-22.37z"/><path d="M494.5 544.64v-.38c0-38.5 31.67-69.22 72.63-69.22 40.96 0 72.25 30.34 72.25 68.84v.38c0 38.5-31.67 69.22-72.63 69.22-40.96 0-72.25-30.34-72.25-68.84z"/><path d="M594.63 544.64v-.38c0-15.74-10.81-29.96-27.88-29.96-16.88 0-27.5 14.03-27.5 29.58v.38c0 15.74 10.81 29.96 27.88 29.96 16.88 0 27.5-14.03 27.5-29.58z"/></g><g><path d="M87 825.31l19.12-22.79c11.63 8.87 24.93 12.54 37.48 12.54 6.42 0 9.18-1.68 9.18-4.59v-.31c0-3.06-3.37-4.74-14.84-7.04-24.02-4.89-45.12-11.78-45.12-34.42v-.31c0-20.34 15.91-36.1 45.43-36.1 20.65 0 35.95 4.89 48.34 14.68l-17.44 24.17c-10.1-7.34-22.18-10.55-32.12-10.55-5.35 0-7.8 1.84-7.8 4.44v.31c0 2.91 2.91 4.74 14.23 6.88 27.38 5.05 45.74 13 45.74 34.57v.31c0 22.49-18.51 36.25-47.27 36.25-21.74.01-41.32-6.1-54.93-18.04z"/><path d="M197.44 734.3h91.32v29.37h-56.14v10.86h52.31v25.85h-52.31v11.63h56.9v29.37h-92.09V734.3z"/><path d="M299.16 734.3h52.31c18.97 0 31.05 4.74 38.55 12.24 6.42 6.42 9.79 14.38 9.79 25.39v.31c0 15.6-8.11 26.46-21.11 32.74l24.93 36.41h-40.84L342.6 810.8h-7.65v30.59h-35.79V734.3z"/><path d="M350.4 785.24c8.57 0 13.77-3.82 13.77-10.4v-.31c0-6.88-5.35-10.25-13.61-10.25h-15.6v20.96h15.44z"/><path d="M408.83 734.3h35.79v107.08h-35.79V734.3z"/><path d="M454.72 788.14v-.31c0-31.05 25.55-55.83 58.59-55.83 33.04 0 58.28 24.48 58.28 55.53v.31c0 31.05-25.54 55.83-58.59 55.83-33.04 0-58.28-24.47-58.28-55.53z"/><path d="M535.49 788.14v-.31c0-12.7-8.72-24.17-22.49-24.17-13.61 0-22.18 11.32-22.18 23.86v.31c0 12.7 8.72 24.17 22.49 24.17 13.61.01 22.18-11.31 22.18-23.86z"/><path d="M580.46 793.34V734.3h36.41v58.59c0 13.31 6.88 18.97 16.52 18.97s16.52-5.2 16.52-18.2V734.3h36.41v58.28c0 36.56-21.26 50.94-53.23 50.94-31.98 0-52.63-14.69-52.63-50.18z"/><path d="M688.75 825.31l19.12-22.79c11.63 8.87 24.93 12.54 37.48 12.54 6.43 0 9.18-1.68 9.18-4.59v-.31c0-3.06-3.37-4.74-14.84-7.04-24.02-4.89-45.13-11.78-45.13-34.42v-.31c0-20.34 15.91-36.1 45.43-36.1 20.65 0 35.95 4.89 48.34 14.68l-17.44 24.17c-10.1-7.34-22.18-10.55-32.12-10.55-5.35 0-7.8 1.84-7.8 4.44v.31c0 2.91 2.91 4.74 14.23 6.88 27.38 5.05 45.74 13 45.74 34.57v.31c0 22.49-18.51 36.25-47.27 36.25-21.72.01-41.3-6.1-54.92-18.04z"/><path d="M856.1 781.57l1.84-1.84c16.21-2.14 21.26-5.66 21.26-10.55v-.15c0-3.52-3.21-5.97-9.02-5.97s-14.23 3.82-21.72 9.64l-16.52-24.78c9.79-8.72 23.25-15.45 41.76-15.45 22.79 0 39.31 12.85 39.31 32.43v.31c0 19.12-12.08 27.53-29.52 32.58l-1.84 10.25h-21.26l-4.29-26.47zm-3.37 32.27h35.49v27.53h-35.49v-27.53z"/></g></svg>
path {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}
svg {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  outline: 1px solid black;
}
canvas {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: auto;
  touch-action: none;
}
body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: flex-start;
  margin: 0;
  background: black;
}
View Compiled
console.clear();

const largePaths = document.querySelectorAll("path");
const smallPaths = [];
const svg_width = Math.ceil(
  parseFloat(document.querySelector("svg").viewBox.baseVal.width)
);
const svg_height = Math.ceil(
  parseFloat(document.querySelector("svg").viewBox.baseVal.height)
);
const scale = 0.7;
const detail = 8;
const offset = [0, 0];
let bigCoords = [];
let smallCoords = [];
let ratio = 1;
let context;

function setupHTMLOnce() {
  largePaths.forEach((path) => {
    let bbox = path.getBBox();
    let _path = path.cloneNode();
    path.viewportElement.appendChild(_path);
    path.bbox = path.getBBox();
    _path.bbox = _path.getBBox();
    path.length = path.getTotalLength();
    _path.length = _path.getTotalLength();
    smallPaths.push(_path);
  });
}

function updateHTML() {
  largePaths.forEach((path, i) => {
    let _path = smallPaths[i];
    const cx = path.bbox.x + path.bbox.width / 2;
    const cy = path.bbox.y + path.bbox.height / 2;
    path.cx = cx;
    path.cy = cy;
    let _scale = scale;
    _path.setAttribute(
      "transform",
      `matrix(${_scale}, 0, 0, ${_scale}, ${cx - _scale * cx}, ${
        cy - _scale * cy
      })`
    );

    let localMatrix = path.viewportElement.createSVGMatrix();
    let localTransformList = path.transform.baseVal;
    if (localTransformList.length) {
      localMatrix = localTransformList.consolidate().matrix;
    }
    path.matrix = localMatrix;

    localMatrix = _path.viewportElement.createSVGMatrix();
    localTransformList = _path.transform.baseVal;
    if (localTransformList.length) {
      localMatrix = localTransformList.consolidate().matrix;
    }
    _path.matrix = localMatrix;
  });
  bigCoords = [];
  
  largePaths.forEach((path) => {
    const coords = [];
    for (let i = 0; i < path.length + detail; i += detail) {
      let p = path.getPointAtLength((path.length - i) % path.length);
      let transformedPoint = p.matrixTransform(path.matrix);
      coords.push([transformedPoint.x, transformedPoint.y]);
    }
    bigCoords.push(coords);
  });
  
  smallPaths.forEach((path, i) => {
    const coords = [];
    for (let j = 0; j < path.length + detail; j += detail) {
      let p = path.getPointAtLength((path.length - j) % path.length);
      let transformedPoint = p.matrixTransform(path.matrix);
      coords.push([transformedPoint.x, transformedPoint.y]);
    }
    smallCoords[i] = coords;
  });
}

function setup() {
  const size = min(windowWidth, windowHeight);
  const _width = size;
  const _height = _width * (svg_height / svg_width);
  ratio = _width / svg_width;
  const canvas = createCanvas(ceil(_width), ceil(_height));
  context = canvas.drawingContext;
  noFill();
  setupHTMLOnce();
  updateHTML();
  context.lineWidth = 2;
  context.strokeStyle = "white";
  context.lineJoin = 'round';
  context.lineCap = 'round';
  mouseX = width / 2;
  mouseY = height;
}
function windowResized() {
  const size = min(windowWidth, windowHeight);
  const _width = size;
  const _height = _width * (svg_height / svg_width);
  ratio = _width / svg_width;
  resizeCanvas(ceil(_width), ceil(_height));
}
function draw() {
  clear();
  bigCoords.forEach((path, i) => {
    context.lineWidth = 2;
    context.strokeStyle = 'rgba(255, 255, 255, 1)';
    // Draw big path
    context.beginPath();
    path.forEach((coord, j) => {
      context.lineTo(coord[0] * ratio, coord[1] * ratio);
    });
    context.stroke();
    context.closePath();

    // Draw small path
    context.beginPath();
    path.forEach((coord, j) => {
      const dist = Math.hypot((largePaths[i].cx * ratio) - mouseX, (largePaths[i].cy * ratio) - mouseY);
      const offsetX = ((largePaths[i].cx * ratio) - mouseX) * (dist * 0.0001);
      const offsetY = ((largePaths[i].cy * ratio) - mouseY) * (dist * 0.0001);
      context.lineTo(
        smallCoords[i][j][0] * ratio + offsetX,
        smallCoords[i][j][1] * ratio + offsetY 
      );
    });
    context.stroke();
    context.closePath();

    context.lineWidth = 1;
    context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    // Connect paths
    path.forEach((coord, j) => {
      context.beginPath();
      context.moveTo(coord[0] * ratio, coord[1] * ratio);
      const dist = Math.hypot((largePaths[i].cx * ratio) - mouseX, (largePaths[i].cy * ratio) - mouseY);
      const offsetX = ((largePaths[i].cx * ratio) - mouseX) * (dist * 0.0001);
      const offsetY = ((largePaths[i].cy * ratio) - mouseY) * (dist * 0.0001);
      context.lineTo(
        smallCoords[i][j][0] * ratio + offsetX,
        smallCoords[i][j][1] * ratio + offsetY
      );
      context.stroke();
      context.closePath();
    });
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js