Menu
I am working on svg's, and I keep learning a lot about them. Here is one problem I faced. I have an svg with many path's and when I transform one of them part of it is hidden. I couldn't figure out how to make it visible I tried playing with the viewbox but it didn't give me what I wanted.
codepen demo.
.notebook{
margin-top:0px;
width:300px;
height:auto;
}
.path{
transform:rotateY(40deg) skewY(20deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<head>
<body>
<svg class="notebook"
fill="none" viewBox="0 0 176 227" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="m173.58 0.18188h-162.68v226.21h162.68c0.585 0 1.145-0.232 1.558-0.645 0.414-0.413 0.646-0.974 0.646-1.558v-221.8c0-0.58435-0.232-1.1448-0.646-1.558-0.413-0.4132-0.973-0.64534-1.558-0.64535zm-153.5 219.96c-0.7989 0-1.5799-0.237-2.2441-0.68-0.6643-0.444-1.1821-1.075-1.4878-1.813s-0.3857-1.55-0.2299-2.334c0.1559-0.784 0.5406-1.503 1.1055-2.068 0.565-0.565 1.2847-0.95 2.0683-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.074-1.4878-1.812c-0.3057-0.739-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.069 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.055-0.3075 1.546-0.203 0.49-0.5005 0.935-0.8756 1.31s-0.8204 0.673-1.3105 0.876-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.105 0.7836-0.156 1.5958-0.076 2.3339 0.229 0.7381 0.306 1.3689 0.824 1.8128 1.488 0.4439 0.665 0.6808 1.445 0.6808 2.244 0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.784 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.308-1.5459 0.308zm0-20.565c-0.7989 0-1.5798-0.237-2.2441-0.681-0.6643-0.443-1.182-1.074-1.4878-1.812-0.3057-0.738-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23c0.7381 0.305 1.3689 0.823 1.8128 1.487 0.4439 0.665 0.6808 1.446 0.6808 2.245 0 0.53-0.1045 1.055-0.3075 1.545s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8234 1.8128 1.4877 0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0557-0.3075 1.5458s-0.5006 0.9354-0.8756 1.3105c-0.3751 0.3751-0.8204 0.6726-1.3105 0.8756s-1.0154 0.3075-1.5459 0.3075zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4877c0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4878c0.4439 0.6642 0.6808 1.4452 0.6808 2.2441 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8129-0.3057-0.7381-0.3857-1.5502-0.2299-2.3338 0.1559-0.7836 0.5406-1.5034 1.1055-2.0683 0.565-0.5649 1.2847-0.9496 2.0683-1.1055 0.7836-0.1558 1.5958-0.0759 2.3339 0.2299 0.7381 0.3057 1.3689 0.8235 1.8128 1.4877 0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 1e-4 -1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8128s-0.3857-1.5503-0.2299-2.3339c0.1559-0.78357 0.5406-1.5033 1.1055-2.0682 0.565-0.56493 1.2847-0.94965 2.0683-1.1055s1.5958-0.07587 2.3339 0.22986c0.7381 0.30574 1.3689 0.82348 1.8128 1.4878s0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3075-1.5459 0.3074z" fill="#3F3D56"/>
<path d="m10.901 12.667c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7846 9.5594-1.8361 10.649-1.8361v0.73444c-5.6304 0-9.2812 0.63024-9.8692 1.1016 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0984-0.2856-0.2018-1.4525-0.6246-4.5823-0.89514l0.0632-0.73157c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 32.865c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6303 0-9.2811 0.6303-9.8691 1.1017 0.58794 0.4714 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0985-0.2857-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 53.429c-1.09 0-10.649-0.0514-10.649-1.8361s9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0985-0.2856-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7847-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 73.993c-1.09 0-10.649-0.0515-10.649-1.8362 0-1.7846 9.5594-1.8361 10.649-1.8361v0.7345c-5.6303 0-9.2811 0.6302-9.8691 1.1016 0.58794 0.4715 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0984-0.2857-0.2017-1.4525-0.6246-4.5823-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 94.558c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1016 9.8692 1.1016 5.6178 0 9.2648-0.6276 9.8651-1.0984-0.2857-0.2017-1.4526-0.6245-4.5824-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 115.12c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.837 10.649-1.837v0.735c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 135.69c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 156.25c-1.09 0-10.649-0.051-10.649-1.836 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58795 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.8651-1.099-0.2857-0.201-1.4525-0.624-4.5824-0.895l0.0632-0.731c5.3035 0.458 5.3035 1.305 5.3035 1.623 0 1.785-9.5594 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 176.82c-1.09 0-10.649-0.052-10.649-1.837 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58794 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.623 0 1.785-9.5593 1.837-10.649 1.837z" fill="#2F2E41"/>
<path d="m10.901 197.38c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.8651-1.098-0.2857-0.202-1.4526-0.624-4.5824-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 217.94c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.624-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m141.33 71.242h-87.765c-0.6875-4e-4 -1.3465-0.1453-1.8327-0.403-0.4861-0.2577-0.7595-0.607-0.7603-0.9714v-18.185c8e-4 -0.3645 0.2742-0.7138 0.7603-0.9715 0.4862-0.2577 1.1452-0.4026 1.8327-0.403h87.765c0.688 4e-4 1.347 0.1453 1.833 0.403s0.76 0.607 0.76 0.9715v18.185c0 0.3644-0.274 0.7137-0.76 0.9714s-1.145 0.4026-1.833 0.403z" fill="#fff"/>
<g clip-path="url(#clip1)">
<path d="m150.92 159.82c0.01 7.675-1.544 15.272-4.566 22.327l-0.188 0.432c-5.113 11.632-13.978 21.212-25.178 27.211-11.201 5.998-24.089 8.067-36.604 5.877-0.3406-0.061-0.6805-0.123-1.0199-0.188-3.507-0.68-6.9411-1.693-10.256-3.025-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7246-0.321-1.0836-0.488-9.8198-4.551-18.134-11.815-23.962-20.935s-8.9281-19.716-8.9339-30.539c0-31.313 25.385-56.697 56.697-56.697 31.313 0 56.698 25.384 56.698 56.697z" fill="#2F2E41"/>
<path d="m84.379 215.66c-0.3405-0.061-0.6805-0.123-1.0199-0.188-0.2214-6.426-0.9813-19.616-3.5729-33.43-1.4175-7.56-3.3851-15.31-6.1143-22.237-0.935-2.397-2.0029-4.741-3.1989-7.019-2.7577-5.208-6.1025-9.593-10.158-12.564l0.5972-0.815c3.3733 2.473 6.405 5.944 9.095 10.414 0.8069 1.338 1.5818 2.766 2.3249 4.284 0.7968 1.624 1.5567 3.347 2.2797 5.171 0.4613 1.161 0.9069 2.362 1.3369 3.603 1.872 5.39 3.4633 11.539 4.774 18.449 0.2902 1.526 0.5664 3.09 0.8286 4.692 2.0314 12.408 2.6437 23.879 2.8282 29.64z" fill="#07C5AE" opacity=".2"/>
<path d="m71.5 211.78c-0.3623-0.158-0.7247-0.321-1.0836-0.488-0.3506-3.808-0.9947-8.532-2.1723-13.016-0.5158-2.013-1.1779-3.987-1.9811-5.904-1.3436-3.145-3.0831-5.819-5.3326-7.468l0.5972-0.814c2.3551 1.725 4.1718 4.451 5.5758 7.639 1.5819 3.593 2.637 7.775 3.3398 11.771 0.5217 2.967 0.8505 5.834 1.0568 8.28z" fill="#07C5AE" opacity=".2"/>
<path d="m54.674 140.2c2.7874 0 5.0471-2.26 5.0471-5.047 0-2.788-2.2597-5.047-5.0471-5.047-2.7875 0-5.0472 2.259-5.0472 5.047 0 2.787 2.2597 5.047 5.0472 5.047z" fill="#07C5AE" opacity=".2"/>
<path d="m56.299 183.65c2.7875 0 5.0472-2.26 5.0472-5.047 0-2.788-2.2597-5.047-5.0472-5.047-2.7874 0-5.0471 2.259-5.0471 5.047 0 2.787 2.2597 5.047 5.0471 5.047z" fill="#07C5AE" opacity=".2"/>
<path d="m74.711 143.63c-1.0702 6.039 1.2924 11.506 1.2924 11.506s4.098-4.322 5.1683-10.36c1.0702-6.039-1.2924-11.506-1.2924-11.506s-4.098 4.322-5.1683 10.36z" fill="#07C5AE" opacity=".2"/>
<path d="m57.937 157.97c5.7595 2.106 11.547 0.754 11.547 0.754s-3.5505-4.766-9.31-6.872-11.547-0.754-11.547-0.754 3.5505 4.766 9.3099 6.872z" fill="#07C5AE" opacity=".2"/>
<path d="m56.961 196.44c4.037 1.476 8.0992 0.513 8.0992 0.513s-2.4828-3.356-6.5198-4.832c-4.0369-1.477-8.0992-0.514-8.0992-0.514s2.4829 3.357 6.5198 4.833z" fill="#07C5AE" opacity=".2"/>
<path d="m94.101 172.37c12.207 0 22.104-9.896 22.104-22.104 0-12.207-9.897-22.103-22.104-22.103-12.208 0-22.104 9.896-22.104 22.103 0 12.208 9.8961 22.104 22.104 22.104z" fill="#A0616A"/>
<path d="m85.467 167.19s2.763 13.124 2.763 14.505c0 1.382 13.124 7.598 13.124 7.598l11.742-2.072 4.145-12.433s-6.908-10.361-6.908-14.506l-24.866 6.908z" fill="#A0616A"/>
<path d="m146.35 182.14-0.188 0.433c-5.113 11.631-13.978 21.212-25.178 27.21s-24.089 8.067-36.604 5.877c-0.3405-0.06-0.6804-0.123-1.0198-0.188-3.507-0.68-6.9412-1.693-10.256-3.024-0.5385-0.217-1.073-0.441-1.6036-0.673-0.3624-0.158-0.7247-0.32-1.0837-0.488-3.2537-1.508-6.3569-3.321-9.2678-5.415l-2.6201-7.6 1.4727-1.124 6.2619-4.781 0.8404-0.642 12.683-9.682 0.936-0.715 6.5923-5.032 0.0017-2e-3s7.1291 11.616 17.49 8.162c10.362-3.453 10.135-13.357 10.135-13.357l31.407 11.041z" fill="#3A3768"/>
<path d="m74.933 132.46s7.0179-15.205 20.469-11.697c13.45 3.509 21.054 8.773 21.638 14.036s-0.293 13.158-0.293 13.158-1.462-10.819-10.819-8.479c-9.3569 2.339-23.977 0.584-23.977 0.584l-2.3393 21.054s-2.6317-3.802-5.5558-1.462c-2.9241 2.339-8.4798-22.516 0.8772-27.194z" fill="#3A3768"/>
<path d="m73.104 212.45c-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7247-0.321-1.0836-0.488-5.3814-2.496-10.339-5.818-14.693-9.847 1.5416-2.1 2.8047-3.169 2.8047-3.169h10.362l1.5533 5.224 2.6604 8.952z" fill="#3A3768"/>
<path d="m137.27 181.01 8.889 1.57c-2.379 5.419-5.592 10.432-9.521 14.857l0.632-16.427z" fill="#3A3768"/>
</g>
</g>
<defs>
<clipPath id="a">
<rect width="176" height="227" fill="#fff"/>
</clipPath>
</defs>
</svg>
</body>
</html>
As you an see in the image above the skewed part of the path is hidden, How can I increast the boundary of the svg so that the path would be visible even after skewed
673
The skewed part is clipped away, two times. The group the .path sits in has an attribute clip-path="url(#a)". Look at its definition:
<clipPath id="a">
<rect width="176" height="227" fill="#fff"/>
</clipPath>
Outside this rectangle, nothing is rendered, but the lower end of the skewed part lies below. Now, the dimensions of that rectangle match those of the <svg> element viewBox attribute. There are some subtleties involved here I am going to gloss over, but in general, such a clip-path has not many merits, and in your setup you can just leave it off.
But that won't be enough. There is an automatic clip path applied at the box borders of the <svg> element. The way your page is setup, with the height of the surrounding element being set to auto, the <svg> element has the same height as the viewBox, and that is where the automatic clipping will be applied.
THere are two ways to solve this. The more intuitive way would be to change the height of the viewBox, for example setting it to viewBox="0 0 176 295", making the <svg> element higher.
.notebook{
margin-top:0px;
width:300px;
height:auto;
}
.path{
transform:rotateY(40deg) skewY(20deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<head>
<body>
<svg class="notebook"
fill="none" viewBox="0 0 176 295" xmlns="http://www.w3.org/2000/svg">
<g>
<path class="path" d="m173.58 0.18188h-162.68v226.21h162.68c0.585 0 1.145-0.232 1.558-0.645 0.414-0.413 0.646-0.974 0.646-1.558v-221.8c0-0.58435-0.232-1.1448-0.646-1.558-0.413-0.4132-0.973-0.64534-1.558-0.64535zm-153.5 219.96c-0.7989 0-1.5799-0.237-2.2441-0.68-0.6643-0.444-1.1821-1.075-1.4878-1.813s-0.3857-1.55-0.2299-2.334c0.1559-0.784 0.5406-1.503 1.1055-2.068 0.565-0.565 1.2847-0.95 2.0683-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.074-1.4878-1.812c-0.3057-0.739-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.069 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.055-0.3075 1.546-0.203 0.49-0.5005 0.935-0.8756 1.31s-0.8204 0.673-1.3105 0.876-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.105 0.7836-0.156 1.5958-0.076 2.3339 0.229 0.7381 0.306 1.3689 0.824 1.8128 1.488 0.4439 0.665 0.6808 1.445 0.6808 2.244 0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.784 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.308-1.5459 0.308zm0-20.565c-0.7989 0-1.5798-0.237-2.2441-0.681-0.6643-0.443-1.182-1.074-1.4878-1.812-0.3057-0.738-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23c0.7381 0.305 1.3689 0.823 1.8128 1.487 0.4439 0.665 0.6808 1.446 0.6808 2.245 0 0.53-0.1045 1.055-0.3075 1.545s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8234 1.8128 1.4877 0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0557-0.3075 1.5458s-0.5006 0.9354-0.8756 1.3105c-0.3751 0.3751-0.8204 0.6726-1.3105 0.8756s-1.0154 0.3075-1.5459 0.3075zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4877c0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4878c0.4439 0.6642 0.6808 1.4452 0.6808 2.2441 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8129-0.3057-0.7381-0.3857-1.5502-0.2299-2.3338 0.1559-0.7836 0.5406-1.5034 1.1055-2.0683 0.565-0.5649 1.2847-0.9496 2.0683-1.1055 0.7836-0.1558 1.5958-0.0759 2.3339 0.2299 0.7381 0.3057 1.3689 0.8235 1.8128 1.4877 0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 1e-4 -1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8128s-0.3857-1.5503-0.2299-2.3339c0.1559-0.78357 0.5406-1.5033 1.1055-2.0682 0.565-0.56493 1.2847-0.94965 2.0683-1.1055s1.5958-0.07587 2.3339 0.22986c0.7381 0.30574 1.3689 0.82348 1.8128 1.4878s0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3075-1.5459 0.3074z" fill="#3F3D56"/>
<path d="m10.901 12.667c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7846 9.5594-1.8361 10.649-1.8361v0.73444c-5.6304 0-9.2812 0.63024-9.8692 1.1016 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0984-0.2856-0.2018-1.4525-0.6246-4.5823-0.89514l0.0632-0.73157c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 32.865c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6303 0-9.2811 0.6303-9.8691 1.1017 0.58794 0.4714 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0985-0.2857-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 53.429c-1.09 0-10.649-0.0514-10.649-1.8361s9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0985-0.2856-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7847-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 73.993c-1.09 0-10.649-0.0515-10.649-1.8362 0-1.7846 9.5594-1.8361 10.649-1.8361v0.7345c-5.6303 0-9.2811 0.6302-9.8691 1.1016 0.58794 0.4715 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0984-0.2857-0.2017-1.4525-0.6246-4.5823-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 94.558c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1016 9.8692 1.1016 5.6178 0 9.2648-0.6276 9.8651-1.0984-0.2857-0.2017-1.4526-0.6245-4.5824-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 115.12c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.837 10.649-1.837v0.735c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 135.69c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 156.25c-1.09 0-10.649-0.051-10.649-1.836 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58795 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.8651-1.099-0.2857-0.201-1.4525-0.624-4.5824-0.895l0.0632-0.731c5.3035 0.458 5.3035 1.305 5.3035 1.623 0 1.785-9.5594 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 176.82c-1.09 0-10.649-0.052-10.649-1.837 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58794 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.623 0 1.785-9.5593 1.837-10.649 1.837z" fill="#2F2E41"/>
<path d="m10.901 197.38c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.8651-1.098-0.2857-0.202-1.4526-0.624-4.5824-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 217.94c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.624-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m141.33 71.242h-87.765c-0.6875-4e-4 -1.3465-0.1453-1.8327-0.403-0.4861-0.2577-0.7595-0.607-0.7603-0.9714v-18.185c8e-4 -0.3645 0.2742-0.7138 0.7603-0.9715 0.4862-0.2577 1.1452-0.4026 1.8327-0.403h87.765c0.688 4e-4 1.347 0.1453 1.833 0.403s0.76 0.607 0.76 0.9715v18.185c0 0.3644-0.274 0.7137-0.76 0.9714s-1.145 0.4026-1.833 0.403z" fill="#fff"/>
<g clip-path="url(#clip1)">
<path d="m150.92 159.82c0.01 7.675-1.544 15.272-4.566 22.327l-0.188 0.432c-5.113 11.632-13.978 21.212-25.178 27.211-11.201 5.998-24.089 8.067-36.604 5.877-0.3406-0.061-0.6805-0.123-1.0199-0.188-3.507-0.68-6.9411-1.693-10.256-3.025-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7246-0.321-1.0836-0.488-9.8198-4.551-18.134-11.815-23.962-20.935s-8.9281-19.716-8.9339-30.539c0-31.313 25.385-56.697 56.697-56.697 31.313 0 56.698 25.384 56.698 56.697z" fill="#2F2E41"/>
<path d="m84.379 215.66c-0.3405-0.061-0.6805-0.123-1.0199-0.188-0.2214-6.426-0.9813-19.616-3.5729-33.43-1.4175-7.56-3.3851-15.31-6.1143-22.237-0.935-2.397-2.0029-4.741-3.1989-7.019-2.7577-5.208-6.1025-9.593-10.158-12.564l0.5972-0.815c3.3733 2.473 6.405 5.944 9.095 10.414 0.8069 1.338 1.5818 2.766 2.3249 4.284 0.7968 1.624 1.5567 3.347 2.2797 5.171 0.4613 1.161 0.9069 2.362 1.3369 3.603 1.872 5.39 3.4633 11.539 4.774 18.449 0.2902 1.526 0.5664 3.09 0.8286 4.692 2.0314 12.408 2.6437 23.879 2.8282 29.64z" fill="#07C5AE" opacity=".2"/>
<path d="m71.5 211.78c-0.3623-0.158-0.7247-0.321-1.0836-0.488-0.3506-3.808-0.9947-8.532-2.1723-13.016-0.5158-2.013-1.1779-3.987-1.9811-5.904-1.3436-3.145-3.0831-5.819-5.3326-7.468l0.5972-0.814c2.3551 1.725 4.1718 4.451 5.5758 7.639 1.5819 3.593 2.637 7.775 3.3398 11.771 0.5217 2.967 0.8505 5.834 1.0568 8.28z" fill="#07C5AE" opacity=".2"/>
<path d="m54.674 140.2c2.7874 0 5.0471-2.26 5.0471-5.047 0-2.788-2.2597-5.047-5.0471-5.047-2.7875 0-5.0472 2.259-5.0472 5.047 0 2.787 2.2597 5.047 5.0472 5.047z" fill="#07C5AE" opacity=".2"/>
<path d="m56.299 183.65c2.7875 0 5.0472-2.26 5.0472-5.047 0-2.788-2.2597-5.047-5.0472-5.047-2.7874 0-5.0471 2.259-5.0471 5.047 0 2.787 2.2597 5.047 5.0471 5.047z" fill="#07C5AE" opacity=".2"/>
<path d="m74.711 143.63c-1.0702 6.039 1.2924 11.506 1.2924 11.506s4.098-4.322 5.1683-10.36c1.0702-6.039-1.2924-11.506-1.2924-11.506s-4.098 4.322-5.1683 10.36z" fill="#07C5AE" opacity=".2"/>
<path d="m57.937 157.97c5.7595 2.106 11.547 0.754 11.547 0.754s-3.5505-4.766-9.31-6.872-11.547-0.754-11.547-0.754 3.5505 4.766 9.3099 6.872z" fill="#07C5AE" opacity=".2"/>
<path d="m56.961 196.44c4.037 1.476 8.0992 0.513 8.0992 0.513s-2.4828-3.356-6.5198-4.832c-4.0369-1.477-8.0992-0.514-8.0992-0.514s2.4829 3.357 6.5198 4.833z" fill="#07C5AE" opacity=".2"/>
<path d="m94.101 172.37c12.207 0 22.104-9.896 22.104-22.104 0-12.207-9.897-22.103-22.104-22.103-12.208 0-22.104 9.896-22.104 22.103 0 12.208 9.8961 22.104 22.104 22.104z" fill="#A0616A"/>
<path d="m85.467 167.19s2.763 13.124 2.763 14.505c0 1.382 13.124 7.598 13.124 7.598l11.742-2.072 4.145-12.433s-6.908-10.361-6.908-14.506l-24.866 6.908z" fill="#A0616A"/>
<path d="m146.35 182.14-0.188 0.433c-5.113 11.631-13.978 21.212-25.178 27.21s-24.089 8.067-36.604 5.877c-0.3405-0.06-0.6804-0.123-1.0198-0.188-3.507-0.68-6.9412-1.693-10.256-3.024-0.5385-0.217-1.073-0.441-1.6036-0.673-0.3624-0.158-0.7247-0.32-1.0837-0.488-3.2537-1.508-6.3569-3.321-9.2678-5.415l-2.6201-7.6 1.4727-1.124 6.2619-4.781 0.8404-0.642 12.683-9.682 0.936-0.715 6.5923-5.032 0.0017-2e-3s7.1291 11.616 17.49 8.162c10.362-3.453 10.135-13.357 10.135-13.357l31.407 11.041z" fill="#3A3768"/>
<path d="m74.933 132.46s7.0179-15.205 20.469-11.697c13.45 3.509 21.054 8.773 21.638 14.036s-0.293 13.158-0.293 13.158-1.462-10.819-10.819-8.479c-9.3569 2.339-23.977 0.584-23.977 0.584l-2.3393 21.054s-2.6317-3.802-5.5558-1.462c-2.9241 2.339-8.4798-22.516 0.8772-27.194z" fill="#3A3768"/>
<path d="m73.104 212.45c-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7247-0.321-1.0836-0.488-5.3814-2.496-10.339-5.818-14.693-9.847 1.5416-2.1 2.8047-3.169 2.8047-3.169h10.362l1.5533 5.224 2.6604 8.952z" fill="#3A3768"/>
<path d="m137.27 181.01 8.889 1.57c-2.379 5.419-5.592 10.432-9.521 14.857l0.632-16.427z" fill="#3A3768"/>
</g>
</g>
<defs>
</defs>
</svg>
</body>
</html>The other approach is needed if you think the <svg> element must really end at the bottom left end of the .path. Then you can override the default settings and set a CSS rule .notebook { overflow: visible; }.
body {
height: 500px;
}
.notebook{
margin-top:0px;
width:300px;
height:auto;
overflow: visible;
}
.path{
transform:rotateY(40deg) skewY(20deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<head>
<body>
<svg class="notebook"
fill="none" viewBox="0 0 176 227" xmlns="http://www.w3.org/2000/svg">
<g>
<path class="path" d="m173.58 0.18188h-162.68v226.21h162.68c0.585 0 1.145-0.232 1.558-0.645 0.414-0.413 0.646-0.974 0.646-1.558v-221.8c0-0.58435-0.232-1.1448-0.646-1.558-0.413-0.4132-0.973-0.64534-1.558-0.64535zm-153.5 219.96c-0.7989 0-1.5799-0.237-2.2441-0.68-0.6643-0.444-1.1821-1.075-1.4878-1.813s-0.3857-1.55-0.2299-2.334c0.1559-0.784 0.5406-1.503 1.1055-2.068 0.565-0.565 1.2847-0.95 2.0683-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.074-1.4878-1.812c-0.3057-0.739-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.069 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.055-0.3075 1.546-0.203 0.49-0.5005 0.935-0.8756 1.31s-0.8204 0.673-1.3105 0.876-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.105 0.7836-0.156 1.5958-0.076 2.3339 0.229 0.7381 0.306 1.3689 0.824 1.8128 1.488 0.4439 0.665 0.6808 1.445 0.6808 2.244 0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.784 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.308-1.5459 0.308zm0-20.565c-0.7989 0-1.5798-0.237-2.2441-0.681-0.6643-0.443-1.182-1.074-1.4878-1.812-0.3057-0.738-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23c0.7381 0.305 1.3689 0.823 1.8128 1.487 0.4439 0.665 0.6808 1.446 0.6808 2.245 0 0.53-0.1045 1.055-0.3075 1.545s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8234 1.8128 1.4877 0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0557-0.3075 1.5458s-0.5006 0.9354-0.8756 1.3105c-0.3751 0.3751-0.8204 0.6726-1.3105 0.8756s-1.0154 0.3075-1.5459 0.3075zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4877c0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4878c0.4439 0.6642 0.6808 1.4452 0.6808 2.2441 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8129-0.3057-0.7381-0.3857-1.5502-0.2299-2.3338 0.1559-0.7836 0.5406-1.5034 1.1055-2.0683 0.565-0.5649 1.2847-0.9496 2.0683-1.1055 0.7836-0.1558 1.5958-0.0759 2.3339 0.2299 0.7381 0.3057 1.3689 0.8235 1.8128 1.4877 0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 1e-4 -1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8128s-0.3857-1.5503-0.2299-2.3339c0.1559-0.78357 0.5406-1.5033 1.1055-2.0682 0.565-0.56493 1.2847-0.94965 2.0683-1.1055s1.5958-0.07587 2.3339 0.22986c0.7381 0.30574 1.3689 0.82348 1.8128 1.4878s0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3075-1.5459 0.3074z" fill="#3F3D56"/>
<path d="m10.901 12.667c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7846 9.5594-1.8361 10.649-1.8361v0.73444c-5.6304 0-9.2812 0.63024-9.8692 1.1016 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0984-0.2856-0.2018-1.4525-0.6246-4.5823-0.89514l0.0632-0.73157c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 32.865c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6303 0-9.2811 0.6303-9.8691 1.1017 0.58794 0.4714 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0985-0.2857-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 53.429c-1.09 0-10.649-0.0514-10.649-1.8361s9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0985-0.2856-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7847-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 73.993c-1.09 0-10.649-0.0515-10.649-1.8362 0-1.7846 9.5594-1.8361 10.649-1.8361v0.7345c-5.6303 0-9.2811 0.6302-9.8691 1.1016 0.58794 0.4715 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0984-0.2857-0.2017-1.4525-0.6246-4.5823-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 94.558c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1016 9.8692 1.1016 5.6178 0 9.2648-0.6276 9.8651-1.0984-0.2857-0.2017-1.4526-0.6245-4.5824-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/>
<path d="m10.901 115.12c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.837 10.649-1.837v0.735c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 135.69c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 156.25c-1.09 0-10.649-0.051-10.649-1.836 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58795 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.8651-1.099-0.2857-0.201-1.4525-0.624-4.5824-0.895l0.0632-0.731c5.3035 0.458 5.3035 1.305 5.3035 1.623 0 1.785-9.5594 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 176.82c-1.09 0-10.649-0.052-10.649-1.837 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58794 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.623 0 1.785-9.5593 1.837-10.649 1.837z" fill="#2F2E41"/>
<path d="m10.901 197.38c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.8651-1.098-0.2857-0.202-1.4526-0.624-4.5824-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m10.901 217.94c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.624-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/>
<path d="m141.33 71.242h-87.765c-0.6875-4e-4 -1.3465-0.1453-1.8327-0.403-0.4861-0.2577-0.7595-0.607-0.7603-0.9714v-18.185c8e-4 -0.3645 0.2742-0.7138 0.7603-0.9715 0.4862-0.2577 1.1452-0.4026 1.8327-0.403h87.765c0.688 4e-4 1.347 0.1453 1.833 0.403s0.76 0.607 0.76 0.9715v18.185c0 0.3644-0.274 0.7137-0.76 0.9714s-1.145 0.4026-1.833 0.403z" fill="#fff"/>
<g clip-path="url(#clip1)">
<path d="m150.92 159.82c0.01 7.675-1.544 15.272-4.566 22.327l-0.188 0.432c-5.113 11.632-13.978 21.212-25.178 27.211-11.201 5.998-24.089 8.067-36.604 5.877-0.3406-0.061-0.6805-0.123-1.0199-0.188-3.507-0.68-6.9411-1.693-10.256-3.025-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7246-0.321-1.0836-0.488-9.8198-4.551-18.134-11.815-23.962-20.935s-8.9281-19.716-8.9339-30.539c0-31.313 25.385-56.697 56.697-56.697 31.313 0 56.698 25.384 56.698 56.697z" fill="#2F2E41"/>
<path d="m84.379 215.66c-0.3405-0.061-0.6805-0.123-1.0199-0.188-0.2214-6.426-0.9813-19.616-3.5729-33.43-1.4175-7.56-3.3851-15.31-6.1143-22.237-0.935-2.397-2.0029-4.741-3.1989-7.019-2.7577-5.208-6.1025-9.593-10.158-12.564l0.5972-0.815c3.3733 2.473 6.405 5.944 9.095 10.414 0.8069 1.338 1.5818 2.766 2.3249 4.284 0.7968 1.624 1.5567 3.347 2.2797 5.171 0.4613 1.161 0.9069 2.362 1.3369 3.603 1.872 5.39 3.4633 11.539 4.774 18.449 0.2902 1.526 0.5664 3.09 0.8286 4.692 2.0314 12.408 2.6437 23.879 2.8282 29.64z" fill="#07C5AE" opacity=".2"/>
<path d="m71.5 211.78c-0.3623-0.158-0.7247-0.321-1.0836-0.488-0.3506-3.808-0.9947-8.532-2.1723-13.016-0.5158-2.013-1.1779-3.987-1.9811-5.904-1.3436-3.145-3.0831-5.819-5.3326-7.468l0.5972-0.814c2.3551 1.725 4.1718 4.451 5.5758 7.639 1.5819 3.593 2.637 7.775 3.3398 11.771 0.5217 2.967 0.8505 5.834 1.0568 8.28z" fill="#07C5AE" opacity=".2"/>
<path d="m54.674 140.2c2.7874 0 5.0471-2.26 5.0471-5.047 0-2.788-2.2597-5.047-5.0471-5.047-2.7875 0-5.0472 2.259-5.0472 5.047 0 2.787 2.2597 5.047 5.0472 5.047z" fill="#07C5AE" opacity=".2"/>
<path d="m56.299 183.65c2.7875 0 5.0472-2.26 5.0472-5.047 0-2.788-2.2597-5.047-5.0472-5.047-2.7874 0-5.0471 2.259-5.0471 5.047 0 2.787 2.2597 5.047 5.0471 5.047z" fill="#07C5AE" opacity=".2"/>
<path d="m74.711 143.63c-1.0702 6.039 1.2924 11.506 1.2924 11.506s4.098-4.322 5.1683-10.36c1.0702-6.039-1.2924-11.506-1.2924-11.506s-4.098 4.322-5.1683 10.36z" fill="#07C5AE" opacity=".2"/>
<path d="m57.937 157.97c5.7595 2.106 11.547 0.754 11.547 0.754s-3.5505-4.766-9.31-6.872-11.547-0.754-11.547-0.754 3.5505 4.766 9.3099 6.872z" fill="#07C5AE" opacity=".2"/>
<path d="m56.961 196.44c4.037 1.476 8.0992 0.513 8.0992 0.513s-2.4828-3.356-6.5198-4.832c-4.0369-1.477-8.0992-0.514-8.0992-0.514s2.4829 3.357 6.5198 4.833z" fill="#07C5AE" opacity=".2"/>
<path d="m94.101 172.37c12.207 0 22.104-9.896 22.104-22.104 0-12.207-9.897-22.103-22.104-22.103-12.208 0-22.104 9.896-22.104 22.103 0 12.208 9.8961 22.104 22.104 22.104z" fill="#A0616A"/>
<path d="m85.467 167.19s2.763 13.124 2.763 14.505c0 1.382 13.124 7.598 13.124 7.598l11.742-2.072 4.145-12.433s-6.908-10.361-6.908-14.506l-24.866 6.908z" fill="#A0616A"/>
<path d="m146.35 182.14-0.188 0.433c-5.113 11.631-13.978 21.212-25.178 27.21s-24.089 8.067-36.604 5.877c-0.3405-0.06-0.6804-0.123-1.0198-0.188-3.507-0.68-6.9412-1.693-10.256-3.024-0.5385-0.217-1.073-0.441-1.6036-0.673-0.3624-0.158-0.7247-0.32-1.0837-0.488-3.2537-1.508-6.3569-3.321-9.2678-5.415l-2.6201-7.6 1.4727-1.124 6.2619-4.781 0.8404-0.642 12.683-9.682 0.936-0.715 6.5923-5.032 0.0017-2e-3s7.1291 11.616 17.49 8.162c10.362-3.453 10.135-13.357 10.135-13.357l31.407 11.041z" fill="#3A3768"/>
<path d="m74.933 132.46s7.0179-15.205 20.469-11.697c13.45 3.509 21.054 8.773 21.638 14.036s-0.293 13.158-0.293 13.158-1.462-10.819-10.819-8.479c-9.3569 2.339-23.977 0.584-23.977 0.584l-2.3393 21.054s-2.6317-3.802-5.5558-1.462c-2.9241 2.339-8.4798-22.516 0.8772-27.194z" fill="#3A3768"/>
<path d="m73.104 212.45c-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7247-0.321-1.0836-0.488-5.3814-2.496-10.339-5.818-14.693-9.847 1.5416-2.1 2.8047-3.169 2.8047-3.169h10.362l1.5533 5.224 2.6604 8.952z" fill="#3A3768"/>
<path d="m137.27 181.01 8.889 1.57c-2.379 5.419-5.592 10.432-9.521 14.857l0.632-16.427z" fill="#3A3768"/>
</g>
</g>
<defs>
</defs>
</svg>
</body>
</html>If you are intrested you can eachive the same with only CSS
.box{
width:300px;
height:400px;
padding-left:28px;
box-sizing:border-box;
border-radius:0 15px 15px 0;
margin-left:30px;
position:relative;
display:flex;
flex-direction:column;
transform-origin:left center;
transform:perspective(300px) rotateY(0deg);
transform-style:preserve-3d;
transition:0.5s;
background:
radial-gradient(circle 10px,transparent 98%,#3f3d56 100%) 0 0/30px 40px repeat-y,
linear-gradient(#3f3d56 0 0) content-box content-box;
}
.box img {
border-radius:50%;
max-width:80%;
margin:auto auto 20px;
}
.box h1 {
margin:50px auto auto;
background:#fff;
color:#000;
}
.box:before,
.box:after{
content:"";
position:absolute;
top:0;
bottom:0;
left:-20px;
width:40px;
background:
radial-gradient(20px 8px at var(--p,top),transparent calc(100% - 5px),
red calc(100% - 4px) calc(100% - 2px),
transparent 100%) 0 20px/100% 40px;
}
.box:after {
--p:bottom;
transform:translateZ(-1px)
}
.box:hover {
transform:perspective(300px) rotateY(30deg);
}
body {
background:#f0f0f0;
}<div class="box">
<h1>title here </h1>
<img src="https://picsum.photos/id/10/300/300">
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
