34 lines
1.8 KiB
XML
34 lines
1.8 KiB
XML
|
<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>
|
||
|
|
<g id="path">
|
||
|
|
<path d="M 0 0 l 22 -5 m 70 -12 c 10 0 40 -39 40 -39 m 465 40 c 12 0 12 -4 12 -4c 20 -42 70 -57 110 -57 l 79 0 m 483 90 l 205 0" style="fill: none; stroke-linejoin: round;"/>
|
||
|
|
<path d="M 780 -90 l 25 27 l 5 0 l 0 -30 z" style="fill: #905438; stroke: none;" />
|
||
|
|
</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;}
|
||
|
|
]]></style>
|
||
|
|
|
||
|
|
<!-- Background image -->
|
||
|
|
<image xlink:href="./standing.jpg" x="0" y="0" width="2000" height="1500" />
|
||
|
|
|
||
|
|
<g transform="translate(267 456)">
|
||
|
|
<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>
|