Studio
Logo Studio
Edit your SVG logo, check construction and clear space, generate variants and export a logo pack.
Logo
Shared with Brand Studio. Upload an SVG or keep the generated mark.
Generated from the brand name
Edit
Recolor or edit the markup. Scripts are always stripped.
- #6366f1
- #f472b6
Changes apply when the field loses focus.
Export · Full color
Pick a variant in the Variants tab.
;stroke-dashoffset:var(--dh-l)%7D68.42%25,100%25%7Bstroke-dasharray:var(--dh-l);stroke-dashoffset:0%7D%7D@keyframes dh-trace%7B0%25%7Bstroke:var(--dh-c);stroke-width:var(--dh-w);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:var(--dh-l);stroke-dashoffset:var(--dh-l);stroke-opacity:1%7D68.42%25,89.47%25%7Bstroke:var(--dh-c);stroke-width:var(--dh-w);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:var(--dh-l);stroke-dashoffset:0;stroke-opacity:1%7D100%25%7Bstroke:var(--dh-c);stroke-width:var(--dh-w);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:var(--dh-l);stroke-dashoffset:0;stroke-opacity:0%7D%7D@keyframes dh-fill%7B0%25,47.37%25%7Bfill-opacity:0%7D89.47%25,100%25%7Bfill-opacity:var(--dh-fo)%7D%7D@keyframes dh-fade%7B0%25,47.37%25%7Bopacity:0%7D89.47%25,100%25%7Bopacity:var(--dh-op)%7D%7D.dh-draw,.dh-trace,.dh-fade%7Banimation-duration:1.9s;animation-timing-function:ease-in-out;animation-fill-mode:backwards;animation-iteration-count:1;animation-delay:var(--dh-delay,0s)%7D.dh-draw%7Banimation-name:dh-draw,dh-fill%7D.dh-trace%7Banimation-name:dh-trace,dh-fill%7D.dh-fade%7Banimation-name:dh-fade%7D@media (prefers-reduced-motion:reduce)%7B.dh-draw,.dh-trace,.dh-fade%7Banimation:none%7D%7D%3C/style%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' width='160' height='160' x='0' y='0' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M48 4 92 48 48 92 4 48Z' fill='%236366f1' style='--dh-l:254.88;--dh-fo:1;--dh-c:%236366f1;--dh-w:1.15' class='dh-trace'/%3E%3Cpath d='M48 4 92 48H4Z' fill='%23f472b6' style='--dh-l:217.7;--dh-fo:1;--dh-c:%23f472b6;--dh-w:1.15;--dh-delay:0.12s' class='dh-trace'/%3E%3C/svg%3E%3C/svg%3E)
Animated SVGOutlines draw in, then fills fade in. Shows the finished logo when motion is reduced.
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="160" height="160" x="0" y="0" preserveAspectRatio="xMidYMid meet"><path d="M48 4 92 48 48 92 4 48Z" fill="#6366f1"/><path d="M48 4 92 48H4Z" fill="#f472b6"/></svg></svg>