인터페이스 / 맥동

Hot cocoa pulse

겨울 화면에 어울리는 부드럽게 맥동하는 마시멜로가 든 따뜻한 코코아 아이콘입니다.

무료 사용 · CC0-1.0 ↗이 아이콘으로 애니메이션 만들기 ↗

96 × 96 PX · SVG

원하는 모습으로 편집

01 / 애니메이션

재생 시간 (ms)시작 지연 (ms)

속도 변화반복재생 방향움직임 강도1.0×

02 / 모양색상#253E35크기 (px)선 두께1.7 px

편집한 설정은 이 브라우저에 저장됩니다. 계정 없이 바로 사용할 수 있습니다.

바로 사용할 수 있는 SVG.

하나의 파일 · SVG + CSS

코드 형식

<svg xmlns="http://www.w3.org/2000/svg" id="svg-hot-cocoa-pulse-1p6i0dh" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="#253e35" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" role="img" aria-labelledby="svg-hot-cocoa-pulse-1p6i0dh-title">
  <title id="svg-hot-cocoa-pulse-1p6i0dh-title">Hot cocoa pulse</title>
  <!-- Source: Motive Originals
Author: Motive project
Source page: /sources/original/
License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
Original project artwork, CC0-1.0. No attribution required. -->
  <style>@keyframes svg-hot-cocoa-pulse-1p6i0dh-motion-0{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
#svg-hot-cocoa-pulse-1p6i0dh [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-hot-cocoa-pulse-1p6i0dh-motion-0;animation-duration:1400ms;animation-delay:0ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:both}
@media(prefers-reduced-motion:reduce){#svg-hot-cocoa-pulse-1p6i0dh [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M5 9h12v8a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4Z M17 10h1a3 3 0 0 1 0 6h-1 M8 7c-2-2 2-2 0-4 M13 7c-2-2 2-2 0-4"/>
    <rect x="8" y="7" width="3" height="3" rx="0.5"/>
  </g>
</svg>

CSS 애니메이션과 움직임 줄이기 지원이 포함됩니다. JavaScript나 외부 파일이 필요하지 않습니다.

GIF는 흰색 배경에 움직임을 위한 여백을 포함합니다. 색상·크기·시간·반복 설정이 반영됩니다.

인터페이스 활용 예제

버튼을 눌러 아이콘과 화면의 반응을 확인하세요. 이 페이지 안에서만 동작하는 데모이며 동작 줄이기 설정을 따릅니다.

인터페이스 제어

—

작은 디테일, 세심한 사용.

겨울 메뉴나 숙소, 따뜻한 공간의 소개 옆에 배치하고 필요한 정보를 글로 표시하세요.

움직임은 화면의 의미를 보조해야 합니다. 피드백에는 제한된 반복 횟수를 사용하고 중요한 정보는 글로도 전달하세요. 내려받은 SVG는 사용자의 움직임 줄이기 설정을 따릅니다.

SVG 사용 방법 ↗

카테고리: 인터페이스
모션: 맥동
캔버스: 24 × 24 viewBox
라이선스: CC0-1.0
출처: Motive 직접 제작프로젝트에서 직접 제작한 도형
제작자: Motive 프로젝트
태그: 겨울, 코코아, 포근함

원하는 모습으로 편집

바로 사용할 수 있는 SVG.

인터페이스 활용 예제

인터페이스 제어

작은 디테일, 세심한 사용.

함께 사용하기 좋은 아이콘.

Candy cane ring

Fireplace pulse

Ice skate bounce

Icicles draw

Mitten ring