Just playing with SVG
A Pen by Alex Ilyaev on CodePen.
<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> |
Just playing with SVG
A Pen by Alex Ilyaev on CodePen.