Login / Join
SVG Masks & CSS3 Animations
submitted on 24/02/2013 by
Codicode
+ infos
Config
Embed
Share
SVG Masks & CSS3 Animations
by
Codicode
SVG Masks & CSS3 Animations
by Chtiwi Malek.
Source : http://www.codicode.com/art/drawing_and_animating_shapes_svg_css3.aspx
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="000" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div align="center"> <div style="position:relative;display:inline-block;"> <svg class="c1" width="150" height="150" version="1.1"> <mask id="msk1"> <rect width="150" height="150" fill="#fff"/> <circle fill="#000" cx="50" cy="50" r="18" /> <circle fill="#000" cx="100" cy="50" r="18" /> <circle fill="#000" cx="75" cy="93" r="18" /> </mask> <rect width="150" height="150" mask="url(#msk1)" fill="#fff"/> </svg> <svg class="c2" width="102" height="100" version="1.1"> <circle fill="#111" cx="25" cy="25" r="18" /> <circle fill="#111" cx="76" cy="25" r="18" /> <circle fill="#111" cx="50" cy="70" r="18" /> </svg> </div></div>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body { background-color:#fff; } .c1 { position : absolute; left:-100px; top:0px; -moz-animation:r1 24s linear infinite; -webkit-animation:r1 24s linear infinite; animation:r1 24s linear infinite; z-index:20; } .c1:hover, .c1:hover + .c2 { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; animation-play-state:paused; } @-moz-keyframes r1 { 100% { -moz-transform: rotate(-360deg); }} @-webkit-keyframes r1 { 100% { -webkit-transform: rotate(-360deg); }} @keyframes r1 { 100% { transform: rotate(-360deg); }} .c2 { position : absolute; left:-80px; top:20px; -moz-animation:r2 25s linear infinite; -webkit-animation:r2 25s linear infinite; animation:r2 25s linear infinite; z-index:10; } @-moz-keyframes r2 { 100% { -moz-transform: rotate(360deg); }} @-webkit-keyframes r2 { 100% { -webkit-transform: rotate(360deg); }} @keyframes r2 { 100% { transform: rotate(360deg); }}
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact