The AfterBolt Logo

The AfterBolt Logo #

The rings emanating from a lightning bolt, suggests an ephemeral burst after a lightning strike.

Bitcoin transactions on mainnet have a permanent record, while Bitcoin transactions over the Lightning Network are ephemaral.

Some Math Behind the Artwork’s SVG Design #

Here is a mathematical description of the three line segments and three arcs in the logo figure. Standing 6 units high from the origin is a lightning bolt, which is composed of 3 line segments with lenghts defined by the golden ratio, \(τ = (1 + sqrt(5))/2, which is approx. 1.618\) $$ (τ = (1 + sqrt(5))/2, which is approx. 1.618 $$

% KaTeX inline notation

Inline notation: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)

Here are the coordinates (using SVG orientation for the y-axis).

| Start | End |——— | [0, 0] | [sqrt(10)/(2τ), 3] ~= [.9771975379, -3] | [sqrt(10)/(2τ), -3] | [-sqrt(10)/(2τ), -3] | [-sqrt(10)/(2τ), -3] | [0, 6]

First draw an arc from along a circle one (1) unit from the origin. Then pick a starting point where travelling clockwise, let’s say through an angle of π/4 you reach the x-axis. Cartesian values of that point is [-cos(π/4), -sin(π/4)]. To achive a desired visual balance, next, compute the arc’s endpoint by considering the angle defined by the slope (3) of the bolt’s lowest line segment, so atan(3), and then use that to determine the angle where the arc’s endpoint should lie, 2 atan(3) - π/4 And here are the coordinates for Arcs. Once the innermost arc’s endpoints are determined as [x, y], each enclosing arc’s endpoints are calcated by adding or subtracting cos(atan(3)), sin(atan(3)) to (x,y).

| Arc Radius | Start | End |———– | 1 | cos(π/4), -sin(π/4) | -cos(2 atan(3) - π/4),-sin(2 atan(3) - π/4)

| 2 | cos(π/4)+cos(atan(3)), -sin(π/4)-sin(atan(3)) | -cos(2 atan(3) - π/4),-sin(2 atan(3) - π/4) | 3 | cos(π/4)-2cos(atan(3)), sin(π/4)-2sin(atan(3)) | …

P1.start + [cos(atan(3)), sin(atan(3))] | P1.end + [cos(atan(3)), sin(atan(3))]

assets/icons/a7t.svg #

 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="960" height="960"
     viewBox="-4 -4.5 8 8"
     transform="rotate(0)">

  <defs>
    <marker id="arrow" markerWidth="4" markerHeight="3"
	    refX="1" refY="1.5" orient="auto">
      <polygon points="0 0, 2.598 1.5, 0 3"
	       fill="darkorange"/>
    </marker>
  </defs>

  <rect x="-4" y="-4.5" width="8" height="8" fill="none"/>

  <path id="arcs"
	d="M 0.7071067812 -0.7071067812
	   A 1 1 0 1 1 -.141421356237 -.989949493661
	   M 1.0233345472 -1.6557900792
	   A 2 2 0 1 1 .1748064098 -1.9386327917
	   M 1.3395623132 -2.6044733773
	   A 3 3 0 1 1 -1.3395623132 -2.6044733773"
	fill="none"
	stroke-width="0.381966011232"
	stroke-linecap="round"/>
<!--
	stroke="currentcolor"
-->

  <path id="bolt"
	d="M 0 -6
	   L -0.9771975379 -3
	   L 0.9771975379 -3
	   L 0 0"
	fill="none"
	stroke-width="0.381966011232"
	stroke-linejoin="round"
	marker-end="url(#arrow)"/>
<!--
	stroke="currentcolor"
-->

  <use xlink:href="#bolt"
       stroke="darkorange"/>
<!--
       style="color:darkorange"/>
  -->

  <use xlink:href="#arcs"
       stroke="steelblue"/>
<!--       
       style="color:steelblue"/>
-->

  <!-- grid -->
<!--  <path visibility="hidden"
	d="M -5 -6
	   h10 v1 h-10 v1
	   h10 v1 h-10 v1
	   h10 v1 h-10 v1
	   h10 v1 h-10 v1
	   h10 v1 h-10 v1
	   v-10 h1 v10 h1
	   v-10 h1 v10 h1
	   v-10 h1 v10 h1
	   v-10 h1 v10 h1
	   v-10 h1 v10 h1
	   v-10 h1 v10 h1"
	fill="none" stroke="#888888" stroke-width="0.01"/>
-->


</svg>
<!--
 golden ratio
    stroke-width="0.236072936484"
    stroke-width="0.381966011232"
    stroke-width="0.618033988768"
    stroke-width="1"
-->