SVG Tape

index.html

<svg width="500" height="300" viewBox="0 0 500 300">
  <!-- Define components -->
  <defs>
    <g id="tape">
      <rect width="450" height="200" fill="#222"
            stroke="#aaa" stroke-width="5"/>
    </g>
    
    <g id="wheel">
      <circle cx="50" cy="50" r="50"
          fill="#333" stroke="#aaa" stroke-width="2" />
      <line x1="15" y1="15" x2="85" y2="85"
          stroke="#aaa" stroke-width="1" />
      <line x1="15" y1="85" x2="85" y2="15"
          stroke="#aaa" stroke-width="1" />
      <line x1="0" y1="50" x2="100" y2="50"
          stroke="#aaa" stroke-width="1" />
      <line x1="50" y1="0" x2="50" y2="100"
          stroke="#aaa" stroke-width="1" />
      
      <animateTransform attributeType="xml"
                        attributeName="transform"
                        type="rotate"
                        from="0 50 50"
                        to="360 50 50"
                        dur="3s"
                        repeatCount="indefinite"/>
    </g>
    
    <g id="wheelCenter">
      <circle cx="0" cx="0" r="20"
              fill="#ccc" stroke="#222" stroke-width="1" />
    </g>
  </defs>
  
  <!-- Use the components -->
  <!-- Tape box-->
  <use xlink:href="#tape" x="0" y="50" />
  <!-- Left wheel-->
  <use class="wheel origin1" xlink:href="#wheel" x="50" y="100" />
  <use xlink:href="#wheelCenter" x="100" y="150" />
  <!-- Right wheel-->
  <use class="wheel origin2" xlink:href="#wheel" x="300" y="100" />
  <use xlink:href="#wheelCenter" x="350" y="150" />
  <!--Connecting lines-->
  <line x1="100" y1="100" x2="350" y2="100"
        stroke="#aaa" stroke-width="2" />
  <line x1="100" y1="200" x2="350" y2="200"
        stroke="#aaa" stroke-width="2" />
</svg>

svg-tape.markdown

SVG Tape

Just playing with SVG

A Pen by Alex Ilyaev on CodePen.

License.