SVG drawing 2

index.html

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px"
	 height="200px" viewBox="0 0 600 200" enable-background="new 0 0 600 200" xml:space="preserve">

<g id="S">
  <g class="shapes">
	<rect id="square_1_" x="15.085" y="9.272" width="180.861" height="180.861"/>
	<line x1="15.085" y1="9.272" x2="195.947" y2="190.133"/>
	<line x1="15.085" y1="190.133" x2="195.947" y2="9.272"/>
	<circle cx="101.917" cy="157.479" r="30.084"/>
	<circle cx="111.167" cy="40.229" r="27"/>
	<circle cx="58.917" cy="185.729" r="4.5"/>
	<circle cx="150.167" cy="14.979" r="5"/>
	<circle cx="94.902" cy="53.566" r="46.663"/>
	<circle cx="104.612" cy="62.129" r="50.986"/>
	<circle cx="107.478" cy="139.146" r="50.986"/>
	<circle cx="124.836" cy="143.566" r="46.663"/>
	<line x1="48.836" y1="190.229" x2="48.836" y2="9.979"/>
	<line x1="161.836" y1="190.229" x2="161.836" y2="9.979"/>
  </g> <!-- shapes -->
  
  <path class="letter" d="M66.457,169.279c7.346,11.828,18.612,17.742,33.801,17.742c5.976,0,11.349-1.059,16.122-3.176
			c4.771-2.117,8.546-5.332,11.327-9.648c2.781-4.314,4.172-9.543,4.172-15.688c0-6.637-1.555-12.592-4.668-17.863
			c-3.113-5.27-7.305-10.086-12.574-14.441c-5.271-4.357-12.306-9.398-21.102-15.126c-10.293-6.639-18.447-12.406-24.464-17.305
			c-6.019-4.896-10.998-10.706-14.939-17.429c-3.942-6.723-5.913-14.523-5.913-23.405c0-10.29,2.614-18.942,7.843-25.957
			c5.229-7.013,12.158-12.22,20.791-15.624c8.631-3.402,18.134-5.104,28.51-5.104c6.141,0,11.473,0.457,15.997,1.369
			c4.523,0.914,8.297,2.055,11.328,3.424s6.328,3.093,9.898,5.166c4.066,2.408,6.93,3.61,8.59,3.61c1.574,0,2.781-0.891,3.609-2.676
			c0.828-1.784,1.496-4.626,1.992-8.528h5.852c-0.828,11.372-1.246,30.75-1.246,58.14h-5.848
			c-0.582-9.213-2.637-17.969-6.164-26.269c-3.527-8.299-8.465-15.043-14.816-20.23c-6.348-5.187-13.798-7.781-22.346-7.781
			c-5.396,0-10.229,1.039-14.504,3.112c-4.275,2.075-7.594,5.085-9.959,9.026c-2.365,3.942-3.549,8.527-3.549,13.756
			c0,8.466,2.531,15.396,7.595,20.791c5.062,5.396,11.659,10.853,19.795,16.371c8.133,5.521,13.612,9.234,16.433,11.143
			c9.961,6.641,17.844,12.408,23.656,17.305c5.809,4.898,10.539,10.625,14.191,17.181c3.652,6.557,5.477,14.15,5.477,22.781
			c0,10.873-2.82,20.045-8.465,27.514s-13.238,13.051-22.781,16.744c-9.547,3.693-20.213,5.541-31.997,5.541
			c-9.545,0-17.45-0.852-23.716-2.553c-6.268-1.701-12.057-4.004-17.367-6.91c-3.653-2.406-6.517-3.611-8.591-3.611
			c-1.577,0-2.781,0.895-3.61,2.678c-0.83,1.787-1.493,4.627-1.991,8.529h-5.852c0.663-10.625,0.996-33.572,0.996-68.846h5.852
			C54.898,142.037,59.112,157.453,66.457,169.279z"/>
</g> <!-- S -->
  
<g id="V">
  <g class="shapes">
	<rect id="square_3_" x="206.301" y="9.272" width="180.861" height="180.861"/>
	<line x1="206.301" y1="190.133" x2="387.162" y2="9.272"/>
	<line x1="387.162" y1="190.133" x2="206.301" y2="9.272"/>
	<circle cx="277.5" cy="25.225" r="9"/>
	<path d="M320.753,33.046
		c0,9.275,7.52,16.789,16.789,16.789c9.271,0,16.792-7.514,16.792-16.789c0-9.268-7.52-16.785-16.792-16.785
		C328.273,16.261,320.753,23.779,320.753,33.046z"/>
	<circle cx="296.837" cy="100.22" r="90.325"/>
	<circle cx="206.302" cy="30.954" r="15.974"/>
	<path d="M435.277,47.346
		c0,19.874-16.115,35.985-35.984,35.985c-19.875,0-35.986-16.111-35.986-35.985s16.111-35.983,35.986-35.983
		C419.162,11.363,435.277,27.472,435.277,47.346z"/>
  </g> <!-- shapes -->
  
  <path class="letter" d="M364.883,10.363c7.801,0,14.275-0.249,19.422-0.747v5.104c-4.232,1.661-8.426,4.917-12.574,9.772
			c-4.15,4.855-7.803,11.724-10.955,20.604l-53.782,145.535c-1.91-0.168-4.898-0.25-8.964-0.25c-3.902,0-6.766,0.082-8.59,0.25
			L224.329,31.029c-2.159-5.644-4.668-9.73-7.531-12.263c-2.864-2.531-5.706-3.879-8.528-4.046V9.616
			c10.209,0.498,23.156,0.747,38.843,0.747c17.346,0,30.252-0.249,38.718-0.747v5.104c-6.393,0.249-10.978,1.017-13.757,2.303
			c-2.782,1.288-4.171,3.673-4.171,7.158c0,2.657,1.037,6.642,3.112,11.952l44.943,114.162l31.373-84.532
			c4.73-13.362,7.095-23.736,7.095-31.124c0-6.805-1.805-11.765-5.416-14.877c-3.609-3.112-8.943-4.793-15.998-5.042V9.616
			C344.467,10.114,355.09,10.363,364.883,10.363z"/>
</g> <!-- V -->
  
<g id="G">
  <g class="shapes">
  <rect id="shapes_2_" x="397.207" y="9.272" width="180.861" height="180.861"/>
	<line x1="397.207" y1="190.133" x2="578.068" y2="9.272"/>
	<line x1="397.207" y1="9.272" x2="578.068" y2="190.133"/>
	<circle cx="487.12" cy="100.22" r="90.948"/>
	<circle cx="502.83" cy="63.559" r="50.666"/>
	<circle cx="549.83" cy="20.559" r="4.666"/>
	<circle cx="549.83" cy="181.893" r="6.332"/>
	<circle cx="573.164" cy="126.557" r="8.666"/>
	<circle cx="509.164" cy="132.225" r="12.666"/>
	<line x1="578.068" y1="113.034" x2="397.207" y2="113.034"/>
	<line x1="562.498" y1="9.272" x2="562.498" y2="190.133"/>
	<circle cx="497.604" cy="150.346" r="37.473"/>
  </g> <!-- shapes -->
  
  <path class="letter" d="M556.672,180.174c-1.246-3.07-2.988-4.605-5.23-4.605c-2.82,0-7.43,1.785-13.816,5.352
			c-14.777,8.551-28.719,12.824-41.832,12.824c-19.588,0-36.188-3.631-49.799-10.895c-13.613-7.262-23.883-17.76-30.812-31.496
			s-10.395-30.23-10.395-49.487c0-19.005,3.922-35.75,11.766-50.234c7.844-14.481,18.754-25.708,32.742-33.676
			c13.984-7.968,29.898-11.951,47.742-11.951c10.459,0,19.318,1.432,26.58,4.295s14.379,6.952,21.352,12.263
			c2.074,1.578,3.777,2.365,5.105,2.365c1.742,0,3.109-1.202,4.105-3.61c0.996-2.406,1.785-6.307,2.367-11.702h5.852
			c-0.664,11.537-0.996,32.119-0.996,61.749h-5.977c-1.246-11.453-3.195-20.769-5.852-27.949
			c-2.656-7.178-7.055-13.258-13.195-18.238c-4.066-3.9-9.09-6.95-15.066-9.15c-5.973-2.198-12.074-3.299-18.299-3.299
			c-11.871,0-21.746,4.046-29.629,12.139c-7.887,8.092-13.717,18.779-17.492,32.057c-3.777,13.28-5.664,27.763-5.664,43.449
			c0,58.844,16.309,88.266,48.926,88.266c7.385,0,13.404-1.699,18.053-5.105c2.238-1.492,3.816-3.277,4.73-5.352
			c0.91-2.074,1.367-4.73,1.367-7.969v-24.898c0-7.969-0.664-13.797-1.992-17.49s-3.715-6.225-7.156-7.596
			c-3.445-1.369-8.945-2.219-16.496-2.551v-5.105c9.793,0.582,24.316,0.872,43.574,0.872c15.688,0,27.055-0.29,34.109-0.872v5.105
			c-3.484,0.332-5.973,1.018-7.469,2.053c-1.492,1.039-2.531,2.988-3.113,5.852s-0.871,7.533-0.871,14.006v50.545h-5.102
			C558.621,186.564,557.914,183.244,556.672,180.174z"/>
</g> <!-- G -->
  
</svg>

style.scss

svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.letter {
  fill: none;
  stroke: none;
}

#S .shapes {
  fill: none;
  stroke: #00AEEF;
  stroke-width: 1.5;
  animation-name: draw;
  stroke-dasharray: 725;
  stroke-dashoffset: -725;
  animation-direction: forward;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

#S .letter {
  fill: none;
  stroke: red;
  stroke-width: 2.5;
  animation-name: draw;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  animation-direction: forward;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 5s;
}

#V .shapes {
  fill: none;
  stroke: #00AEEF;
  stroke-width: 1.5;
  animation-name: draw;
  stroke-dasharray: 725;
  stroke-dashoffset: -725;
  animation-direction: forward;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-delay: 10s;
}

#V .letter {
  fill: none;
  stroke: red;
  stroke-width: 2.5;
  animation-name: draw;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  animation-direction: forward;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 14s;
}

#G .shapes {
  fill: none;
  stroke: #00AEEF;
  stroke-width: 1.5;
  animation-name: draw;
  stroke-dasharray: 725;
  stroke-dashoffset: -725;
  animation-direction: forward;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-delay: 19s;
}

#G .letter {
  fill: none;
  stroke: red;
  stroke-width: 2.5;
  animation-name: draw;
  stroke-dasharray: 1200;
  stroke-dashoffset: -1200;
  animation-direction: forward;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 23s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

svg-drawing-2.markdown

SVG drawing 2

A Pen by Richard Walker on CodePen.

License.

Luca Pacioli's De divina proportione