1
0
Fork 0
freesewing/sites/shared/components/measurements/tim/head.svg

41 lines
2.4 KiB
XML
Raw Normal View History

<!-- __SDEFILE__ - This file is a dependency for the stand-alone environment -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="1500" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1500">
<defs>
<path id="path" d="M 0 0 l 118 0 m -765 -26 l 112 0 m -759 28 l 143 -38" style="fill: none; stroke-linejoin: round;"/>
<g id="start">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l -15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
<g id="end">
<path d="M 0 -25 l 0 50" style="stroke: #000; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: round;" />
<path d="M 0 0 l 15 -15 l 0 30 z" style="stroke: #000; stroke-width: 3px; fill: #000; stroke-linecap: butt; stroke-linejoin: round;" />
</g>
</defs>
<style type="text/css"><![CDATA[
path {fill: none; stroke-linejoin: round;}
.tape {stroke: #000; stroke-width: 20px; stroke-linecap: butt;}
.redtape {stroke: #f00; stroke-width: 1px;stroke-linecap: round;}
.color {stroke: #fff86c; stroke-width: 16px; stroke-linecap: butt;}
.cm {stroke: #000; stroke-width: 16px; stroke-dasharray: 2 10; stroke-linecap: butt;}
.line {stroke: #000; stroke-width: 3px; stroke-dasharray: 8 5; stroke-linecap: round;}
]]></style>
<!-- Background image -->
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
<g transform="translate(1550 190)">
<use x="0" y="0" xlink:href="#path" class="redtape">
<animate attributeType="CSS" attributeName="stroke-width" from="1" to="450" begin="loop.begin+2.5s" dur="0.5s" fill="freeze" />
<animate attributeType="CSS" attributeName="stroke-opacity" from="1" to="0" begin="loop.begin+2.7s" dur="0.3s" fill="freeze" />
</use>
<use x="0" y="0" xlink:href="#path" class="tape"/>
<use x="0" y="0" xlink:href="#path" class="color"/>
<use x="0" y="0" xlink:href="#path" class="cm"/>
</g>
<!-- timing loop -->
<rect height="1" width="1" x="-10" y="-10">
<animate attributeType="CSS" attributeName="visibility" from="hide" to="hide" begin="0;loop.end" dur="4s" id="loop" />
</rect>
</svg>