summaryrefslogtreecommitdiff
path: root/sins.svg
diff options
context:
space:
mode:
authorAleš Smodiš <aless@guru.si>2015-10-02 11:22:06 +0200
committerAleš Smodiš <aless@guru.si>2015-10-02 11:22:06 +0200
commit0c168d0027f3350344d0fcdf16c554dcc8f3c92b (patch)
treeb263d19109400d33c31e3e0c5c5a256d03a4cae4 /sins.svg
parentf72d4a175d44283e1d2d35bccff706093600c1c2 (diff)
Remove deprecated files.
Diffstat (limited to 'sins.svg')
-rw-r--r--sins.svg133
1 files changed, 0 insertions, 133 deletions
diff --git a/sins.svg b/sins.svg
deleted file mode 100644
index 14ec645..0000000
--- a/sins.svg
+++ /dev/null
@@ -1,133 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- viewBox="0 0 150 70"
- preserveAspectRatio="xMidYMid"
- version="1.1">
- <desc>Animates sorted insert (sins/3) with rectangles.</desc>
-
- <!-- definiramo sceno -->
-
- <defs>
- <!-- CSS stil: definiramo barve, debeline črt, fonte, ... -->
- <style type="text/css"><![CDATA[
- line {
- stroke: black;
- stroke-width: 0.5;
- }
- .block {
- stroke: black;
- stroke-width: 0.5;
- fill: none;
- }
- .dashed {
- stroke-dasharray: 2,2;
- }
- text {
- font-family: Verdana, Tahoma, sans-serif;
- font-size: 4px;
- fill: black;
- }
- #ri-text, #ri-text-yes, #ri-text-no {
- visibility: hidden;
- }
- ]]></style>
-
- <!-- puščica na koncu črte -->
- <marker id="arrowhead"
- viewBox="0 0 10 10" refX="10" refY="5"
- markerUnits="strokeWidth"
- markerWidth="5"
- markerHeight="5"
- orient="auto">
- <path d="M 0 0 L 10 5 L 0 10" stroke="black" stroke-width="1.5" fill="none"/>
- </marker>
-
- <!-- obrezovanje (clipping), s katerim je narejena animacija prikazovanja črte, ki se "riše" od leve proti desni -->
- <clipPath id="ri-lineClip">
- <rect id="ri-lineClip-rect" x="7" width="0" height="50"/>
- </clipPath>
- </defs>
-
- <g transform="translate(0,10)"><!-- vse skupaj (sceno) pomaknemo 10 pixlov navzdol -->
- <line x1="0" x2="150" y1="50" y2="50"/><!-- spodnja črta za podlago -->
-
- <g transform="translate(90,0)">
- <g id="r1" transform="translate(0,0)"><!-- uporabi se transform, ker se le-ta lahko animira -->
- <rect width="7" height="10" y="40" class="block"/><!-- najmanjši pravokotnik; uporabimo y za "zapolnitev" vertikale, tako da so vsi pravokotniki enako visoki (lažje animiranje) -->
- </g>
- <g id="r2" transform="translate(10,0)">
- <rect width="7" height="20" y="30" class="block"/>
- </g>
- <g id="r3" transform="translate(20,0)">
- <rect width="7" height="30" y="20" class="block"/>
- </g>
- <g id="r4" transform="translate(30,0)">
- <rect width="7" height="40" y="10" class="block"/>
- </g>
- <g id="r5" transform="translate(40,0)">
- <rect width="7" height="50" y="0" class="block"/><!-- največji pravokotnik -->
- </g>
- </g>
-
- <g id="ri"><!-- skupina za pravokotnik, ki ga vrivamo -->
- <rect width="7" height="25" y="25" class="block"/><!-- dejanski pravokotnik / vrivanec -->
- <path id="ri-path" d="M 7 37.5 L 75 45" stroke="black" stroke-width="0.5" fill="none" class="dashed" marker-end="url(#arrowhead)" clip-path="url(#ri-lineClip)"/><!-- črta predstavljena z elementom path, ker tega lahko uporabimo tudi spodaj v textPath, npr. elementa line pa ne moremo -->
- <!-- besedilo, ki ga "nalimamo" na zgornjo črto/puščico s textPath, ter odgovora "Yes" in "No" v posebnih tspan segmentih, da lahko ločeno kontroliramo njuno prikaznost -->
- <text id="ri-text" transform="translate(3,-2)"><textPath xlink:href="#ri-path">Am I bigger than you? <tspan id="ri-text-yes">Yes.</tspan><tspan id="ri-text-no" style="display:none;">No!</tspan></textPath></text>
- </g>
- </g>
-
- <!-- spodaj je definirana animacija -->
-
- <!-- sklop 1: vrivanec se pripelje na sceno in vpraša prvega pravokotnika, če je večji od njega -->
- <animateTransform id="animStart" attributeName="transform" attributeType="XML" type="translate" from="0,0" to="15,0" dur="0.8s" additive="replace" fill="freeze" xlink:href="#ri"/><!-- pripelje vrivanca na sceno-->
- <animate id="animLine1" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animStart.endEvent+0.5s"/><!-- prikaže puščico -->
- <set id="animVisible1" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine1.endEvent"/><!-- prikaže vprašanje -->
- <set id="animVisible2" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animVisible1.endEvent+1.5s"/><!-- prikaže odgovor -->
-
- <!-- sklop 2: skrijemo puščico in napis ter repozicioniramo konec puščice malo višje: na sredino drugega pravokotnika -->
- <set id="animHide1" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible2.endEvent+2s"/><!-- skrijemo puščico -->
- <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide1.beginEvent"/><!-- skrijemo vprašanje -->
- <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide1.beginEvent"/><!-- skrijemo odgovor "Yes" -->
- <set attributeName="d" attributeType="XML" to="M 7 37.5 L 75 40" dur="0.1s" fill="freeze" xlink:href="#ri-path" begin="animHide1.beginEvent"/><!-- popravimo zadnjo koordinato, da kaže 5 pixlov višje -->
-
- <!-- sklop 3: premaknemo prvi pravokotnik za vrivancem, premaknemo vrivanca malo naprej -->
- <animateTransform id="animMove1" attributeName="transform" attributeType="XML" type="translate" from="0,0" to="-75,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r1" begin="animHide1.endEvent"/>
- <animateTransform attributeName="transform" attributeType="XML" type="translate" from="15,0" to="25,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animMove1.beginEvent"/>
-
- <!-- sklop 4: vrivanec vpraša drugega pravokotnika -->
- <animate id="animLine2" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animMove1.endEvent+0.5s"/><!-- prikaže puščico -->
- <set id="animVisible21" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine2.endEvent"/><!-- prikaže vprašanje -->
- <set id="animVisible22" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animVisible21.endEvent+1.5s"/><!-- prikaže odgovor -->
-
- <!-- sklop 5: skrijemo puščico in napis ter repozicioniramo konec puščice malo višje: na sredino tretjega pravokotnika, umaknemo "Yes" iz prikaza in namesto njega uvedemo "No" -->
- <set id="animHide2" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible22.endEvent+2s"/><!-- skrijemo puščico -->
- <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide2.beginEvent"/><!-- skrijemo vprašanje -->
- <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide2.beginEvent"/><!-- skrijemo odgovor "Yes" -->
- <set attributeName="d" attributeType="XML" to="M 7 37.5 L 75 35" dur="0.1s" fill="freeze" xlink:href="#ri-path" begin="animHide2.beginEvent"/><!-- popravimo zadnjo koordinato, da kaže 5 pixlov višje -->
- <set attributeName="display" attributeType="CSS" to="none" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide2.beginEvent"/><!-- izvzamemo odgovor "Yes" iz prikazne strukture -->
- <set attributeName="display" attributeType="CSS" to="block" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animHide2.beginEvent"/><!-- vključimo odgovor "No" v prikazno strukturo -->
-
- <!-- sklop 6: premaknemo drugi pravokotnik za vrivancem, premaknemo vrivanca malo naprej -->
- <animateTransform id="animMove2" attributeName="transform" attributeType="XML" type="translate" from="10,0" to="-65,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r2" begin="animHide2.endEvent"/>
- <animateTransform attributeName="transform" attributeType="XML" type="translate" from="25,0" to="35,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animMove2.beginEvent"/>
-
- <!-- sklop 7: vrivanec vpraša tretjega pravokotnika -->
- <animate id="animLine3" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animMove2.endEvent+0.5s"/><!-- prikaže puščico -->
- <set id="animVisible31" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine3.endEvent"/><!-- prikaže vprašanje -->
- <set id="animVisible32" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animVisible31.endEvent+1.5s"/><!-- prikaže odgovor -->
-
- <!-- sklop 8: skrijemo puščico in napis -->
- <set id="animHide3" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible32.endEvent+2s"/><!-- skrijemo puščico -->
- <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide3.beginEvent"/><!-- skrijemo vprašanje -->
- <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animHide3.beginEvent"/><!-- skrijemo odgovor "No" -->
-
- <!-- sklop 9: premaknemo pravokotnike skupaj: vse pravokotnike na levi premaknemo v desno -->
- <animateTransform id="animMove3" attributeName="transform" attributeType="XML" type="translate" to="100,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animHide3.endEvent"/><!-- vrivanec -->
- <animateTransform attributeName="transform" attributeType="XML" type="translate" to="-10,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r1" begin="animMove3.beginEvent"/><!-- prvi (najmanjši) pravokotnik -->
- <animateTransform attributeName="transform" attributeType="XML" type="translate" to="0,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r2" begin="animMove3.beginEvent"/><!-- drugi pravokotnik -->
-
- <!-- načeloma manjka še sklop 0, ki resetira stanje v prvotno, če hočemo da je animacija ponovljiva, kar pustimo bralcu za vajo -->
-</svg>