CSS animation으로 놀아 넘어뜨리는 -SVG Line -
오늘은 SVG를 사용하여 Line에서 애니메이션을 설정합니다.
1. 완성판
2. 왜?
모니터 심전도는 병동 관리에서는 엄청 소중합니다만, 꽤 어렵습니다. 특히 간호사들이 교과서에서 공부하는데 적합한 교재는 적고, 현장에서 고생하는 모습을 자주 봅니다. 교과서와 같은 정지화상을 좌학으로 보고 공부해도 현장감이 없기 때문에 실전에 살리기 어렵고 서투른 의식을 가진 사람들은 많으면 일순환기 내과의사로서 느끼고 있습니다.
그래서 가까운 장래에 SVG animation을 사용하여 모니터 심전도의 web site를 만들겠습니다만, 이 기술을 충분히 사용할 수 있으면 좋겠습니다.
3. 참고문헌
CSS trick
SVG line drawing animation | SVG Stroke Animation With Html and CSS
4. 분해해 본다
❶.
먼저 Figma에서 적절하게 라인을 작성합니다.
이제 코드를 작성해 보겠습니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<svg
width="288"
height="175"
viewBox="0 0 288 175"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 143.5C28.6 143.1 42.5 143.333 46 143.5C52.3333 128.834 70.2 108.3 91 143.5H109L113.5 174.5L133.5 1L159.5 174.5L167 143.5H201C208.167 134.5 227.5 121.9 247.5 143.5H287.5"
stroke="black"
/>
</svg>
</body>
</html>
styles.cssbody {
margin: 0;
padding: 0;
}
svg {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
❷.
그렇다면 어떻게 라인 애니메이션을 할 수 있습니까?
대답은 stroke-dasharray와 stroke-dashoffset을 사용합니다.
순서대로 설명합니다.
stroke-dasharray
파선의 간격을 붙이는 프로퍼티입니다.
값이 클수록 간격이 넓어집니다.
· stroke-dashoffset
SVG path가 시작되는 위치를 지정합니다.
이 두 가지를 어떻게 사용하든,
1. 점선 간격이 SVG의 선 길이와 동일한 값을 찾고 stroke-dasharray로 설정하여 모든 것을 숨 깁니다.
2. SVG의 path가 시작되는 위치를 모든 것이 숨겨지는 위치가 되도록 설정합니다. 즉, stroke_dasharray 와 stroke-dashoffset 에 같은 값을 설정합니다.
3. stroke_dashoffset을 애니메이션으로 이동합니다.
실제 코드로 보자.
styles.scsssvg {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.line {
stroke-width: 4px;
stroke-dasharray: 700px;
stroke-dashoffset: 700px;
animation: draw 2s linear infinite;
}
}
@keyframes draw {
to {
stroke-dashoffset: 0px;
}
}
이런 간단한 코드로, 심전도 파형이 완성되었습니다.
오늘은 이상입니다.또 내일~
Reference
이 문제에 관하여(CSS animation으로 놀아 넘어뜨리는 -SVG Line -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/4ced752bb257884736f9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
모니터 심전도는 병동 관리에서는 엄청 소중합니다만, 꽤 어렵습니다. 특히 간호사들이 교과서에서 공부하는데 적합한 교재는 적고, 현장에서 고생하는 모습을 자주 봅니다. 교과서와 같은 정지화상을 좌학으로 보고 공부해도 현장감이 없기 때문에 실전에 살리기 어렵고 서투른 의식을 가진 사람들은 많으면 일순환기 내과의사로서 느끼고 있습니다.
그래서 가까운 장래에 SVG animation을 사용하여 모니터 심전도의 web site를 만들겠습니다만, 이 기술을 충분히 사용할 수 있으면 좋겠습니다.
3. 참고문헌
CSS trick
SVG line drawing animation | SVG Stroke Animation With Html and CSS
4. 분해해 본다
❶.
먼저 Figma에서 적절하게 라인을 작성합니다.
이제 코드를 작성해 보겠습니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<svg
width="288"
height="175"
viewBox="0 0 288 175"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 143.5C28.6 143.1 42.5 143.333 46 143.5C52.3333 128.834 70.2 108.3 91 143.5H109L113.5 174.5L133.5 1L159.5 174.5L167 143.5H201C208.167 134.5 227.5 121.9 247.5 143.5H287.5"
stroke="black"
/>
</svg>
</body>
</html>
styles.cssbody {
margin: 0;
padding: 0;
}
svg {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
❷.
그렇다면 어떻게 라인 애니메이션을 할 수 있습니까?
대답은 stroke-dasharray와 stroke-dashoffset을 사용합니다.
순서대로 설명합니다.
stroke-dasharray
파선의 간격을 붙이는 프로퍼티입니다.
값이 클수록 간격이 넓어집니다.
· stroke-dashoffset
SVG path가 시작되는 위치를 지정합니다.
이 두 가지를 어떻게 사용하든,
1. 점선 간격이 SVG의 선 길이와 동일한 값을 찾고 stroke-dasharray로 설정하여 모든 것을 숨 깁니다.
2. SVG의 path가 시작되는 위치를 모든 것이 숨겨지는 위치가 되도록 설정합니다. 즉, stroke_dasharray 와 stroke-dashoffset 에 같은 값을 설정합니다.
3. stroke_dashoffset을 애니메이션으로 이동합니다.
실제 코드로 보자.
styles.scsssvg {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.line {
stroke-width: 4px;
stroke-dasharray: 700px;
stroke-dashoffset: 700px;
animation: draw 2s linear infinite;
}
}
@keyframes draw {
to {
stroke-dashoffset: 0px;
}
}
이런 간단한 코드로, 심전도 파형이 완성되었습니다.
오늘은 이상입니다.또 내일~
Reference
이 문제에 관하여(CSS animation으로 놀아 넘어뜨리는 -SVG Line -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/4ced752bb257884736f9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
❶.
먼저 Figma에서 적절하게 라인을 작성합니다.
이제 코드를 작성해 보겠습니다.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<svg
width="288"
height="175"
viewBox="0 0 288 175"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 143.5C28.6 143.1 42.5 143.333 46 143.5C52.3333 128.834 70.2 108.3 91 143.5H109L113.5 174.5L133.5 1L159.5 174.5L167 143.5H201C208.167 134.5 227.5 121.9 247.5 143.5H287.5"
stroke="black"
/>
</svg>
</body>
</html>
styles.css
body {
margin: 0;
padding: 0;
}
svg {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
❷.
그렇다면 어떻게 라인 애니메이션을 할 수 있습니까?
대답은 stroke-dasharray와 stroke-dashoffset을 사용합니다.
순서대로 설명합니다.
stroke-dasharray
파선의 간격을 붙이는 프로퍼티입니다.
값이 클수록 간격이 넓어집니다.
· stroke-dashoffset
SVG path가 시작되는 위치를 지정합니다.
이 두 가지를 어떻게 사용하든,
1. 점선 간격이 SVG의 선 길이와 동일한 값을 찾고 stroke-dasharray로 설정하여 모든 것을 숨 깁니다.
2. SVG의 path가 시작되는 위치를 모든 것이 숨겨지는 위치가 되도록 설정합니다. 즉, stroke_dasharray 와 stroke-dashoffset 에 같은 값을 설정합니다.
3. stroke_dashoffset을 애니메이션으로 이동합니다.
실제 코드로 보자.
styles.scss
svg {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.line {
stroke-width: 4px;
stroke-dasharray: 700px;
stroke-dashoffset: 700px;
animation: draw 2s linear infinite;
}
}
@keyframes draw {
to {
stroke-dashoffset: 0px;
}
}
이런 간단한 코드로, 심전도 파형이 완성되었습니다.
오늘은 이상입니다.또 내일~
Reference
이 문제에 관하여(CSS animation으로 놀아 넘어뜨리는 -SVG Line -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/4ced752bb257884736f9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
