<html>
<title>SVG SCALABLE</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<style>
@font-face {
font-family: 'prototypo-regular';
src: url('http://jorgeatgu.com/font/scalable-webfont.eot');
src: url('http://jorgeatgu.com/font/scalable-webfont.eot?#iefix') format('embedded-opentype'),
url('http://jorgeatgu.com/font/scalable-webfont.woff') format('woff'),
url('http://jorgeatgu.com/font/scalable-webfont.ttf') format('truetype'),
url('http://jorgeatgu.com/font/scalable-webfont.svg#prototypo-regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family:'NexaBold';
src: url('http://jorgeatgu.com/font/nexa_bold-webfont.eot');
src: url('http://jorgeatgu.com/font/nexa_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://jorgeatgu.com/font/nexa_bold-webfont.woff') format('woff'),
url('http://jorgeatgu.com/font/nexa_bold-webfont.ttf') format('truetype'),
url('http://jorgeatgu.com/font/nexa_bold-webfont.svg#nexa_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2550 3300">
<animate id="primera" attributeName="viewBox" dur="1s" values="0 4000 2550 3300; 0 1800 2550 3300" begin="0s" fill="freeze"/>
<animate id="segunda" attributeName="viewBox" dur="2s" values="0 1800 2550 3300; 0 200 2550 3300; -350 300 800 400" begin="15s" fill="freeze"/>
<animate id="tercera" attributeName="viewBox" dur="5s" values="-350 300 800 400; 1450 300 800 400; -1800 200 7100 6600" begin="17s" fill="freeze"/>
<g id="fondo">
<rect fill="white" stroke="white" stroke-width="110" width="2550" height="1874"/>
<rect y="1425.9" fill="#D03053" stroke="white" stroke-width="110" width="2550" height="1874"/>
</g>
<g fill="#006837" fill-opacity="0.25" stroke-opacity="0.25" stroke="white" stroke-width="4">
<rect y="2019" width="100" height="100">
<animate id="mover" attributeName="x" from="-100" to="931" begin="0s" dur="2s" fill="freeze"/>
<animate id="crecer" attributeName="width" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animate attributeName="height" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animateTransform id="rotar" attributeName="transform" type="rotate" values="0 1265 2363; 360 1265 2363; 15 1265 2363" dur="10s" begin="crecer.end" fill="freeze"/>
</rect>
<rect y="2019" width="100" height="100">
<animate id="mover" attributeName="x" from="-500" to="931" begin="0s" dur="2s" fill="freeze"/>
<animate id="crecer" attributeName="width" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animate attributeName="height" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animateTransform id="rotar" attributeName="transform" type="rotate" values="0 1265 2363; 360 1265 2363; 30 1265 2363" dur="10s" begin="crecer.end+0.5s" fill="freeze"/>
</rect>
<rect y="2019" x="931" width="100" height="100">
<animate id="mover" attributeName="y" from="-400" to="2019" begin="0s" dur="2s" fill="freeze"/>
<animate id="crecer" attributeName="width" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animate attributeName="height" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animateTransform id="rotar" attributeName="transform" type="rotate" values="0 1265 2363; 360 1265 2363; 45 1265 2363" dur="10s" begin="crecer.end+1s" fill="freeze"/>
</rect>
<rect y="2019" width="100" height="100">
<animate id="mover" attributeName="x" from="2000" to="931" begin="0s" dur="2s" fill="freeze"/>
<animate id="crecer" attributeName="width" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animate attributeName="height" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animateTransform id="rotar" attributeName="transform" type="rotate" values="0 1265 2363; 360 1265 2363; 60 1265 2363" dur="10s" begin="crecer.end+1.5s" fill="freeze"/>
</rect>
<rect y="2019" x="931" width="100" height="100">
<animate id="mover" attributeName="y" from="3000" to="2019" begin="0s" dur="2s" fill="freeze"/>
<animate id="crecer" attributeName="width" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animate attributeName="height" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animateTransform id="rotar" attributeName="transform" type="rotate" values="0 1265 2363; 360 1265 2363; 75 1265 2363" dur="10s" begin="crecer.end+2s" fill="freeze"/>
</rect>
<rect y="2019" width="100" height="100">
<animate id="mover" attributeName="x" from="-300" to="931" begin="0s" dur="2s" fill="freeze"/>
<animate id="crecer" attributeName="width" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animate attributeName="height" from="100" to="688" begin="mover.end" dur="2s" fill="freeze"/>
<animateTransform id="rotar" attributeName="transform" type="rotate" values="0 1265 2363; 360 1265 2363; 90 1265 2363" dur="10s" begin="crecer.end+2.5s" fill="freeze"/>
</rect>
</g>
<text opacity="0" x="1150" y="2500" fill="#436A61" font-family="'prototypo-regular'" font-size="36" letter-spacing="11">S
<animate attributeName="font-size" values="0; 395" dur="3s" begin="mover.end+2s" fill="freeze"/>
<animate attributeName="opacity" from="0" to="1" dur="3s" begin="mover.end+1s" fill="freeze"/>
<animateTransform id="rotar" attributeName="transform" type="rotate" values="0 1265 2363; 360 1265 2363; 0 1265 2363" dur="5s" begin="mover.end+2s" fill="freeze"/>
<animate attributeName="y" values="2500; 650" begin="14s" dur="2s" fill="freeze"/>
<animate attributeName="x" values="1150; 215" begin="16s" dur="2s" fill="freeze"/>
</text>
<g id="calable" opacity="0">
<text x="460" y="650" fill="#436A61" font-family="'prototypo-regular'" font-size="396" letter-spacing="11">C</text>
<text x="730" y="650" fill="#436A61" font-family="'prototypo-regular'" font-size="396" letter-spacing="11">A</text>
<text x="1000" y="650" fill="#436A61" font-family="'prototypo-regular'" font-size="396" letter-spacing="11">L</text>
<text x="1220" y="650" fill="#436A61" font-family="'prototypo-regular'" font-size="396" letter-spacing="11">A</text>
<text x="1500" y="650" fill="#436A61" font-family="'prototypo-regular'" font-size="396" letter-spacing="11">B</text>
<text x="1780" y="650" fill="#436A61" font-family="'prototypo-regular'" font-size="396" letter-spacing="11">L</text>
<text x="1980" y="650" fill="#436A61" font-family="'prototypo-regular'" font-size="396" letter-spacing="11">E</text>
<text transform="matrix(1 0 0 1 576.1411 844.2318)"><tspan x="0" y="0" fill="#994C41" font-family="'NexaBold'" font-size="107.577" letter-spacing="9">Animation SVG</tspan><tspan x="113.8" y="225.9" fill="#222220" font-family="'NexaBold'" font-size="80.6827" letter-spacing="7">Vakin Y.</tspan></text>
<animate attributeName="opacity" from="0" to="1" dur="3s" begin="segunda.end" fill="freeze"/>
</g>
</svg>
</body>
</html>
Comments
Post a Comment