Heureux ?

Courbettes

Boing

<svg width="400" height="400">
<defs>
<circle cx="0" cy="0" r="20" fill="red" id="rondro"/>
<path d="M-17,0 a1,1 0 0,0 13,0" fill="yellow" id="rondja"/>
<path d="M-8,0 a1,1 0 0,0 4,0" fill="black" id="rondno"/>
</defs>
<g transform="translate(200,200)">
<use xlink:href="#rondro"/>
<use xlink:href="#rondja"/>
<use xlink:href="#rondja" transform="translate(21,0)"/>
<use xlink:href="#rondno"/>
<use xlink:href="#rondno" transform="translate(12,0)"/>
<animateTransform attribueType="xml" attributeName="transform" type="scale" additive="sum" values="0;50;0" begin="0s" dur="12s" repeatcount="indefinite"/>

</g>
</svg>

Rencontre

<svg height="600" width="400">
<defs>
<g id="ovni2">
<ellipse cx="0" cy="0" fill="#959595" rx="41.5" ry="13.5"></ellipse>
<circle cx="-0.8" cy="-12.5" fill="#959595" r="9"></circle>
<line stroke="#000000" stroke-width="0.5" x1="-42" x2="42" y1="2" y2="2"></line>
<line stroke="#ffffff" stroke-dasharray="5,5" stroke-width="2" x1="-42" x2="42" y1="2" y2="2">
<animate attributename="stroke-dashoffset" begin="0s" dur="1s" repeatcount="indefinite" values="0;-10"></animate>
</line>
</g>
<mask id="attraction">
<path fill="white" opacity="1">
<animate attributename="d" begin="window.end" dur="2s" fill="freeze" values="m288.3 235 L288.3 235 L288.3 235z;m288.3 235 L268.3 470 L308.3 470z;m288.3 235 L188.3 470 L388.3 470z"></animate>
<animate attributename="d" begin="kidnap.end" dur="2s" fill="freeze" values="m288.3 235 L188.3 470 L388.3 470z;m288.3 235 L268.3 470 L308.3 470z;m288.3 235 L288.3 235 L288.3 235z"></animate>
</path>
</mask>
</defs>
<image height="600" width="400" x="0" xlink:href="http://aforgrave.ca/detritus/wp-content/uploads/2013/05/Minimalist-The-Invaders.png" y="0"></image>
<g opacity="1">
<g id="bg">
<rect fill="#1e1e1e" height="600" width="400" x="0" y="0"></rect>
<rect fill="#000000" height="600" width="400" x="0" y="446"></rect>
</g>
<g id="victim">
                        <animate attributename="opacity" dur="0.1s" fill="freeze" begin="0s" values="0"/>
                        <animate attributename="opacity" dur="0.1s" fill="freeze" begin="window.end+4s" values="1"/>
                        <animate attributename="opacity" dur="0.1s" fill="freeze" begin="kidnap.end" values="1;0"/>
<circle cx="10" cy="10" r="4"></circle>
<line stroke="black" stroke-width="2" x1="10" x2="20" y1="10" y2="20"></line>
<line stroke="black" stroke-width="2" x1="15" x2="7" y1="15" y2="20">
<animatetransform attributename="transform" attributetype="xml" begin="0s" dur="1s" fill="freeze" repeatcount="indefinite" type="rotate" values="0 15 15; 20 15 15;0 10 10"></animatetransform>
</line>
<line stroke="black" stroke-width="2" x1="15" x2="23" y1="15" y2="10">
<animatetransform attributename="transform" attributetype="xml" begin="0s" dur="0.8s" fill="freeze" repeatcount="indefinite" type="rotate" values="0 15 15; -20 15 15;0 10 10"></animatetransform>
</line>
<line stroke="black" stroke-width="2" x1="20" x2="30" y1="20" y2="20">
<animatetransform attributename="transform" attributetype="xml" begin="0s" dur="1s" fill="freeze" repeatcount="indefinite" type="rotate" values="0 20 20; 20 20 20;0 20 20"></animatetransform>
</line>
<line stroke="black" stroke-width="2" x1="20" x2="20" y1="20" y2="30">
<animatetransform attributename="transform" attributetype="xml" begin="0s" dur="0.8s" fill="freeze" repeatcount="indefinite" type="rotate" values="0 20 20; -20 20 20;0 20 20"></animatetransform>
</line>
<animatetransform attributename="transform" attributetype="xml" begin="0s" dur="6s" fill="freeze" repeatcount="indefinite" type="rotate" values="0 16 16; 360 24 24"></animatetransform>
<animatemotion begin="window.end+4s" dur="12s" fill="freeze" values="270 400;270 200" id="kidnap"></animatemotion>
</g>
<g id="house">
<path d="m253.5 415.5 L293.5 387 L331 412.5 L 345 412.5 L 345 455 L 258 455 L 258 430z" fill="#464646"></path>
<rect fill="#1e1e1e" height="15" width="15" x="279" y="424">
<animate attributename="fill" begin="vol.end" dur="1s" fill="freeze" id="window" values="#1e1e1e;gold"></animate>
</rect>
</g>
<g id="ovni">
<line stroke="#959595" stroke-width="2" x1="91" x2="89" y1="232" y2="239"></line>
<line stroke="#959595" stroke-width="2" x1="126" x2="128" y1="232" y2="239"></line>
<ellipse cx="108.3" cy="221" fill="#959595" rx="41.5" ry="13.5"></ellipse>
<circle cx="107.45" cy="208.5" fill="#959595" r="9"></circle>
<line stroke="#000000" stroke-width="0.5" x1="66" x2="150" y1="223" y2="223"></line>
<line stroke="#ffffff" stroke-dasharray="5,5" stroke-width="2" x1="66" x2="150" y1="223" y2="223">
<animate attributename="stroke-dashoffset" begin="0s" dur="1s" repeatcount="indefinite" values="0;-10"></animate>
</line>
<animatemotion begin="0s" dur="6s" fill="freeze" id="vol" values="-150 0;180 0"></animatemotion>
</g>
<g id="title">
<text fill="#959595" font-family="Verdana" font-size="28" transform="scale(1 1.3)" x="30" y="42">
THE
</text>
<text fill="#959595" font-family="Verdana" font-size="65" transform="scale(1 1.3)" x="30" y="94">
INVADERS
</text>
<rect fill="#959595" height="6" width="335" x="36" y="129"></rect>
</g>
</g>
<path fill="gold" opacity="0.1">
<animate attributename="d" begin="window.end" dur="2s" fill="freeze" values="m288.3 235 L288.3 235 L288.3 235z;m288.3 235 L268.3 470 L308.3 470z;m288.3 235 L188.3 470 L388.3 470z"></animate>
                 <animate attributename="d" begin="kidnap.end" dur="2s"  fill="freeze" values="m288.3 235 L188.3 470 L388.3 470z;m288.3 235 L268.3 470 L308.3 470z;m288.3 235 L288.3 235 L288.3 235z" id="retract"></animate>
</path>
<symbol id="ray">
<rect fill="gold" height="25" n opacity="0.2" width="206" x="185" y="445">
<animatemotion attributename="up" begin="0s" dur="0.5s" repeatcount="indefinite" values="0 0;0 -50"></animatemotion>
</rect>
</symbol>
<g style="mask:url(#attraction)">
<use xlink:href="#ray"></use>
<use transform="translate(0 50)" xlink:href="#ray"></use>
<use transform="translate(0 -50)" xlink:href="#ray"></use>
<use transform="translate(0 -100)" xlink:href="#ray"></use>
<use transform="translate(0 -150)" xlink:href="#ray"></use>
<use transform="translate(0 -200)" xlink:href="#ray"></use>
</g>
<use xlink:href="#ovni2" transform="translate(288.3 221)">
<animateTransform attributeName="transform" additive="sum" type="scale" from="1" to="48" begin="retract.end" dur="12s" fill="freeze" />
<animate attributeName="opacity" values="0" begin="0s" fill="freeze" />
<animate attributeName="opacity" values="1" begin="retract.end" fill="freeze" />
</use>
</svg>

JUMP

See the Pen Daily Pen #010: A generic Infinite Runner game by Eduardo Lopes (@EduardoLopes) on CodePen.

synchro

2D scroll