인터페이스 / 그리기

Snowshoe draw

겨울 활동과 계절 소식에 어울리는 선으로 그려지는 설피 아이콘입니다.

무료 사용 · 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-snowshoe-draw-1ux262q" 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-snowshoe-draw-1ux262q-title">
  <title id="svg-snowshoe-draw-1ux262q-title">Snowshoe draw</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-snowshoe-draw-1ux262q-motion-0{0%{stroke-dashoffset:60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
#svg-snowshoe-draw-1ux262q [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-snowshoe-draw-1ux262q-motion-0;animation-duration:1800ms;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-snowshoe-draw-1ux262q [data-motion]{animation:none}}</style>
  <g data-motion="motion" stroke-dasharray="60" stroke-dashoffset="0">
    <path d="M12 2c8 0 7 12 0 20C5 14 4 2 12 2Z M9 5l6 9 M15 5l-6 9 M8 9h8 M8 13h8 M10 17h4" pathLength="60"/>
    <rect x="10" y="7" width="4" height="6" rx="1" pathLength="60"/>
  </g>
</svg>

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

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

인터페이스 활용 예제

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

인터페이스 제어

—

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

계절 인사말이나 활동, 상품 이름 옆에 사용하고 일정과 중요한 정보는 읽을 수 있는 글로 안내하세요.

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

SVG 사용 방법 ↗

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

원하는 모습으로 편집

바로 사용할 수 있는 SVG.

인터페이스 활용 예제

인터페이스 제어

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

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

Candy cane ring

Fireplace pulse

Hot cocoa pulse

Ice skate bounce

Icicles draw