CSS&JS/⚡Thinkers

(CSS)cornic-gradient로 파이 그래프(원 그래프) 구현하기

arancia_ 2021. 6. 30. 14:13

https://css-tricks.com/complete-guide-to-css-functions/

 

A Complete Guide to CSS Functions

Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration.

css-tricks.com

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>cornic-gradient</title>
<link href="cornic-gradient.css" rel="stylesheet" type="text/css"/>
<script src="cornic-gradient.js" defer></script>
</head>
<body>
 
<h1>cornic-gradient, repeating-cornical-gradient</h1>
<h6>
    <p>https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()</p>
    <p>https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient()</p>
</h6>
 
<ul id="sample">
    <li><div class="gd-r"></div><h3>radial-gradient</h3><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()" target="_blank">link</a></li>
    <li><div class="gd-r-rp"></div><h3>repeating-radial-gradient</h3></li>
    <li><div class="gd-c"></div><div class="gd-c2"></div><h3>cornic-gradient</h3></li>
    <li><div class="gd-c-rp"></div><h3>repeating-cornic-gradient</h3></li>
</ul><!-- sample -->
 
<section id="sect">
    <input type="number" id="red" value="25" min="0" max="100">
    <input type="number" id="yellow" value="25" min="0" max="100">
    <input type="number" id="green" value="30" min="0" max="100">
    <input type="number" id="blue" value="20" min="0" max="100">
    <button id="btn">그래프 만들기</button>
</section><!-- sect -->
 
<div id="graph"></div>
 
</body>
</html>
cs

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
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
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;}
li{list-style-type:none;}
html,body{
    width:100%;min-height:100vh;
}
#sample{
    display:flex;flex-wrap:wrap;
    justify-content:space-evenly;
    position:relative;
    margin:3rem 0;
    width:100%;}
#sample li{
    position:relative;
    width:min(48%, 400px);
    margin:1%; padding:2rem 1rem;
    border:1px solid #ccc;
    text-align:center;}
#sample li div{
    width:50%;
    aspect-ratio:1/1;
    margin:0 auto 1rem;
    border:1px solid #ccc;}
.gd-r{
    background:radial-gradient(red,red,blue,blue 50%);}
.gd-r-rp{
    background:repeating-radial-gradient(red, red, blue, blue 50%);}
.gd-c{
    background:conic-gradient(red,blue);}
.gd-c2{
    background:conic-gradient(red 0 90deg,orange 90deg 180deg, yellow 180deg 270deg, green 270deg);}
.gd-c-rp{
    background:repeating-conic-gradient(from 0deg at 35% 55%, skyblue 0 9deg, blue 9deg 18deg);}
/*  */
#sect{
    display:flex;
    justify-content:center;
    width:100%;
    margin:2rem auto;padding:1rem;
    background:#eee;}
#sect input{
    display:block;
    margin:0 .5em; padding:.5em;
    font-family:inherit;font-size:1.8rem;}
#btn{
    padding:1em 2em;
    background:#333;
    font-family:inherit;font-size:1.5rem;color:#fff;}
/*  */
#graph{
    position:relative;
    width:min(50vw,500px);
    aspect-ratio:1/1;
    margin:2rem auto;
    border:1px solid #ccc;
    border-radius:50%;
    clip-path:path('M0,0v500h500V0H0z M250,356c-58.5,0-106-47.5-106-106s47.5-106,106-106s106,47.5,106,106S308.5,356,250,356z');}
#val{
    display:flex;
    justify-content:center;align-items:center;
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:30%;height:30%;
    background:#fff;
    border-radius:50%;
    box-shadow:5px 5px 1rem rgba(0,0,0,.1);
    font-size:2rem;
}
cs

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const num = document.querySelectorAll('[type="number"]');
const btn = document.getElementById('btn');
const graph = document.getElementById('graph');
const val = document.getElementById('val');
 
 
let arr = {
    val : [],
    deg : [],
    PCT : 100
}
 
let PCT = 100;
 
btn.addEventListener('click',makeGraph);
 
function makeGraph(){
    reset_arr();
    varify_arr();
    drawGraph();
}//makeGraph
 
function reset_arr(){
    arr.val = [];
    arr.deg = [];
    arr.PCT = 100;
    for(let ipt of num){arr.val.push(ipt.value);}
}
 
function varify_arr(){
    for(let val of arr["val"]){putDeg(val);}
}
 
function putDeg(val){
    const thisVal = 360 * val / 100;
    arr["deg"].push(thisVal);
};
 
function drawGraph(){
    const red = arr["deg"][0];
    const orange_end = red + arr["deg"][1];
    const green_end = orange_end + arr["deg"][2];
    
    graph.style.background = `
        conic-gradient(
            red 0 ${red}deg,
            orange ${red}deg ${orange_end}deg,
            green ${orange_end}deg ${green_end}deg,
            blue ${green_end}deg
        )`;
}
cs

'CSS&JS > ⚡Thinkers' 카테고리의 다른 글

sin구하기  (0) 2021.06.30
atan2로 클릭한 좌표 따라 회전시키기  (0) 2021.06.30
(vanilla JS) 체크박스 전체 선택 / 전체 해제 (3)  (0) 2021.06.30
vanilla JS Slider 1.2 (바닐라 자바스크립트 슬라이드 1.2)  (0) 2021.06.18
twitter app header처럼 vanilla JS로 스크롤에 따라 내려오고 올라가는 헤더 만들기(2)  (0) 2021.06.10

'CSS&JS/⚡Thinkers'의 다른글

  • 현재글(CSS)cornic-gradient로 파이 그래프(원 그래프) 구현하기

관련글

댓글

티스토리툴바