Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SVG Tape
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment