인터페이스 / 흔들림

Alarm clock ring

알림과 예약 시간을 표현하는 가볍게 울리는 알람 시계입니다.

무료 사용 · 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-alarm-clock-ring-1wzl3hs" 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-alarm-clock-ring-1wzl3hs-title">
  <title id="svg-alarm-clock-ring-1wzl3hs-title">Alarm clock ring</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-alarm-clock-ring-1wzl3hs-motion-0{0%{transform:rotate(0deg)}20%{transform:rotate(-18deg)}40%{transform:rotate(15deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}100%{transform:rotate(0deg)}}
#svg-alarm-clock-ring-1wzl3hs [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-alarm-clock-ring-1wzl3hs-motion-0;animation-duration:1200ms;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-alarm-clock-ring-1wzl3hs [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <circle cx="12" cy="13" r="7"/>
    <path d="M4 4l3-2 M17 2l3 2 M12 9v4l3 2 M7 19l-2 2 M17 19l2 2"/>
  </g>
</svg>

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

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

인터페이스 활용 예제

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

알림 설정

—

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

알림을 설정하면 한 번 재생하고 예약 시간을 글로 표시하세요.

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

SVG 사용 방법 ↗

카테고리: 인터페이스
모션: 흔들림
캔버스: 24 × 24 viewBox
라이선스: CC0-1.0
출처: Motive 직접 제작프로젝트에서 직접 제작한 도형
제작자: Motive 프로젝트
태그: 알람, 시계, 일정

원하는 모습으로 편집

바로 사용할 수 있는 SVG.

인터페이스 활용 예제

알림 설정

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

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

Anchor ring

Atom spin

Bell ring

Chat bounce

Coffee ring