Эксперимент

Стадия продолжения эксперимента.

by Варлам Ерофеич

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Вводная Snap.svg</title>
	<script src="js/snap.svg-min.js">
	</script>
	<script src="js/main.js">
	</script>
	<style>
	  /*#svg {width: 100%; height: 100%;}*/
	</style>
</head>
<body>
	<!-- width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="none" --> 
	<svg id="svg" preserveaspectratio="none" viewbox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<style>
		.lua{stroke: #333; stroke-width: 14%; stroke-linecap: round;} 
    .rua{width:12%; height:20%; stroke: #000; stroke-width: 2%; fill:#ccc;} 
    .line {stroke: #000; stroke-width: 2%; stroke-linecap: round;} 
    .circle {r:6%; fill:#ccc; stroke:#000; stroke-width:2%;} 
    .ota, .uta {fill:#ccc; stroke:#000; stroke-width:2%;} 
    .iota{r:3%; fill:#ccc; stroke:#000; stroke-width:2%;} 
    .jota{r:3%; fill:#000; stroke:#000; stroke-width:2%;} 
		</style>
		<symbol id="символ">
			<circle cx="50" cy="50" fill="gold" r="50"></circle>
			<circle cx="50" cy="50" fill="orangered" r="35"></circle>
			<circle cx="50" cy="50" fill="crimson" r="20"></circle>
			<circle cx="50" cy="50" fill="maroon" r="5"></circle>
		</symbol>
		<symbol id="ota" width="50%" height="50%" viewbox="0 0 600 600">
			<ellipse class="uta" cx="80%" cy="100%" rx="10%" ry="15%"></ellipse>
      <ellipse class="ota" cx="50%" cy="100%" rx="10%" ry="15%"></ellipse>
		</symbol>
	</defs><!--style="stroke:black;" fill:#000; fill="#555" -->
	<g id="пуск">
		<line class="lua" x1="25%" x2="25%" y1="22%" y2="30%"></line>
		<rect class="rua" rx="6%" ry="6%" x="44%" y="16%"></rect>
		<rect width="80%" height="2%" x="10%" y="25%" rx="1%" ry="1%" fill="#000"></rect>
    <line class="line" x1="10%" x2="90%" y1="50%" y2="50%"></line>
		<circle class="circle" cx="25%" cy="56%" r="40%"></circle>
		<circle class="circle" cx="50%" cy="50%" r="40%"></circle>
		<circle class="circle" cx="75%" cy="44%" r="40%"></circle>
	</g>
  </svg> <!-- width="10%" height="10%" viewBox="0 0...

CSS

body {
  background: 
  radial-gradient(black 2.5%, transparent 40%) 0 0,
  radial-gradient(black 2.5%, transparent 40%) 3px 3px,
  radial-gradient(rgba(255,255,255,.2) 10%, transparent 30%) .6px .6px,
  radial-gradient(rgba(255,255,255,.2) 10%, transparent 30%) 3.6px 3.6px;
  background-color:#243844;
  background-size:6px 6px;
  background-attachment: fixed;
  padding: .1vw .1vw;
  position: relative;
}
svg {width:46vw; height:46vw; position: relative; background-color:#ccc;} /* position: absolute; #567 display:flex; inline-block */