forked from 9elements/fancy-border-radius
-
Notifications
You must be signed in to change notification settings - Fork 0
/
full-control.html
125 lines (116 loc) · 11.7 KB
/
full-control.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Border Radius Generator</title>
<meta name="description" content="A visual generator to build organic looking shapes with the help of CSS3 border-radius property">
<meta property="og:title" content="Border Radius Generator - Full Control" />
<meta property="twitter:title" content="Border Radius Generator - Full Control" />
<meta property="og:image" content="https://9elements.github.io/fancy-border-radius/full-control.png">
<meta property="twitter:image:src" content="https://9elements.github.io/fancy-border-radius/full-control.png">
<meta property="og:description" content="Generator to build organic shapes with CSS3 border-radius">
<meta property="twitter:description" content="Generator to build organic shapes with CSS3 border-radius">
<meta property="og:url" content="https://9elements.github.io/fancy-border-radius/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@supremebeing09">
<meta name="twitter:label1" value="Made with ❤">
<meta name="twitter:data1" value="by Mirko and Nils @ 9elements">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NMX425V');</script>
<!-- End Google Tag Manager -->
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,800|Ubuntu+Mono" rel="stylesheet">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMX425V"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container">
<header class="header">
<h1>8 Point full control</h1>
<div class="header__links">
<a href="https://9elements.com/blog/css-border-radius/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path id="9e" d="M43.7 33.3l.2.3c-1-.5-1.8-1.3-2.7-1.9 0 .3 2 1.4 1.9 1.6l-2.6-1.8c-.1.2.4.8.3.7l.4.4s2.7 2.2 2.5 2.5l-1-.7.3.4-1.7-1.3.4.4c-.5 0-1.5-1.2-2-1.4l-.8-.7v.1a2 2 0 01-.6-.4s-.6-.9-.9-.8l.5.5c-.5.1-1-1.2-1.7-1 0 0 3 2.8 3 3h-.1c.2.5 1 1 1.4 1.5-1-.6-1.9-1.5-2.8-2-.4-.2-.5-.6-.8-.4l-1-.6v.4c-.7-.6-1.4-1.4-2.2-1.9l.4.7.2.4a82 82 0 01-3.7-3.1c-.2-.3-1.5-1.5-1.8-1.1a25 25 0 00-3.8-3l1.3 1.3-1.4-1.1a80 80 0 01-1.7-1.5l-1-.9-1.8 1.5-.5.4-1.6 1.4-2 1.6s.1 0 0-.2l-.5.4-2.8 2.5-2.1 1.8-2.3 2c-.8.7 1-.5.3.2l-.4.4c-.2 0-.3.2-.5.4l-.6.3c0-.2 0-.2-.3-.3a1 1 0 01-.4-.3 6.4 6.4 0 01-.8-2c.1-.4 0-.9-.2-1.3-.2-.6-.2-1.2-.2-1.7 0-.4.3-.6.5-.8l1.4-1.4 1-.8c.3-.1.5-.4.8-.7l.8-.8c.4-.4 1-.6 1.3-1l4.2-3.5 2.2-1.9-.3-.3-2.8-2.4-2.7-2.4c-1.5-1.2-2.8-2-4.3-3.3C6.8 9.1 5.2 8 5 7c-.1-.7.8-1.5 1.2-2 0 0 1.4-2.2 1.9-2 .1 0 .3-.2.6 0 .6.2 1 .6 1.3 1l4 3.6 8.2 6.9.5-.4 1.7-1.2 2.2-1.6 1-.7 2-1.4A391.2 391.2 0 0134 6.4l.7-.5.4-.2 2.3-1.4 3-1.6c.3 0 .5-.3 1-.3l-.8.6c.3.1.7-.2.7-.1 0 0-.1.3 0 .2l.4-.2c-.1.3-.3.4-.5.5.3 0 .5-.3.8-.3-.3.3-.7.4-1 .6l-.7.4c-.1.3-.4.3-.5.5l.6-.2c.1 0 0 0 0 .1.9-.3 1.6-.9 2.5-1.1l-1 .6-.8.5-.6.3c-.1 0-.3.1-.2.2 0 .2.2.1.3 0l1.2-.6h.1c0 .4-.4.5-.6.8.2 0 .3-.2.5-.3l1-.3.8-.2-.6.5s-.2 0-.1.2c0 .2.2 0 .3 0l.3-.2h.1v.2c-.3 0-.5.2-.7.3l-.5.5s.2-.1.2 0l-.2.2c-.9.4-1.7 1-2.5 1.6-.4.2-1.4.8-1.5 1-.4.1-.7.4-1 .6-.1 0-.2 0-.2.2h.2a7 7 0 001.5-1l1-.4L42 6.7c.3-.2.2-.2.5-.1l-.3.2a8.2 8.2 0 01-1.7 1.4l-.3.3c.9-.4 1.7-1 2.6-1.5l-1 .7c-.6.4-1.2.6-1.7 1.1l-.4.2c-.5.5-1.2.7-1.8 1.1l-.6.5-.2.2c-.5 0-.8.6-1.3.8l-.8.5-.9.6-1.4 1-.8.5-1 .7-1.7 1.3-.3.3c-.4 0-.5.4-.9.5.2.1-.4.4-.4.4-.3.2-.6.1-.8.4l-.5.3c3.3 2.8 6.6 5.5 9.8 8.4 1.6 1.5 3.4 3 5.2 4.3l4.4 3.9c-.2 0-1.9-1.2-2-1.4zm-.4 6.8c-.4.2-2.6.2-1 .4 1 .1-.6.2-.6.6.3 0 .8.6 1 .6l-.8.3c.8.2-.7.2-.6.4.3.6-.2.4.4.7.3 0 .2.6 0 .6l-.6.3c0 .2-.2.3-.4.3l-1.7.5h-2.2a76.4 76.4 0 01-8.4.4 49.5 49.5 0 01-7.2.2A231 231 0 015.7 45c-.3 0-.4 0-.5-.2 0-.2 0-.3-.2-.4-.2-.1-.2-.5 0-.7-.3-.4 0-1.2-.2-1.7 0-.4.1-.4.3-.7-.2 0-.3-.3-.2-.4 0-.3 0-.5.2-.8.1-.2 0-.4.4-.4H6l1.5.1a57.4 57.4 0 018.7.4l17-.2c1 0 2-.2 2.9-.1h2.1l1.5-.2 1 .2c0-.2.9 0 1 0l1.5.2z"/>
</svg>
Read the Story
</a>
<a href="https://github.com/9elements/fancy-border-radius">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path id="github" d="M17.3790323,35.421875 C17.3790323,35.578125 17.1935484,35.703125 16.9596774,35.703125 C16.6935484,35.7265625 16.5080645,35.6015625 16.5080645,35.421875 C16.5080645,35.265625 16.6935484,35.140625 16.9274194,35.140625 C17.1693548,35.1171875 17.3790323,35.2421875 17.3790323,35.421875 Z M14.8709677,35.0703125 C14.8145161,35.2265625 14.9758065,35.40625 15.2177419,35.453125 C15.4274194,35.53125 15.6693548,35.453125 15.7177419,35.296875 C15.766129,35.140625 15.6129032,34.9609375 15.3709677,34.890625 C15.1612903,34.8359375 14.9274194,34.9140625 14.8709677,35.0703125 Z M18.4354839,34.9375 C18.2016129,34.9921875 18.0403226,35.140625 18.0645161,35.3203125 C18.0887097,35.4765625 18.2983871,35.578125 18.5403226,35.5234375 C18.7741935,35.46875 18.9354839,35.3203125 18.9112903,35.1640625 C18.8870968,35.015625 18.6693548,34.9140625 18.4354839,34.9375 Z M23.7419355,5 C12.5564516,5 4,13.2265625 4,24.0625 C4,32.7265625 9.62903226,40.140625 17.6693548,42.75 C18.7016129,42.9296875 19.0645161,42.3125 19.0645161,41.8046875 C19.0645161,41.3203125 19.0403226,38.6484375 19.0403226,37.0078125 C19.0403226,37.0078125 13.3951613,38.1796875 12.2096774,34.6796875 C12.2096774,34.6796875 11.2903226,32.40625 9.96774194,31.8203125 C9.96774194,31.8203125 8.12096774,30.59375 10.0967742,30.6171875 C10.0967742,30.6171875 12.1048387,30.7734375 13.2096774,32.6328125 C14.9758065,35.6484375 17.9354839,34.78125 19.0887097,34.265625 C19.2741935,33.015625 19.7983871,32.1484375 20.3790323,31.6328125 C15.8709677,31.1484375 11.3225806,30.515625 11.3225806,23 C11.3225806,20.8515625 11.9354839,19.7734375 13.2258065,18.3984375 C13.016129,17.890625 12.3306452,15.796875 13.4354839,13.09375 C15.1209677,12.5859375 19,15.203125 19,15.203125 C20.6129032,14.765625 22.3467742,14.5390625 24.0645161,14.5390625 C25.7822581,14.5390625 27.516129,14.765625 29.1290323,15.203125 C29.1290323,15.203125 33.0080645,12.578125 34.6935484,13.09375 C35.7983871,15.8046875 35.1129032,17.890625 34.9032258,18.3984375 C36.1935484,19.78125 36.983871,20.859375 36.983871,23 C36.983871,30.5390625 32.233871,31.140625 27.7258065,31.6328125 C28.4677419,32.25 29.0967742,33.421875 29.0967742,35.2578125 C29.0967742,37.890625 29.0725806,41.1484375 29.0725806,41.7890625 C29.0725806,42.296875 29.4435484,42.9140625 30.4677419,42.734375 C38.5322581,40.140625 44,32.7265625 44,24.0625 C44,13.2265625 34.9274194,5 23.7419355,5 Z M11.8387097,31.9453125 C11.733871,32.0234375 11.7580645,32.203125 11.8951613,32.3515625 C12.0241935,32.4765625 12.2096774,32.53125 12.3145161,32.4296875 C12.4193548,32.3515625 12.3951613,32.171875 12.2580645,32.0234375 C12.1290323,31.8984375 11.9435484,31.84375 11.8387097,31.9453125 Z M10.9677419,31.3125 C10.9112903,31.4140625 10.9919355,31.5390625 11.1532258,31.6171875 C11.2822581,31.6953125 11.4435484,31.671875 11.5,31.5625 C11.5564516,31.4609375 11.4758065,31.3359375 11.3145161,31.2578125 C11.1532258,31.2109375 11.0241935,31.234375 10.9677419,31.3125 Z M13.5806452,34.09375 C13.4516129,34.1953125 13.5,34.4296875 13.6854839,34.578125 C13.8709677,34.7578125 14.1048387,34.78125 14.2096774,34.65625 C14.3145161,34.5546875 14.266129,34.3203125 14.1048387,34.171875 C13.9274194,33.9921875 13.6854839,33.96875 13.5806452,34.09375 Z M12.6612903,32.9453125 C12.5322581,33.0234375 12.5322581,33.2265625 12.6612903,33.40625 C12.7903226,33.5859375 13.0080645,33.6640625 13.1129032,33.5859375 C13.2419355,33.484375 13.2419355,33.28125 13.1129032,33.1015625 C13,32.921875 12.7903226,32.84375 12.6612903,32.9453125 Z"/>
</svg>
View on GitHub
</a>
<a href="https://9elements.github.io/fancy-border-radius/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path id="Rectangle" fill-rule="nonzero" d="M24.0857027,7 L7,7 L7,22.6873616 C9.39421258,15.1953076 15.8597102,9.26870529 24.0857027,7 Z M35.6205861,7 C37.9839229,8.357033 39.9042677,10.8838056 41,14.054951 L41,7 L35.6205861,7 Z M41.000001,29.8715298 C39.7100146,35.2928746 37.2771188,39.4173134 34.3240071,41 L41.000001,41 L41.000001,29.8715298 Z M23.2761601,41 C15.4368984,39.6169529 9.31510474,36.3203691 7,32.189082 L7,41 L23.2761601,41 Z M4,4 L44,4 L44,44 L4,44 L4,4 Z"/>
</svg>
Simple Version
</a>
</div>
</header>
<div class="generator" id="box">
<div class="generator__shape generator__shape--8v" id="shape"></div>
<span class="generator__handle generator__handle--8v generator__handle--second" id="leftBottom"></span>
<span class="generator__handle generator__handle--8v generator__handle--third" id="topRight"></span>
<span class="generator__handle generator__handle--8v generator__handle--fourth" id="rightBottom"></span>
<span class="generator__handle generator__handle--8v generator__handle--fourth" id="bottomRight"></span>
<span class="generator__handle generator__handle--8v" id="left"></span>
<span class="generator__handle generator__handle--8v" id="top"></span>
<span class="generator__handle generator__handle--8v generator__handle--third" id="right"></span>
<span class="generator__handle generator__handle--8v generator__handle--second" id="bottom"></span>
</div>
<div>
<div class="output">
<div class="output__label">border-radius:</div>
<div class="input-group">
<span type="text" class="output__code" id="code">
10% 10% 10% 10% / 10% 10% 10% 10%
</span>
<button class="output__button" id="copy">copy</button>
</div>
</div>
<div class="advanced">
<div class="advanced__switch">
<input class="advanced__check" type="checkbox" id="enable-advanced">
<label class="advanced__trigger" for="enable-advanced">Custom size:
<span></span>
</label>
</div>
<div class="advanced__settings" id="dimension-input">
<div class="input-group">
<label for="width">Width:</label>
<input id="width" type="number" min="5" max="2000" value="300" />
</div>
<div class="input-group">
<label for="height">Height:</label>
<input id="height" type="number" min="5" max="2000" value="300" />
</div>
</div>
</div>
</div>
</div>
<div id="clipboard_copied"></div>
<footer class="footer">
Made with
<span class="footer__heart">💜</span> by
<a href="https://github.com/mirko314" target="_blank">Mirko</a> and
<a href="https://twitter.com/supremebeing09" target="_blank">Nils</a> @
<a href="https://9elements.com/" target="_blank">9elements</a> |
<a href="https://9elements.com/imprint" target="_blank">Imprint</a>
</footer>
<script type="module" language="javascript" type="text/javascript" src="full-control.js"></script>
</body>
</html>