Login / Join
SVG Shapes (Html and Css3)
submitted on 05/04/2017 by
Codicode
+ infos
Config
Embed
Share
SVG Shapes (Html and Css3)
by
Codicode
Example of html and css3 svg shapes (path, rect, polygon, circle, ellipse, use, rect)
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="57a" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<svg width="1900px" height="500px"> <path d="M 450 150 L 400 200 L 450 200 L 500 350 L 300 200 Z" style="fill:lightblue;stroke:black;stroke-width:5" /> <polygon points="100,10 150,10 250,100 150,100 50,50" style="fill:lightgreen;stroke:black;stroke-width:5px;" /> <ellipse cx="350px" cy="50px" rx="100" ry="30" /> <g id="g" transform="rotate(10 100 200)"> <rect x="100" y="200" width="100" height="100" fill="white" stroke="grey" stroke-width="10px" /> <circle id="c" cx="100" cy="200" r="20" /> <use x="100" y="0" class="oddCircle" xlink:href="#c" /> <use x="100" y="100" xlink:href="#c" /> <use x="0" y="100" xlink:href="#c" /> </g> <use x="220" y="400" xlink:href="#g" transform="scale(0.4)" /> </svg>
CSS
.oddCircle { stroke: black; stroke-width:10px; fill:#fff; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact