귀멸의칼날 쇼핑몰 디자인
두노피
디자인과정의 영상입니다. 트랜드는 아니지만 재미로 볼만한 영상입니다.
중급이상
Photoshop
html - SVG scroll animation effects - 15 drawings presented for special portfolios
Using svg, draw simple images and apply them to your site. If applied to a portfolio, it will become a standout page.
What you will learn!
svg animation
Scroll animation
In this lesson, you will learn how to create an animation of a boat moving naturally along a river path using SVG and CSS. The technical principle is to use a simple principle of calculating the total length of path and controlling the movement using stroke-dasharray and stroke-dashoffset properties. The key is that through this process, you will implement advanced web content that combines design and interaction , rather than simple images.
The important point here is that using these SVG animations will significantly improve the quality of your portfolio. In particular, companies and clients these days value dynamic screen compositions that can attract the user's attention more than simple static designs, and the ability to interpret web technology in a design-oriented way.
Through this internship, you will gain experience in controlling everything from background design to interactive elements and character movements. If you include this result in your portfolio, you can expect the following effects:
✔ Differentiation from simple static web design
Most applicants build their portfolios around static images, Figma drafts, and HTML structures. But by showing real-time interactions using SVG and CSS, like this animation, you can highlight how your designs actually come to life.
✔ Simultaneously appeals to both coding ability and design sense
Beyond just pretty design, emphasizing that you wrote the code yourself to implement the interactions will give you the image of a “designer who is good at code.” This is a strong competitive edge in both front-end and web design positions.
✔ Demonstrate practical skills that can be applied to projects
A boat moving along a river, a production combining various icons, is a skill that can be applied directly to practical work such as corporate websites, product promotions, event pages, and game design. If you present results that can be practically used, rather than simply a portfolio work, you can also appeal to your practical adaptability.
✔ Create a unique and memorable portfolio
While many applicants’ portfolios have similar, formulaic compositions, you can make a strong impression on the interviewer by adding your own animated elements. In particular, the scene of a boat moving naturally along a river is simple, yet visually impactful.
Through this course, you will go beyond simple technical implementation and improve the completeness of your portfolio, and create differentiated results with competitiveness. 🌊 🚤
Recommended for
these people
Who is this course right for?
SVG animation: First time or tried?
Those who wish to apply to their portfolio
Those who wish to apply directly in practice
Need to know before starting?
html basics, JavaScript or jQuery basics
1,281
Learners
18
Reviews
24
Answers
4.9
Rating
9
Courses
웹디자인기능사 실기
전국 평균 합격률 60%에
우리반은 90% 합격중이지용~용용~
Curriculum
All
11 lectures ∙ (2hr 7min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
Not enough reviews.
Please write a valuable review that helps everyone!
$13.20
dunopi's other courses
Check out other courses by the instructor!
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[환상의족발] 디자인부터 코딩까지강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
Similar courses
Explore other courses in the same field!
![쌩초보, 비전공자를 위한 [HTML 스타터] 부트캠프강의 썸네일](https://cdn.inflearn.com/public/courses/334738/cover/8a838278-6535-473c-9f5f-ed44e79581b1/334738.jpg?f=avif&w=420)
![[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기강의 썸네일](https://cdn.inflearn.com/public/courses/335863/cover/836195ea-22e0-4a97-84a9-5c520b028729/335863.png?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
