Open as new workspace

Something along a path

A texture

View source Pathogen · 120 lines
define ViewBox(0, 0, 8000, 8000);
define default PathLayer('main-path-layer') ${
  fill: #bbb;
  stroke: #222;
  stroke-width: 1;
};

let primaryPath = @{
  m 0 0
  h 2400
  tangentArc(120, 0.5pi);
  v 2400
  tangentArc(120, 0.5pi);
  h -2400
  tangentArc(120, 0.5pi);
  v -2400
  tangentArc(120, 0.2pi);
};

let primaryPath2 = @{
  m 0 0 
  q 30 20 0 180 
  t -130 280 
  q -424 275 30 340 
  t 230 360 
  v 400
} << primaryPath.rotateAtVertexIndex(0, 0.15pi);

let primaryPathLayer = PathLayer('primary') ${
  stroke: #ccc;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 4 10;
};

let projection = null;
primaryPathLayer.apply {
  projection = primaryPath2.scale(1.2, 1.2).drawTo(2400, 1000);
}

let primaryPathPoints = projection.partition(720);

let offsetPoints = primaryPathPoints.map() {|item|
  return {
    point: item.point.polarTranslate(calc(item.angle - 0.5pi), 0),
    tangent: item.angle,
    normal: calc(item.angle - 0.5pi),
  };
};

let offsetPointsLayer = PathLayer('offset-points') ${
  stroke: #00000044;
  fill: #00000022;
  stroke-width: 1;
};

let baseColor = Color(CSSVar(`--base`, oklch(0.0000 0.0000 0.0 / 0.72)));
let primaryColor = Color(CSSVar(`--primary`, oklch(0.6291 0.1001 214.4)));
let secondaryColor = Color(CSSVar(`--secondary`, oklch(0.6203 0.1966 19.0)));
let tertiaryColor = Color(CSSVar(`--tertiary`, oklch(0.8595 0.1600 96.7)));

let shadowStyle = ${
  filter: drop-shadow(4px 4px 3px #888);
};
let baseStroke = PathLayer('base-stroke') ${
  stroke: baseColor.alpha(32%);
  stroke-linecap: round;
  stroke-width: 16;
} << shadowStyle;
let primaryStroke = PathLayer('primary-stroke') ${
  stroke: primaryColor.alpha(64%);
  stroke-linecap: round;
  stroke-width: 12;
} << shadowStyle;
let secondaryStroke = PathLayer('secondary-stroke') ${
  stroke: secondaryColor.alpha(72%);
  stroke-linecap: round;
  stroke-width: 10;
} << shadowStyle;
let tertiaryStroke = PathLayer('tertiary-stroke') ${
  stroke: tertiaryColor.alpha(84%);
  stroke-linecap: round;
  stroke-width: 8;
} << shadowStyle;

for (item in offsetPoints) {
  let {point, normal} = item;
  offsetPointsLayer.apply {
    circle(point.x, point.y, 10);
  }
  baseStroke.apply {
    let relX = randomRange(calc(point.x - 5), calc(point.x + 5));
    let relY = randomRange(calc(point.y - 5), calc(point.y + 5));
    M relX calc(relY - 32)
    polarLine(randomRange(calc(normal - 0.005pi), calc(normal + 0.005pi)), 480);
  }
  primaryStroke.apply {
    let relX = randomRange(calc(point.x - 5), calc(point.x + 5));
    let relY = randomRange(calc(point.y - 5), calc(point.y + 5));
    M relX calc(relY - 40)
    let relNormal = calc(normal - 0.2pi);
    polarLine(randomRange(calc(relNormal - 0.01pi), calc(relNormal + 0.01pi)), 240);
  }
  secondaryStroke.apply {
    let relX = randomRange(calc(point.x - 5), calc(point.x + 5));
    let relY = randomRange(calc(point.y - 5), calc(point.y + 5));
    M relX calc(relY - 40)
    let relNormal = calc(normal + 0.2pi);
    polarLine(randomRange(calc(relNormal - 0.01pi), calc(relNormal + 0.01pi)), 160);
  }
  tertiaryStroke.apply {
    let relX = randomRange(calc(point.x - 5), calc(point.x + 5));
    let relY = randomRange(calc(point.y - 5), calc(point.y + 5));
    M relX calc(relY - 40)
    let relNormal = calc(normal + 0.05pi);
    polarLine(randomRange(calc(relNormal - 0.01pi), calc(relNormal + 0.01pi)), 80);
  }
}