html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>SVG Code Playground</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<header>
<button id="rn" onclick="run()">RUN</button>
<!-- The logo -->
<svg viewBox="0,0,250,50">
<text style="font-weight: bold; fill: yellow; font-family: arial;" x="9" y="25">
SVG
<tspan x="75" y="30" fill="#fff" style="font-size: 1em; font-weight: lighter;">
Code Playground
</tspan>
</text>
<g onclick="s1()">
<circle cx="228" cy="25" r="20" fill="transparent"/>
<text x="225" y="15" style="font-size:30px" fill="#ccc">
.
<tspan x="225" y="25">
.
</tspan>
<tspan x="225" y="35">
.
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
header{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 50px;
border: none;
line-height: 50px;
background-color: #135;
z-index: 5;
}
header button{
position: fixed;
right: 0px;
top: 0px;
width: 25%;
height: 50px;
border: none;
outline: none;
background-color: #080;
color: #fff;
}
header svg{
position: fixed;
left: 0px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var ww, wh, tx, ps=0;
ww = window.innerWidth;
wh = window.innerHeight;
function run(){
$("#s1_div").animate({height: "0px"}, 300)
if(!ps){
document.getElementById('hld').innerHTML = "<svg id='p' onclick='allr()'>" + document.getElementById('txt').value + "</svg>";
$("#rn").animate({borderRadius: "50px", width: "35px", height: "35px", top: "7.5px", right: "7.5px"},100)
$("#rn").html("BACK")
$("#rn").css("background-color", "#c22")
$("#rn").animate({right: ww-42.5 + "px"},100)
$("#rn").animate({borderRadius: "0px", width: "25%", height: "50px", top: "0px", right: "75%"},100)
$("header svg").delay(200).animate({left: "25%"},200)
ps = 1;
$(".tx").animate({left: "-=100%"}, 300)
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run